close

Jak korzystać z JW Player: Osadzanie i konfiguracja filmów

Czym jest JW Player?

JW Player to potężne i elastyczne narzędzie do odtwarzania filmów na Twojej stronie internetowej. Ten przewodnik zawiera szczegółowy opis jego obsługi, w tym informacje o tym, jak uzyskać bibliotekę za pomocą CDN lub pobrać ją.

Jak uzyskać bibliotekę JW Player

Istnieją dwie możliwości pobrania biblioteki JW Player: za pomocą CDN lub pobranie jej na hosting lokalny.

1. Korzystanie z CDN(zalecane)

Korzystanie z CDN(Content Delivery Network) to najprostszy i najszybszy sposób integracji JW Player. CDN przyspiesza ładowanie plików, ponieważ są one hostowane na wielu serwerach na całym świecie.

Aby skorzystać z CDN, wystarczy dodać poniższy wiersz kodu do <head>sekcji swojej witryny. Uwaga: należy go zastąpić <YOUR_LICENSE_KEY>aktualnym kluczem licencyjnym.

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

2. Pobieranie i hostowanie lokalne

Jeśli chcesz mieć pełną kontrolę nad plikami i nie chcesz polegać na połączeniu sieciowym, możesz pobrać JW Player i umieścić go na własnym serwerze.

  1. Przejdź na oficjalną stronę JW Player.

  2. Zarejestruj się lub zaloguj na swoje konto(dostępny jest bezpłatny okres próbny).

  3. Znajdź i pobierz bibliotekę na pulpicie swojego konta.

  4. Rozpakuj plik i prześlij folder na swój serwer.

Szczegółowy przewodnik korzystania z JW Player

Gdy już będziesz mieć bibliotekę, możesz rozpocząć osadzanie JW Playera na swojej stronie internetowej.

1. Utwórz plik HTML i osadź JW Player

Oto kompletny przykład HTML. Jeśli korzystasz z CDN, zastąp ten <script src="...">wiersz kodem CDN wymienionym powyżej. Jeśli korzystasz z pobranej biblioteki, upewnij się, że ścieżka do jwplayer.jspliku jest poprawna.

<!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. Szczegółowe wyjaśnienie Kodeksu

  • <script src="...">:Ten wiersz łączy bibliotekę JW Player z Twoją witryną.

  • <div id="video-container"></div>: Tutaj będzie wyświetlany film. Możesz nadać mu dowolną idnazwę, ale upewnij się, że pasuje do nazwy użytej w jwplayer()funkcji.

  • jwplayer("video-container").setup({...}):W tym miejscu inicjujesz i konfigurujesz JW Player.

    • "file":Ścieżka do pliku wideo.

    • "image":Ścieżka do miniaturki wideo.

    • "width"i "height": Ustawia wymiary odtwarzacza. Można go również użyć "100%"w przypadku odtwarzacza responsywnego.

    • "autostart": Ustaw, truejeśli chcesz, aby wideo odtwarzało się automatycznie.

    • "controls": Ustaw, falsejeśli chcesz ukryć elementy sterujące odtwarzacza.

Dzięki temu szczegółowemu przewodnikowi możesz łatwo rozpocząć korzystanie z JW Playera do wyświetlania filmów na swojej stronie internetowej.