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.
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.
Łukasz Karpowicz pisze: 
Odpowiedz lub skomentuj