Umieszczenie filmu video na stronie internetowej wydaje się być dość skomplikowanym elementem. Jednak w praktyce, dzięki zastosowaniu nowych technologii, nie powinno zająć więcej niż kilka minut.
Oto trzy najprostsze sposoby umieszczenia odtwarzacza filmu na stronie www:
1. Wykorzystanie zewnętrznych portali
Portale takie jak YouTube czy Vimeo pozwalają na publikowanie filmów w Internecie. Interfejs użytkownika pozwala w nich na pobranie specjalnego kodu, który wystarczy umieścić na naszej stronie, aby móc odtwarzać wybrany film.
Plusami takiego rozwiązania są: wykorzystanie zewnętrznego hostingu, zaawansowane opcje odtwarzacza, automatyczna optymalizacja filmu do wyświetlania w witrynie www.
Natomiast do minusów należą: wyświetlanie reklam w trakcie odtwarzania, brak możliwości pełnego dostosowania styli wyświetlacza do strony, integracja naszego systemu z portalem np. gdybyśmy chcieli automatycznie umieszczać filmy przesłane przez użytkowników strony na portalu Vimeo czy YouTube jest znacznie trudniejsza niż w przypadku wykorzystania odtwarzacza flash czy HTML5 – jednak nie jest niemożliwa – oba z wymienionych portali przygotowały specjalne API dla developerów.
Przykład kodu z portalu Vimeo:
[html]<iframe src=”http://player.vimeo.com/video/36778012″ width=”625″ height=”351″ frameborder=”0″ webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
[/html]
Przykład kodu z portalu YouTube:
[html]<iframe width=”625″ height=”351″ src=”http://www.youtube.com/embed/0VqTwnAuHws” frameborder=”0″ allowfullscreen></iframe>
[/html]
2. Odtwarzacz Flash
Obecnie jest to jedno z popularniejszych rozwiązań. Od strony użytkownika wymaga zainstalowania wtyczki Flash pozwalającej na odtwarzanie filmów w przeglądarce – co jednak w przypadku zdecydowanej większości internautów nie stanowi większego problemu. Na stronie należy załączyć pliki odtwarzacza i skonfigurować odpowiednie opcje, a odtwarzany plik umieścić na serwerze w formacie możliwym do uruchomienia przez odtwarzacz – zwykle jest to FLV – zapewnia on też dobrą kompresję filmu, dzięki czemu nawet użytkownicy z wolniejszym łączem internetowym mogą oglądnąć płynnie film. Niestety większość dobrych flashpaleyr’ów jest płatna. Osobiście polecam jeden z darmowych – FLV Player – poniżej przykład jego implementacji:
[js]<object type=”application/x-shockwave-flash” data=”/samples/inne/player_flv_maxi.swf” width=”625″ height=”351″>
<param name=”movie” value=”/samples/inne/player_flv_maxi.swf” />
<param name=”allowFullScreen” value=”true” />
<param name=”FlashVars” value=”flv=/samples/inne/film.flv&showtime=1&width=625&height=351&margin=0&bgcolor1=ffffff&bgcolor2=ffffff&showstop=1&showvolume=1&showfullscreen=1″ />
</object>
[/js]
Aby przejść do przykładu kliknij w obrazek:
3. Odtwarzacz HTML5
Technologia HTML5 w połączeniu z podstawową znajomością języka JavaScript umożliwia samodzielne stworzenie odtwarzacza, który wyświetli film na stronie www. Niestety nie wszystkie przeglądarki potrafią odtworzyć film w zaimplementowanych formatach, stąd konieczność implementacji filmu w różnych wersjach tak, aby każda z przeglądarek mogła go uruchomić.
Jest to przyszłościowa technologia, co potwierdza fakt, że istnieje już wersja portalu YouTube oparta o technologię HTML5.
Przykład kodu do implementacji wyświetlacza w HTML5:
[js]<button onclick=”$(’#video').get(0).play();”>Start</button>
<button onclick=”$(’#video').get(0).pause();”>Pauza</button>
<button onclick=”$(’#video').get(0).load();”>Stop</button>
<br>
<video id=”video” width=”625″>
<source src=”/samples/inne/film.mp4″ type=”video/mp4″>
<source src=”/samples/inne/film.ogv” type=”video/ogg”>
<source src=”/samples/inne/film.webm” type=”video/webm”>
Twoja przeglądarka nie wspiera tagu video.
</video>
[/js]