Wideo HTML

W HTML jest wiele sposobów na odtwarzanie wideo.

Przykład

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Spróbuj sam

Problemy, problemy oraz metody ich rozwiązania

Odtwarzanie wideo w HTML nie jest łatwe!

Musisz znać wiele technik, aby upewnić się, że Twoje pliki wideo będą odtwarzane we wszystkich przeglądarkach (Internet Explorer, Chrome, Firefox, Safari, Opera) i na wszystkich urządzeniach (PC, Mac, iPad, iPhone).

W tej kapitule CodeW3C.com podsumowuje problemy i metody ich rozwiązania.

Użycie tagu <embed>

Tag <embed> ma na celu wstawienie elementów multimedialnych do strony HTML.

Poniższy kod HTML pokazuje wstawienie wideo Flash do strony internetowej:

Przykład

<embed src="movie.swf" height="200" width="200"/>

Spróbuj sam

Problem

  • HTML4 nie rozpoznaje tagu <embed>. Twoja strona nie przeszła weryfikacji.
  • Jeśli przeglądarka nie obsługuje Flash, wideo nie będzie można odtworzyć
  • iPad i iPhone nie mogą wyświetlać wideo Flash.
  • Jeśli przekonwertujesz wideo na inny format, nadal nie będzie można go odtworzyć we wszystkich przeglądarkach.

Użycie tagu <object>

Tag <object> ma na celu wstawienie elementów multimedialnych do strony HTML.

Poniższy fragment HTML pokazuje wstawienie wideo Flash do strony internetowej:

Przykład

<object data="movie.swf" height="200" width="200"/>

Spróbuj sam

Problem

  • Jeśli przeglądarka nie obsługuje Flash, wideo nie będzie można odtworzyć.
  • iPad i iPhone nie mogą wyświetlać wideo Flash.
  • Jeśli przekonwertujesz wideo na inny format, nadal nie będzie można go odtworzyć we wszystkich przeglądarkach.

Użycie tagu <video>

Tag <video> to nowej funkcji HTML 5.

Tag <video> służy do wstawiania elementów wideo na stronę HTML.

Poniższy fragment HTML wyświetli wideo w formacie ogg, mp4 lub webm wplecione w stronę internetową:

Przykład

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Twoja przeglądarka nie obsługuje tagu wideo.
</video>

Spróbuj sam

Problem

  • Musisz przekształcić wideo na wiele różnych formatów.
  • Element <video> jest niewłaściwy w przestarzałych przeglądarkach.
  • Element <video> nie przechodzi walidacji HTML 4 i XHTML.

Najlepsze rozwiązanie HTML

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Spróbuj sam

W przykładzie użyto 4 różnych formatów wideo. Element <video> HTML 5 próbuje odtworzyć wideo w formacie mp4, ogg lub webm. Jeśli wszystkie te próby się nie powiedzie, wraca do elementu <embed>.

Problem

  • Musisz przekształcić wideo na wiele różnych formatów
  • Element <video> nie przechodzi walidacji HTML 4 i XHTML.
  • Element <embed> nie przechodzi walidacji HTML 4 i XHTML.

Uwaga:Rozwiąż problem weryfikacji za pomocą <!DOCTYPE html> (HTML5).

Rozwiązanie Youku

Najprostszym sposobem wyświetlenia wideo w HTML jest użycie stron takich jak Youku.

Jeśli chcesz odtworzyć wideo na stronie internetowej, możesz wgrać wideo na stronę taką jak Youku, a następnie wstawić kod HTML, aby odtworzyć wideo:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

Spróbuj sam

Używanie linków

Jeśli strona internetowa zawiera linki do plików multimedialnych, większość przeglądarek będzie używać "programów pomocniczych" do odtwarzania plików.

Poniższy kod fragment pokazuje link do pliku AVI. Jeśli użytkownik kliknie na link, przeglądarka uruchomi "program pomocniczy", np. Windows Media Player, aby odtworzyć ten plik AVI:

Przykład

<a href="movie.swf">Odtwórz plik wideo</a>

Spróbuj sam

Komentarz o wstawionym wideo

Kiedy wideo jest zawarte w stronie internetowej, nazywa się to wstawionym wideo.

Jeśli zamierzasz używać wstawionego wideo w aplikacji webowej, musisz być świadomy, że wielu ludzi uważa wstawione wideo za irytujące.

Również prosimy o uwagę, że użytkownik może już wyłączyć opcję wstawionego wideo w przeglądarce.

Naszym najlepszym radą jest umieszczanie ich tylko tam, gdzie użytkownik chce zobaczyć wstawiony wideo. Przykład pozytywny: jeśli użytkownik musi zobaczyć wideo i kliknąć link, strona się otworzy i wideo zostanie odtworzone.

Etiqueta multimedialna HTML 4.01

Etiqueta Opis
<applet> Nie zalecane.Definiuje wstawiony applet.
<embed> Nie zalecane.Definiuje wstawiony obiekt. (Dozwolone w HTML5)
<object> Definiuje wstawiony obiekt.
<param> Definiuje parametry obiektu.

Etiqueta multimedialna HTML 5

Etiqueta Opis
<video> Etiqueta definiuje dźwięk, np. muzykę lub inny strumień audio.
<embed> Etiqueta definiuje wstawiony treść, np. wtyczki.