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.
Odpowiedz lub skomentuj