close

Kako uporabljati JW Player: Vdelava in konfiguriranje videoposnetkov

Kaj je JW Player?

JW Player je zmogljivo in prilagodljivo orodje za predvajanje videoposnetkov na vašem spletnem mestu. Ta priročnik bo podrobno predstavil, kako ga uporabljati, vključno s tem, kako pridobiti knjižnico z uporabo CDN-ja ali s prenosom.

Kako pridobiti knjižnico JW Player

Za pridobitev knjižnice JW Player imate dve možnosti: uporabo CDN-ja ali prenos za lokalno gostovanje.

1. Uporaba CDN-ja(priporočeno)

Uporaba CDN-ja(omrežja za dostavo vsebin) je najpreprostejši in najhitrejši način za integracijo JW Playerja. CDN omogoča hitrejše nalaganje datotek, ker so gostovane na več strežnikih po vsem svetu.

Za uporabo CDN-ja preprosto dodajte naslednjo vrstico kode v <head>razdelek svojega spletnega mesta. Opomba: Zamenjati morate <YOUR_LICENSE_KEY>z dejanskim licenčnim ključem.

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

2. Prenos in gostovanje lokalno

Če želite popoln nadzor nad datotekami in se ne želite zanašati na omrežno povezavo, lahko prenesete JW Player in ga gostite na svojem strežniku.

  1. Pojdite na uradno spletno stran JW Player.

  2. Registrirajte se ali se prijavite v svoj račun(na voljo je brezplačna preizkusna različica).

  3. Poiščite in prenesite knjižnico z nadzorne plošče svojega računa.

  4. Razpakirajte datoteko in naložite mapo na strežnik.

Podroben vodnik za uporabo JW Playerja

Ko imate knjižnico, lahko začnete vdelovati JW Player na svoje spletno mesto.

1. Ustvarite datoteko HTML in vanjo vdelajte JW Player

Tukaj je celoten primer HTML. Če uporabljate CDN, zamenjajte <script src="...">vrstico z zgoraj omenjeno kodo CDN. Če uporabljate preneseno knjižnico, se prepričajte, da jwplayer.jsje pot do datoteke pravilna.

<!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. Podrobna razlaga kodeksa

  • <script src="...">Ta vrstica povezuje knjižnico JW Player z vašim spletnim mestom.

  • <div id="video-container"></div>: Tukaj bo prikazan videoposnetek. Lahko mu daste poljubno ime id, vendar se prepričajte, da se ujema z imenom, uporabljenim v jwplayer()funkciji.

  • jwplayer("video-container").setup({...}): Tukaj inicializirate in konfigurirate JW Player.

    • "file": Pot do vaše video datoteke.

    • "image": Pot do sličice videoposnetka.

    • "width"in "height": Nastavi dimenzije predvajalnika. Uporabite lahko tudi "100%"za odziven predvajalnik.

    • "autostart": Nastavite na, trueče želite, da se videoposnetek predvaja samodejno.

    • "controls": Nastavite na, falseče želite skriti krmilne elemente predvajalnika.

S tem podrobnim vodnikom lahko preprosto začnete uporabljati JW Player za prikazovanje videoposnetkov na svojem spletnem mestu.