Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Filmy - wideo

HTML5 również w przypadku publikacji filmów niezwykle upraszcza sprawy.

Osadzanie plików wideo

Do publikacji na swojej stronie plików wideo stosuj formaty .mp4, .ogv lub .webm. Podstawowy znacznik ma prostą konstrukcję:

<video src="ścieżka do pliku wideo">
	Twoja przeglądarka nie obsługuje znacznika video
</video>

Jak do tej pory bardzo proste. Opiszemy teraz kilka atrybutów tego znacznika:

  • width="" oraz height="" - rozmiary okienka w którym będzie pokazywany film, możemy pominąć te atrybuty zdając się na automatyczne działanie przeglądarki
  • controls="controls" - powoduje wyświetlenie paska postępu, przycisku odtwarzania oraz zmiany głośności,
  • autoplay="autoplay" - automatyczne uruchomienie odtwarzania po wejściu na stronę,
  • preload="preload" - odtwarzanie rozpocznie się dopiero po pobraniu całego pliku na komputer odwiedzającego stronę, dzięki temu można uniknąć problemów związanych z płynnością odtwarzania
  • loop="loop" - odtwarzanie w pętli - po zakończeniu ponowy start i tak "w kółko"

Jak widzimy, mamy prawie wszystko tak samo jak przy odtwarzaniu plików dźwiękowych, tylko zamiast audio mamy video. Podobnie, zaleca się przekonwertować plik na różne formaty i zastosować konstrukcję:

<video controls="controls">
	<source src="film.mp4" type="video/mp4" />
	<source src="film.ogv" type="video/ogg" />
	<source src="film.webm" type="video/webm" />
	Twoja przeglądarka nie obsługuje znacznika video
</video>

Oto efekt wstawienia powyższego kodu, film jest króciutki - to tylko test:

Ćwiczenie 2_3_4_1

Wykonaj stronę, na której umieścisz plik wideo stosując powyższy kod. Masz tutaj przygotowane testowe pliki wideo.

Najprostszy i najpewniejszy sposób osadzania filmów

Można po prostu wstawić odsyłacz (link) do pliku wideo i po kłopocie. Tyle, że tracimy wtedy kontrolę nad wyświetlaniem i odtwarzaniem, pozostawiając wszystko w "rękach" przeglądarki i systemu operacyjnego. Odpowiedni fragment kodu wygląda wtedy następująco: <a href="ścieżka do pliku wideo" target="_blank">opis</a>

Oto efekt zastosowania linku do pliku wideo:

Kliknij tutaj aby obejrzeć testowy film

Ćwiczenie 2_3_4_2

Wykonaj stronę, na której umieścisz link do pliku wideo stosując jeden z plików ściągniętych w poprzednim ćwiczeniu.

Praca domowa

Wykonaj ponownie ćwiczenia z zajęć. Możesz zastosować te same pliki, lub:

  1. "Nakręcić" swój własny krótki film i zapisać na dysku.
  2. Znaleźć w sieci i zainstalować odpowiednie konwertery np. darmowe Free WebM Video Converter, Miro Video Converter, Pazera OGV Converter.
  3. Skonwertować pliki do wymaganych formatów.
  4. Wykonać stronę zgodnie z poleceniem.

Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.