whycomputer.com >> Wiedza o Internecie >  >> Media cyfrowe

Jak odtwarzać filmy z YouTube przy użyciu JW Player

Wymagania

Aby umożliwić odwiedzającym odtwarzanie filmów z YouTube na Twojej stronie, potrzebujesz odtwarzacza multimedialnego, który obsługuje zarówno HTML5, jak i Flash. JW Player spełnia te wymagania, działa w najpopularniejszych przeglądarkach oraz na urządzeniach mobilnych.

Krok 1 – Przeniesienie plików JW Player

Pobierz pliki JW Player ze strony producenta i prześlij je na swój serwer. Najlepiej umieścić je w osobnym katalogu, np. Scripts.

Krok 2 – Dodanie skryptu JavaScript

Otwórz stronę HTML, w której chcesz umieścić odtwarzacz (np. w Notatniku). W sekcji <head> … </head> wstaw następujący kod, zamieniając Scripts na nazwę folderu, w którym zapisałeś pliki:

<script type="text/javascript" src="/Scripts/jwplayer.js"></script>

Jeśli posiadasz wersję Pro, Premium lub Ads, podaj klucz licencyjny:

<script type="text/javascript">jwplayer.key = "Twoj_Klucz_JW_Player";</script>

Krok 3 – Miejsce wyświetlania odtwarzacza

W sekcji <body> … </body> wstaw znacznik div, który będzie kontenerem odtwarzacza. Użyj unikalnego identyfikatora, np. myJWPlayer:

<div id="myJWPlayer">Ładowanie odtwarzacza...</div>

Krok 4 – Konfiguracja odtwarzacza

Bezpośrednio pod powyższym div dodaj skrypt inicjujący odtwarzacz i określający jego parametry:

<script type="text/javascript">
    jwplayer("myJWPlayer").setup({
        file: "YouTube_URL",
        width: Y,
        height: X,
        image: "/uploads/cover.jpg"
    });
</script>

Zastąp:

  • YouTube_URL – pełnym adresem URL wybranego filmu z YouTube,
  • X – żądaną wysokością w pikselach,
  • Y – żądaną szerokością w pikselach,
  • /uploads/cover.jpg – ścieżką do obrazu podglądu wyświetlanego przed odtworzeniem.

Krok 5 – Testowanie

Zapisz plik i otwórz go w przeglądarce. Kliknij przycisk „Play”, aby sprawdzić, czy film z YouTube odtwarza się poprawnie.

Porady

  • Do kodu odtwarzacza możesz dodać dodatkowe parametry, aby zmienić układ i funkcje (np. autoplay, loop, mute).
  • Wykorzystaj jedną z dostępnych ośmiu profesjonalnych skór PNG (link w sekcji Zasoby), aby odświeżyć wygląd odtwarzacza.

URL:https://pl.whycomputer.com/media/100319277.html

Media cyfrowe
  • Jak osadzić wideo z YouTube z automatycznym odtwarzaniem

    YouTube umożliwia udostępnianie filmów na własnych stronach, blogach i w mediach społecznościowych. Domyślnie osadzone wideo wymaga kliknięcia, aby rozpocząć odtwarzanie. Czasami jednak chcemy, aby film uruchamiał się automatycznie w momencie załadowania strony – np. ze względu na projekt witryny lu

  • Jak dodać odtwarzacz muzyki do Tumblr z opcją odtwarzania w tle

    Tumblr pozwala użytkownikom wyrażać siebie w kreatywny sposób, m.in. poprzez muzykę i inne klipy dźwiękowe. Aby osadzić odtwarzacz audio na blogu Tumblr, wystarczy wkleić odpowiedni kod w sekcję „Opis” (Description) na stronie personalizacji. Sekcja ta obsługuje HTML, CSS i inne elementy webowe i zw

  • Jak pobierać wideo strumieniowe przy użyciu odtwarzacza JW

    JW Player to odtwarzacz multimedialny działający w przeglądarce, wykorzystujący interfejs JavaScript API. Umożliwia m.in. tworzenie playlist, napisy i pobieranie wideo. Gdy dostępny, przycisk „Pobierz wideo” otwiera plik w nowej karcie, skąd można zapisać oryginalny plik MP4. Jak pobrać wideo z okna

Wiedza o Internecie © https://pl.whycomputer.com