Ajax: programowanie dla multimediów

Wraz z nadejściem epoki szybkiego dostępu do Internetu przekazy multimedialne zaczęły coraz częściej ubarwiać statyczną dotąd treść witryn sieciowych. Dziś potencjalny odbiorca naszej strony WWW nie zadowoli się już informacją tekstową, pozbawioną jakichkolwiek audiowizualnych dodatków. Aby sprawnie zarządzać tego typu materiałami, nie trzeba być ekspertem – wystarczy odpowiednio wykorzystać możliwości oferowane przez ogólnodostępne technologie. Połączenie PHP i Ajaksa pozwoli nam na stworzenie interfejsu obsługi wideo i pokazu slajdów, który swoją funkcjonalnością mile zaskoczy wszystkich odwiedzających naszą witrynę.

Gdyby zapytać internautów, która witryna kojarzy im się najbardziej z erą multimedialnej Web 2.0, z pewnością większość z nich odpowiedziałaby: YouTube. Ten serwis nie tylko doskonale wykorzystał nowe technologie, ale także zmienił sposób, w jaki dotychczas postrzegaliśmy media i nasz związek z nimi. Dziś „telewizyjny ekran” YouTube'a stał się dla wielu z nas źródłem wiadomości, które dopiero po pewnym czasie będą miały okazję trafić do „oficjalnego” obiegu. Możliwość dzielenia się użytkowników Internetu przekazem multimedialnym zmienia nieubłaganie świat – trudno więc pozostać jedynie biernym świadkiem tego procesu. W naszym artykule pokażemy, jak wykorzystać asynchroniczny JavaScript i XML (Ajax) dla zbudowania prostej aplikacji sieciowej, obsługującej przekaz wideo i pokaz slajdów. Bazą dla naszych skryptów będzie popularna biblioteka Prototype.js. Udostępnia ona programiście szereg przydatnych obiektów i funkcji, obsługiwanych poprawnie przez wszystkie najważniejsze przeglądarki, co znacznie upraszcza proces projektowania aplikacji sieciowych. Biblioteka udostępniona jest na stronie głównej projektu, wchodzi także w skład innych popularnych frameworków, takich jak na przykład Scriptaculous.

Wybór plików wideo

Zaczniemy od zaprojektowania strony, która będzie udostępniała użytkownikom listę filmów do wyboru. Dzięki wykorzystaniu Ajaksa odbiorcy będą mogli przechodzić od jednego przekazu wideo do drugiego bez konieczności przeładowywania treści strony:

<html>
<head>
<script src="prototype.js"></script>
</head>
<body>

<div id="movieHost">
</div>

<div id="movieList">
</div>

<script>
function setMovie( url )
{
$('movieHost').innerHTML = '';
var elEmbed = document.createElement( 'embed' );
elEmbed.src = url;
$('movieHost').appendChild( elEmbed );
}

new Ajax.Request( 'movies.xml', {
method: 'get',
onSuccess: function( transport ) {
var movieTags = transport.responseXML.getElementsByTagName( 'movie' );

$('movieList').innerHTML = '';

var bFirst = true;
for( var b = 0; b < movieTags.length; b++ ) {
var url = movieTags[b].getAttribute('url');
var title = movieTags[b].getAttribute('title');
if ( bFirst )
{
setMovie( url );
bFirst = false;
}
var html = '<a href="/javascript:void setMovie(\''+url+'\');">';
html += title+'</a><br/>';
$('movieList').innerHTML += html;
}
}
} );
</script>
</body>
</html>

Listing 1 – kod strony zawierającej listę mediów

W konstrukcji strony wykorzystaliśmy zalety biblioteki Prototype.js, aby umożliwić skryptowi pobieranie danych z pliku movies.xml, zawierającego podstawowe informacje dotyczące mediów – nazwę pliku i adres. Kiedy zostaną one przesłane, kod wyszuka wszystkie słowa kluczowe (tagi) filmów, korzystając z metody getElementsByTagName(). Następnie z treści każdego tagu zostanie wyodrębniony URL i tytuł materiału. W wypadku pierwszego filmu na liście skrypt od razu rozpocznie prezentację. Dla pozostałych materiałów zostanie utworzony odnośnik, który spełni rolę selektora elementu movieList. Za jego pomocą, wykorzystując funkcję setMovie(), uruchomimy odtwarzanie odpowiedniego pliku wideo. Poprzednia zawartość bloku movieHost zostanie wtedy usunięta i zastąpiona znacznikiem <embed>, zawierającym URL pliku zdefiniowanego w treści listy filmów.

Użycie znacznika <embed> jest najkrótszą drogą do umieszczenia wideo na stronie, może jednak wywoływać konflikty zgodności w wypadku niektórych przeglądarek. Jeżeli chcemy uniknąć tych problemów, powinniśmy użyć zarówno znacznika <object>, jak i <embed> lub zdać się całkowicie na pomoc technologii Flash.

Plik movies.xml, stanowiący źródło danych, jest w naszym przykładzie krótkim zbiorem odnośników do przykładowych filmów. Jego konstrukcja jest tak prosta, że nie wymaga dalszych wyjaśnień:

Listing 2 – kod w pliku movies.xml

Kiedy wpiszemy w oknie przeglądarki adres strony, ujrzymy widok podobny do przedstawionego na poniższej ilustracji. W górnej części ekranu znajdziemy okno odtwarzania filmów, a pod nim listę dostępnych plików wideo – kliknięcie któregokolwiek z jej elementów uruchomi pokaz.

Prosta strona z listą filmów.

Tak zaprojektowany system odtwarzania nie jest jednak z pewnością odpowiedni dla dużych zbiorów wideo. Umieszczenie wielu odnośników na liście znacznie ograniczyłoby bowiem jej czytelność W takim wypadku będziemy musieli skonstruować odpowiedni mechanizm wyszukiwawczy.

«poprzednia 1 2 3 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

skomentuj »

Komentarze

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.