Wideo HTML

Metody odtwarzania wideo w HTML są różnorodne.

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 rozwiązania

Odtwarzanie wideo w HTML nie jest łatwe!

Musisz znać wiele umiejętności, aby upewnić się, że plik wideo będzie odtwarzany we wszystkich przeglądarkach (Internet Explorer, Chrome, Firefox, Safari, Opera) i na wszystkich urządzeniach (PC, Mac, iPad, iPhone).

W tej rozdziale, CodeW3C.com podsumowuje problemy i metody rozwiązania.

Używaj etykiety <embed>.

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

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

Przykład

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

Spróbuj sam

Problem

  • HTML4 nie rozpoznaje etykiety <embed>. Twoja strona nie przeszła weryfikacji.
  • Jeśli przeglądarka nie obsługuje Flash, wideo nie zostanie odtworzone.
  • iPad i iPhone nie mogą wyświetlać wideo Flash.
  • Jeśli转换视频格式，它仍然不能在所有浏览器中播放。

Używaj etykiety <object>.

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

Poniższy fragment HTML pokazuje wstawienie segmentu 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 zostanie odtworzone.
  • iPad i iPhone nie mogą wyświetlać wideo Flash.
  • Jeśli转换视频格式，它仍然不能在所有浏览器中播放。

Używaj etykiety <video>.

Tag <video> to nowa etykieta w 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 wstawione do strony internetowej:

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 do wielu różnych formatów.
  • Element <video> jest niewłaściwy w przestarzałych przeglądarkach.
  • Element <video> nie jest walidowany w 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 będzie próbował odtworzyć wideo w formacie mp4, ogg lub webm. Jeśli wszystkie te próby się nie powiedzą, element <embed> będzie użyty jako fallback.

Problem

  • Musisz przekształcić wideo do wielu różnych formatów
  • Element <video> nie jest walidowany w HTML 4 i XHTML.
  • Element <embed> nie jest walidowany w HTML 4 i XHTML.

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

Rozwiązanie Youku

Najprostszym sposobem wyświetlenia wideo w HTML jest użycie platformy wideo, takiej jak Youku.

Jeśli chcesz odtworzyć wideo na stronie internetowej, możesz wgrać wideo na platformę wideo, taką jak Youku, a następnie wstawić kod HTML na swojej stronie internetowej, 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 hiperłączy

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", na przykład 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 planujesz używać wstawionego wideo w aplikacji webowej, musisz być świadomy, że wielu ludzi uważa wstawione wideo za irytujące.

Należy również zauważyć, że użytkownik może już wyłączyć opcję wstawionego wideo w przeglądarce.

Naszym najlepszym zaleceniem jest umieszczanie ich tylko tam, gdzie użytkownik chce zobaczyć wstawiony wideo. Przykładem jest sytuacja, gdy użytkownik musi zobaczyć wideo i kliknąć link, który otwiera stronę i odtwarza wideo.

Tagi multimedialne HTML 4.01

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

Tagi multimedialne HTML 5

Tag Opis
<video> Tag definiuje dźwięk, na przykład muzykę lub inny strumień audio.
<embed> Tagi definiują zawartość wstawioną, na przykład wtyczki.