close

Kako koristiti JW Player: Ugrađivanje i konfiguriranje videozapisa

Što je JW Player?

JW Player je moćan i fleksibilan alat za reprodukciju videa na vašoj web stranici. Ovaj vodič pružit će detaljan vodič o tome kako ga koristiti, uključujući kako nabaviti biblioteku pomoću CDN-a ili preuzimanjem.

Kako nabaviti JW Player biblioteku

Imate dvije mogućnosti za nabavu JW Player biblioteke: korištenje CDN-a ili preuzimanje za lokalni hosting.

1. Korištenje CDN-a(preporučeno)

Korištenje CDN-a(mreže za isporuku sadržaja) najjednostavniji je i najbrži način integracije JW Playera. CDN pomaže bržem učitavanju datoteka jer se nalaze na više poslužitelja diljem svijeta.

Za korištenje CDN-a, jednostavno dodajte sljedeći redak koda u <head>odjeljak svoje web stranice. Napomena: Morate ga zamijeniti <YOUR_LICENSE_KEY>stvarnim licencnim ključem.

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

2. Preuzimanje i lokalno hostiranje

Ako želite potpunu kontrolu nad datotekama i ne želite se oslanjati na mrežnu vezu, možete preuzeti JW Player i hostirati ga na vlastitom poslužitelju.

  1. Posjetite službenu web stranicu JW Playera.

  2. Registrirajte se ili prijavite na svoj račun(dostupna je besplatna probna verzija).

  3. Pronađite i preuzmite biblioteku s nadzorne ploče svog računa.

  4. Raspakirajte datoteku i prenesite mapu na svoj poslužitelj.

Detaljan vodič za korištenje JW Playera

Nakon što imate biblioteku, možete početi ugrađivati ​​JW Player na svoju web stranicu.

1. Izradite HTML datoteku i ugradite JW Player

Evo kompletnog HTML primjera. Ako koristite CDN, zamijenite <script src="...">redak s gore navedenim CDN kodom. Ako koristite preuzetu biblioteku, provjerite jwplayer.jsje li put do datoteke ispravan.

<!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. Detaljno objašnjenje Kodeksa

  • <script src="...">Ovaj redak povezuje biblioteku JW Playera s vašom web-stranicom.

  • <div id="video-container"></div>: Ovdje će se prikazati videozapis. Možete mu dati bilo koji idnaziv, ali provjerite odgovara li nazivu korištenom u jwplayer()funkciji.

  • jwplayer("video-container").setup({...})Ovdje inicijalizirate i konfigurirate JW Player.

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

    • "image"Put do minijature videozapisa.

    • "width"i "height": Postavlja dimenzije playera. Možete koristiti i "100%"za responzivni player.

    • "autostart": Postavite na trueako želite da se videozapis reproducira automatski.

    • "controls": Postavite na falseako želite sakriti kontrole playera.

Pomoću ovog detaljnog vodiča možete jednostavno početi koristiti JW Player za prikaz videa na svojoj web stranici.