Odtwarzacz filmów z playlistą w HTML5

Częstą potrzebą wydawców stron jest umieszczenie zbioru filmików lub nagrań audio na jednej z podstron w formie jaką znamy z odtwarzaczy multimedialnych z jakich korzystamy na komputerach klasy PC i smartfonach. Mówię tu o takim rozwiązaniu w którym mamy do dyspozycji przycisk Play/Pauza, przewijanie, przechodzenie do następnych plików etc.

Jak na razie, takiej wtyczki jeszcze nigdzie nie znalazłem, dlatego w tym artykule znajdziecie moje rozwiązanie oraz skromny tutorial o tym jak napisać taki odtwarzacz multimediów z playlistą, który będzie można zastosować na dowolnej stronie internetowej.

To co powinno zachęcić do skorzystania z zaproponowanego przeze mnie rozwiązania jest po pierwsze jego bezczelnie prosty sposób działania i równie banalne podejście do realizacji funkcjonalności wspomnianej playlisty czy jak kto woli: listy odtwarzania. Równie łatwe powinno być także samo jego napisane czy dostosowanie go do naszych własnych potrzeb. To samo tyczy się jego wdrożenia, która będzie polegać uwaga uwaga: na dodaniu gotowego skryptu .js. Dla zrozumienia sposobu działania odtwarzacza multimedialnego wystarczy naprawdę podstawowe zaznajomienie się z HTML5, JavaScript i paroma elementami jQuery.

Zasada działania

W moim rozwiązaniu proponuję skrypt, który bierze pod uwagę wszystkie pliki multimedialne umieszczone na stronie w taki oto sposób:

<ol>
   <li><a href="Liscie.mp4">Liście</a></li>
   <li><a href="Klif.mp4">Klif</a></li>
   <li><a href="ZachodSlonca.mp4">ZachodSlonca</a></li>
</ol>

Tak, to nic innego jak linki do plików w liście uporządkowanej. Jaką to może mieć zaletę? A no taką, że wtyczka będzie łatwa w użyciu niezależnie w jakim CMSie będziemy jej używać. Wstawiamy pliki za pomocą biblioteki wewnątrz znaczników <li> </li> i nie przejmujemy się absolutnie niczym. Drugą istotną zaletą jest fakt, że zapewniamy w ten sposób dostępu do treści multimedialnych użytkownikom, których przeglądarka nie wspiera odtwarzania bezpośrednio na stronie, lub mają wyłączoną obsługę JavaScript. Aby z tej opcji skorzystać wystarczy wybrać opcję „zapisz link jako…” z menu kontekstowego lub po prostu kliknąć na link a przeglądarka sama odtworzy odpowiedni plik.

Przełączenie filmów w zaprojektowanej aplikacji jest możliwe dzięki przyciskom „wstecz” i „dalej”. Są one umieszczone blisko siebie i przeznaczone dla tych użytkowników, którzy korzystają z myszy komputerowej. Aby umożliwić wygodną nawigację użytkownikom smartfonów i tabletów, do której są przyzwyczajeni z interfejsu Androida lub iOS – obsłużono zdarzenie swipe, czyli przeciągnięcia palcem po ekranie, które będą powodować przewijanie o 15 sekund aktualny czas odtwarzania.

Kod JavaScript / jQuery

Skrypt na początku zlicza wszystkie multimedia jakie znajdują się w liście odtwarzania. Jeżeli na liście miałby się znajdować tylko jeden element, część interfejsu zostaje ukryta:

var mm = '.playlist li a';
var vids = $(mm).length;

if (vids==1) {
   $('.seek, .playlist').hide();
}

Funkcja odpowiedzialna za odtwarzanie i zatrzymywanie multimediów jest wywoływana przy kliknięciu w pole odtwarzacza, a także przy kliknięciu w przycisk „Play / Pauza”, oraz po kliknięciu w tytuł pliku, znajdujący się na liście odtwarzania:

function playpause(){ 
   var video = document.getElementById('player'); 
   if (video.paused) {
      video.play();
   } 
   else {
      video.pause();
   } 
}

Funkcje odpowiedzialne za przeskakiwanie do oddalonych o 15 sekund momentów, przypięto do przycisków oraz do zdarzenia przeciągnięcia po ekranie:

function backward(){ 
   var video = document.getElementById('player); 
   video.currentTime -= 15; 
} 
function forward(){ 
   var video = document.getElementById('player'); 
   video.currentTime += 15; 
}

Poruszanie się po liście odtwarzania zapewnia funkcja srcswap(). Jest ona wywoływana po kliknięciu w nazwę pliku, a także w momencie klikania na odpowiednich przyciskach. Dodatkowo, funkcja ta zaznacza zaznacza na zielono aktywny element znajdujący się na liście, za pomocą klasy play:

function srcswap(){ 
   $('#player').attr('src', $(mm).eq(v).attr('href')); 
   $(mm).eq(v).addClass('play'); playpause(); 
} 

$('.playlist li').click(function(e){ 
   e.preventDefault(); 
   $('.play').removeClass('play'); 
   var playpos = $(this); 
   v = playpos.index(); 
   srcswap(); 
});

W momencie wejścia na stronę ładujemy pierwszy plik jaki znajduje się na liście. Możemy ładnie zaznaczyć na liście aktualnie odtwarzany plik dodając klasę play do odnośnika z wyróżniającym go stylem. Podmieniamy pusty atrybut src znacznika video ścieżką prowadzącą do pierwszego filmiku:

firstvid = $(mm).eq(0);
firstvid.addClass('play');
$('#player').attr('src', firstvid.attr('href'));

A teraz najważniejsza część. Kliknięcie na dalej i wstecz wywołuje funkcję odpowiedzialną za wczytanie poprzedniego i następnego filmiku. Realizujemy to poprzez inkrementację lub dekrementację zmiennej v oraz wywołanie funkcji srcswap(). Podobna rzecz dzieje się po kliknięciu w odpowiedni element z listy:

$('.playnext').click(function(){
   $('.play').removeClass('play');
   if (v<vids-1)
      v++; 
   else 
      v=0;
   srcswap();
}); 

$('.playprev').click(function(){
   $('.play').removeClass('play');
   if (v!=0)
      v--; 
   else 
      v=vids-1;
   srcswap();
});

$('.playlist li').click(function(e){
   e.preventDefault();
   $('.play').removeClass('play');
   v = $(this).index();
   srcswap();
});

Wystarczy jeszcze podpiąć odpowiednie zdarzenia do wcześniej stworzonych funkcji. Zwróćcie uwagę na zdarzenia swipeleft i swiperight – będą one przewijać nagranie po przeciągnięciu palcem po ekranie tak jak ma to miejsce w przypadku przycisków:

$('.backward').click(backward);
$('.forward').click(forward);  
$('#player').on("swipeleft", forward);
$('#player').on("swiperight", backward);
$('#player').click(playpause);

Ostatnią rzeczą będzie obsługa przypadku w którym film dobiega końca i chcemy uruchomić następny. Wystarczy nasłuchiwać w którym momencie filmik się skończy i uruchomić funkcję playNext().

player.addEventListener('ended',playNext,false);
function playNext() {  
   $('.play').removeClass('play');
   if (v<vids-1)
      v++; 
   else 
      v=0;
   srcswap();
}

Dodatkowym atutem mogą być możliwość przełączenia widoku na tryb pełnego ekranu. Funkcjonalność tę zapewniamy za pomocą funkcji requestFullScreen():

$('.fullscreen').click(function(){
   if(video.requestFullScreen){
      video.requestFullScreen();
   } 
   else if(video.webkitRequestFullScreen){
      video.webkitRequestFullScreen();
   } 
   else if(video.mozRequestFullScreen){
      video.mozRequestFullScreen();
   }
});

Kod HTML

Pozostała nam jeszcze treść, czyli de facto pliki do odtwarzania. W poniższym listingu zamieszczam także „otoczenie” playlisty, które zawiera niezbędne elementy layoutu odtwarzacza oraz siatkę CSS omawianą w tym artykule: System siatek CSS.

<div class="row">
   <div class="col-8">
      <div id="video">
         <div class="entry-content">
            <h2 class="vid-title">Wideo</h2>
            <video src="" id="player" controls preload></video>
         </div>
      </div>
   </div>
   <div class="col-4 control">
      <h2>Opis</h2>
      <p class="vid-description">Brak opisu.</p>
      <h2>Nawigacja</h2>
      <button class="playpause">Play / Pauza</button>
      <button class="backward">-15 sek.</button>
      <button class="forward ">+15 sek.</button>
      <button class="playprev seek">Poprzedni</button>
      <button class="playnext seek">Nastepny</button>
      <h2>Opcje widoku</h2>
      <button class="full">Pełny widok</button>
      <button class="fullscreen">Pełny ekran</button>
   </div>
</div>
<div class="row playlist">
   <div class="col-8">
   <h2>Lista odtwarzania:</h2>
   <ol>
      <li><a href="Liscie.mp4" data-title="Liście" data-description="dodatkowy opis">Liście</a></li>
      <li><a href="Paproc.mp4" data-title="Paproć" data-description="dodatkowy opis">Paproc</a></li>
      <li><a href="Klif.mp4" data-title="Klif" data-description="dodatkowy opis">Klif</a></li>
      <li><a href="Fale.mp4" data-description="dodatkowy opis">Fale</a></li>
      <li><a href="Wisnia.mp4" data-description="dodatkowy opis">Wisnia</a></li>
      <li><a href="ZachodSlonca.mp4" data-title="Zachód Słońca" data-description="dodatkowy opis">ZachodSlonca</a></li>
   </ol>
   </div>
</div>

Efekt końcowy

W efekcie otrzymujemy odtwarzacz multimedialny zgodny z zasadami Responsive Web Design. Pełny kod źródłowy skryptu zapewniającego funkcję odtwarzania plików multimedialnych znajduje się pod tym linkiem: rwdplayer.js. W przykładowej stronie zamieszczono go w pliku /js/rwdplayer.js dlatego w kodzie strony na której ma ten kod funkcjonować, należy tylko umieścić odpowiednie odniesienie. A tutaj link do demonstracji na żywo.

Optymalizacja i formaty video

MP4 to nie jedyny format jaki można użyć w naszym odtwarzaczu. Jeżeli chcesz:

• profesjonalnie umieścić wideo, które hostujesz samodzielnie,
• użyć niestandardowej okładki,
• umieścić film w formie tła,
• lub zoptymalizować wideo pod SEO,
• przyspieszyć wczytywanie wideo na różnych urządzeniach i dopasować format do możliwości urządzenia,

Zapoznaj się z obszernym poradnikiem optymalizacja wideo dla stron WWW.

Podsumowanie

Dzięki przestrzeganiu standardów, użyciu popularnej biblioteki oraz stosowania zrozumiałego nazewnictwa znaczników, atrybutów i zmiennych – niniejsza wtyczka z łatwością może być rozwijana oraz przebudowywana przez webmasterów. Skrypt poszerza możliwości prezentacji multimediów w przykładowym serwisie internetowym. Dzięki prostym sposobom działania, można zastosować go na wielu stronach w postaci tzw. wtyczki, bez konieczności przebudowywania struktury HTML, co umożliwia umieszczanie ich w istniejących projektach oraz znacznie skraca czas i zmniejsza koszty projektowania nowych witryn internetowych.