link.png Film na stronie www ← Powrót

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:

<iframe src="http://player.vimeo.com/video/36778012" width="625" height="351" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Przykład kodu z portalu YouTube:

<iframe width="625" height="351" src="http://www.youtube.com/embed/0VqTwnAuHws" frameborder="0" allowfullscreen></iframe>

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:

<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>

Aby przejść do przykładu kliknij w obrazek:

FLV Player - przykład

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:

<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>