Web Design Blog / Multimedia:

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 poprostu kliknąć na link a przeglądarka sama odtworzy odpowiedni plik.

Multimedia player

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.

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.

Odtwarzacz filmów z playlistą w HTML5
4.6 (91.05%) głosów: 38

Autor: (29 lat)

Służę pomocą w razie wykonania / odnowienia strony lub sklepu internetowego dla twojej firmy niezależnie od twojej lokalizacji czy skali przedsięwziecia.

Tego typu wpisy piszę w wolnych chwilach lub pomiędzy projektami. Tylko pomyśl co mogę dla Ciebie zrobić w ramach usługi :-)

Zadaj pytanie lub skomentuj

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

Komentarze publiczne

Łukasz Karpowicz

10 września 2018

Witam, niestety u mnie ten odtwarzacz nie chce działać. Próbowałem podpiąć go na stronę, którą prowadzę charytatywnie dla osób niewidomych oraz słabowidzących. http://www.blindiphone.pl/player/player.html O to link do odtwarzacza. Nie wiem, co robię nie tak. Jak by ktoś chciał pomóc, to byłbym wdzięczny. Pozdrawiam.

Paweł Mansfeld

10 września 2018

Sprawdziłem Pana kod. Skrypt wymaga biblioteki jQuery. Dlatego przed skryptem odtwarzacza trzeba go dołączyć:

<script src="https://mansfeld.pl/praca-inzynierska/wordpress/wp-content/themes/rwd/js/jquery-1.11.1.min.js"></script>
<script src="https://mansfeld.pl/praca-inzynierska/wordpress/wp-content/themes/rwd/js/rwdplayer.js"></script>

Oczywiście można skopiować sobie skrypt lokalnie. No i trzeba dodać "pusty" odtwarzacz z identyfikatorem "player" u Pana jest inne id:

<video src="" id="player" controls preload></video>

Przesłałem na e-maila link do działającej wersji. Pozdrawiam.

Otrzymuj powiadomienie o nowych artykułach

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

*Bez obaw, nie udostępniam nikomu twojego adresu e-mail