close

A JW Player használata: Videók beágyazása és konfigurálása

Mi az a JW Player?

A JW Player egy hatékony és rugalmas eszköz videók webhelyeden történő lejátszásához. Ez az útmutató részletesen bemutatja a használatát, beleértve azt is, hogyan szerezheted be a könyvtárat CDN-en keresztül vagy letöltéssel.

Hogyan juthatok hozzá a JW Player könyvtárához

Két lehetőséged van a JW Player könyvtár beszerzésére: CDN használatával vagy helyi tárhelyre való letöltéssel.

1. CDN használata(ajánlott)

A JW Player integrálásának legegyszerűbb és leggyorsabb módja a CDN(Content Delivery Network) használata. A CDN segít a fájlok gyorsabb betöltésében, mivel azok több szerveren is tárolódnak a világ különböző pontjain.

A CDN használatához egyszerűen add hozzá a következő kódsort a <head>webhelyed megfelelő részéhez. Megjegyzés: <YOUR_LICENSE_KEY> A kódot a tényleges licenckulccsal kell helyettesítened .

<script src="https://cdn.jwplayer.com/libraries/<YOUR_LICENSE_KEY>.js"></script>

2. Letöltés és helyi tárhely

Ha teljes kontrollt szeretnél a fájlok felett, és nem akarsz hálózati kapcsolatra támaszkodni, letöltheted a JW Playert, és a saját szervereden tárolhatod.

  1. Látogass el a JW Player hivatalos weboldalára.

  2. Regisztráljon vagy jelentkezzen be fiókjába(ingyenes próbaverzió áll rendelkezésre).

  3. Keresd meg és töltsd le a könyvtárat a fiókod irányítópultjáról.

  4. Csomagold ki a fájlt, és töltsd fel a mappát a szerveredre.

Részletes útmutató a JW Player használatához

Miután elkészült a könyvtár, elkezdheti beágyazni a JW Playert a webhelyébe.

1. HTML fájl létrehozása és a JW Player beágyazása

Íme egy teljes HTML példa. Ha CDN-t használsz, cseréld ki a <script src="...">sort a fent említett CDN-kódra. Ha a letöltött könyvtárat használod, ellenőrizd, hogy a jwplayer.jsfájl elérési útja helyes-e.

<!DOCTYPE html>  
<html>  
<head>  
    <title>JW Player Example</title>  
    <script src="js/jwplayer.js"></script>  
</head>  
<body>  
  
    <h1>How to Use JW Player</h1>  
  
    <div id="video-container"></div>  
  
    <script>  
        // Initialize and configure JW Player  
        jwplayer("video-container").setup({  
            // The path to your video file  
            "file": "videos/my-video.mp4",  
              
            // The path to your video's thumbnail image  
            "image": "images/my-video-thumbnail.jpg",  
              
            // The dimensions of the player  
            "width": "640",  
            "height": "360",  
              
            // Autoplay the video when the page loads  
            "autostart": false,  
              
            // Show the player controls  
            "controls": true  
        });  
    </script>  
  
</body>  
</html>

2. A kódex részletes magyarázata

  • <script src="...">: Ez a sor a JW Player könyvtárat a webhelyedhez kapcsolja.

  • <div id="video-container"></div>: Itt fog megjelenni a videó. Bármilyen idnevet megadhatsz neki, de ügyelj arra, hogy megegyezzen a függvényben használt névvel jwplayer().

  • jwplayer("video-container").setup({...}): Itt inicializálhatja és konfigurálhatja a JW Playert.

    • "file": A videofájl elérési útja.

    • "image": A videó bélyegképének elérési útja.

    • "width"és: Beállítja a lejátszó méreteit. Reszponzív lejátszóhoz "height"is használható ."100%"

    • "autostart": Állítsa be, trueha azt szeretné, hogy a videó automatikusan lejátszódjon.

    • "controls": Állítsa be, falseha el szeretné rejteni a lejátszó vezérlőit.

Ezzel a részletes útmutatóval könnyedén elkezdheted használni a JW Playert videók megjelenítéséhez a weboldaladon.