JW Player 5 dla Flash & HTML5

Autor: Marzena Fąfara / kategoria: Video

0

jwplayerOsadzanie wideo na stronie www to już nie nowość.

Najprościej i najszybciej jest oczywiście z filmami YouTube – wystarczy skopiować kod ze strony i po sprawie. Jeżeli jednak mamy materiał filmowy na własnym serwerze to już trzeba większej gimnastyki. Ze wszystkich znanych mi dobrze playerów najlepiej radzi sobie JW Player, który automatycznie przełącza się w tryb HTML5 dla nie-flash’owych przeglądarek (iPad, iPhone, itp.) i odwrotnie. Domyślnie pracuje w trybie Flash, ale konfiguracyjnie można mu zmienić domyślne ustawienia.

Poza tym jako jeden z nielicznych darmowych odtwarzaczy poradzi sobie z transmisją live opartą na protokole HLS (Apple HTTP Live Streaming), czyli poradzi sobie z technologią wspierającą bitrate adaptatywny.

Podstawowe tryby pracy playera to:

  • tryb Flash z możliwością przełączenia w tryb HTML5 dla przeglądarek nie obsługujących technologii Flash (ustawiony domyślnie)
  • tryb HTML5 z możliwością przełączenia w tryb Flash dla przeglądarek nie obsługujących technologii HTML5
  • tylko Flash
  • tylko HTML5
  • jeżeli nie ma wsparcia ani dla Flasha ani HTML5 włącza się automatycznie pobieranie pliku

Jeśli chodzi o formaty wideo/audio to wszystkie wspierane podane są w poniższej tabeli:

Flash Wideo: H.264 (.mp4, .mov, .f4v), FLV (.flv), 3GPP (.3gp, .3g2), YouTube
Audio: AAC (.aac, .m4a), MP3 (.mp3)
Grafika: JPEG (.jpg), PNG (.png), GIF (.gif)
HTML5 Wideo*: H.264 / MP4 (.mp4), VP8 / WebM (.webm), Ogg Theora (.ogv)
Audio*: AAC (.aac, .m4a), MP3 (.mp3), Ogg Vorbis (.ogg)
* w zależności od przeglądarki
Playlisty XML tylko Flash: ASX, ATOM, iRSS, XSPF, SMIL
HTML5 & Flash: mRSS

Dobrze, w takim razie w jaki sposób osadzić odtwarzacz an stronie www?

Po pierwsze należy ściągnąć paczkę z playerem – plik, który będzie istotny dla wszystkich metod osadzania odtwarzacza na stronie to player.swf. Pliki z wideo oraz związane z nimi playlisty mogą być umieszczone na dowolnym serwerze, w dowolnej domenie. Pamiętać należy tylko o tzw. Crossdomain Security Restrictions – zabezpieczenie, które nie pozwala ładować plików z innej domeny niż tej, w której umieszczony jest player. Możemy się spotkać z błędem typu: crossdomain access denied.. Chodzi głównie o ładowanie plików z playlistą – domyślnie nie zadziała, więc trzeba w takim wypadku umieścić na serwerze plik crossdomain.xml, w którym zawieramy odpowiednie dyrektywy (ale o tym to już w innym artykule..).

HTTP Live Streaming z JWPlayer

W tym przykładzie skonfigurujemy playera w taki sposób, aby możliwe było odtwarzanie streamingu na żywo. Pierwszy i polecany sposób osadzenia playera na stronie to wykorzystanie skryptu jwplayer.js. Od wersji 5.3 JWPlayer dysponuje własnym, wbudowanym rozwiązaniem, które pozwala na bezproblemowe przełączanie między trybem Flash i HTML5. Osadzanie playera dla tej metody jest bardzo proste i wygląda następująco:

1. Wgrywamy na serwer WWW pliki jwplayer.js, qualitymonitor.swf, adaptiveProvider.swf oraz player.swf (np. do katalogu jwplayer). Opcjonalnie można dołączyć własną grafikę, która będzie załadowywana przed startem wideo oraz dowolną skórkę, którą wybierzemy tutaj.
2. Na stronie pomiędzy tagami <head></head> umieszczamy referencję do pliku jwplayer.js

3. Umieszczamy poniższy kod w dowolnym miejscu swojej strony:

<div id="player">potrzebujesz wtyczki flash, aby odtworzyć to wideo</div>

W momencie ładowania strony JWPlayer jest automatycznie osadzany w warstwie <div>. Domyślnie wideo jest odtwarzane we Flashu, jeśli jednak przeglądarka nie wspiera tej technologii (iPad, iPhone,..) wtedy następuje automatyczne przełączenie w tryb HTML5. W powyższym przykładzie kontenerem dla naszego playera może być element <video> lub <div>, <p>, itp. Jeżeli mamy do czynienia z elementem <video>, atrybuty dla tego tagu są automatycznie ładowane do naszego playera.

Tak więc po kolei prześledźmy zmienne konfiguracyjne:

file – określa ścieżkę do pliku manifestu dla naszej transmisji, w przypadku pliku wideo (np. mp4, flv) będzie to ścieżka do pliku
image – plansza z grafiką, która będzie wyświetlana przed odtwarzaniem wideo
flashplayer – wskazuje miejsce gdzie został wgrany plik player.swf
width oraz height – oznaczają odpowiednio szerokość i wysokość okna odtwarzacza
plugins – w tym konkretnym przypadku dodajemy nakładkę flashową, która pozkazuje dostępne pasmo, aktualny bitrate i rodzielczość wideo, liczbę upuszczonych klatek oraz szerokość odtwarzacza
provider - zmienna ta jest informacją dla playera w jakim trybie ma pracować np. video, sound, image, youtube, http, rtmp. Możliwe jest także załadowanie zewnętrznej wtyczki w postaci pliku swf – tak jak to jest w naszym przypadku
skin – ścieżka do katalogu zawierającego aktualną skórkę dla odtwarzacza
autostart – jeżeli wideo ma być automatycznie odtwarzane ustawiamy wartość true

A tak będzie wyglądać końcowy efekt:

potrzebujesz wtyczki flash, aby odtworzyć to wideo



Dodaj komentarz

Przeczytaj poprzedni wpis:
Gradient liniowy dla Opery

W poprzednim poście pokazałam w jaki sposób można stworzyć tło gradientowe poprawnie wyświetlane w przeglądarkach Mozilli, Chrome czy IE. Odkąd...

Zamknij