Wideo HTML

W HTML jest wiele sposobów odtwarzania 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 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 tym rozdziale CodeW3C.com podsumowuje problemy i metody ich rozwiązania.

Używanie etykiety <embed>

Etykieta <embed> służy do wplecenia elementów multimedialnych w stronę HTML.

Poniższy kod HTML pokazuje wideo Flash wplecione w stronę internetową:

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 będzie można odtworzyć
  • iPad i iPhone nie mogą wyświetlać wideo Flash.
  • Jeśli转换视频为其他格式，它仍然不能在所有浏览器中播放。

Używanie etykiety <object>

Etykieta <object> służy do wplecenia elementów multimedialnych w stronę HTML.

Poniższy fragment HTML pokazuje wideo Flash wplecione w stronę internetową:

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转换视频为其他格式，它仍然不能在所有浏览器中播放。

Używanie tagu <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 na wiele różnych formatów.
  • Element <video> jest niewłaściwy w starszych przeglądarkach.
  • Element <video> nie przechodzi weryfikacji 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 weryfikacji HTML 4 i XHTML.
  • Element <embed> nie przechodzi weryfikacji 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 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ła "programów pomocniczych" do odtwarzania plików.

Poniższy fragment kodu 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

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

Proszę również zauważyć, ż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ładem pozytywnym 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, np. muzykę lub inny strumień audio.
<embed> Tagi definiują zawartość wstawioną, np. wtyczki.