close

Jak používat JW Player: Vkládání a konfigurace videí

Co je JW Player?

JW Player je výkonný a flexibilní nástroj pro přehrávání videí na vašem webu. Tato příručka vám poskytne podrobný návod, jak jej používat, včetně toho, jak získat knihovnu pomocí CDN nebo jejím stažením.

Jak získat knihovnu JW Player

Máte dvě možnosti, jak získat knihovnu JW Player: pomocí CDN nebo stažením pro lokální hosting.

1. Používání CDN(doporučeno)

Použití CDN(Content Delivery Network) je nejjednodušší a nejrychlejší způsob integrace JW Playeru. CDN pomáhá načítat soubory rychleji, protože jsou hostovány na více serverech po celém světě.

Chcete-li používat CDN, jednoduše přidejte následující řádek kódu do <head>sekce vašeho webu. Poznámka: Je nutné jej nahradit <YOUR_LICENSE_KEY>vaším skutečným licenčním klíčem.

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

2. Stahování a lokální hostování

Pokud chcete mít plnou kontrolu nad soubory a nechcete se spoléhat na síťové připojení, můžete si stáhnout JW Player a hostovat ho na svém vlastním serveru.

  1. Přejděte na oficiální webové stránky JW Playeru.

  2. Zaregistrujte se nebo se přihlaste ke svému účtu(k dispozici je bezplatná zkušební verze).

  3. Vyhledejte a stáhněte si knihovnu z řídicího panelu svého účtu.

  4. Rozbalte soubor a nahrajte složku na váš server.

Podrobný návod k používání JW Playeru

Jakmile budete mít knihovnu, můžete začít vkládat JW Player na svůj web.

1. Vytvořte soubor HTML a vložte do něj JW Player

Zde je kompletní příklad HTML. Pokud používáte CDN, nahraďte řádek <script src="...">výše uvedeným kódem CDN. Pokud používáte staženou knihovnu, ujistěte se, že jwplayer.jsje cesta k souboru správná.

<!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. Podrobné vysvětlení kódu

  • <script src="...">Tento řádek propojuje knihovnu JW Playeru s vaším webem.

  • <div id="video-container"></div>Zde se zobrazí video. Můžete mu dát libovolný idnázev, ale ujistěte se, že odpovídá názvu použitému ve jwplayer()funkci.

  • jwplayer("video-container").setup({...})Zde inicializujete a konfigurujete JW Player.

    • "file": Cesta k vašemu video souboru.

    • "image"Cesta k miniatuře videa.

    • "width"a "height": Nastavuje rozměry přehrávače. Můžete také použít "100%"pro responzivní přehrávač.

    • "autostart": Nastavte na, truepokud chcete, aby se video přehrávalo automaticky.

    • "controls": Nastavte na, falsepokud chcete skrýt ovládací prvky přehrávače.

S tímto podrobným návodem můžete snadno začít používat JW Player k zobrazování videí na vašem webu.