Latest web development tutorials

HTML Video (Wideo) Play

Istnieje wiele sposobów, aby odtworzyć film w metodzie HTML.


HTML Video (Wideo) Play

Przykłady

<video width="320" height="240" 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 »


Problemy i rozwiązania

Odtwórz wideo w formacie HTML nie jest łatwe!

wiele znanych wskazówek trzeba upewnić się, że plik wideo we wszystkich przeglądarkach (Internet Explorer, Chrome, Firefox, Safari, Opera), a cały sprzęt (PC, Mac, iPad, iPhone) mogą być odtwarzane.

W tym rozdziale W3CSchool podsumować problemy i rozwiązania.


Używając <embed> tag

Rola <embed> jest osadzenie elementów multimedialnych na stronach HTML.

Poniższy kod HTML do wyświetlania wideo Flash osadzonego na stronie:

Przykłady

<embed src="intro.swf" height="200" width="200">

Spróbuj »

problem

  • HTML4 nie rozpoznaje <embed> tag. Twoja strona nie może zostać zweryfikowana.
  • Jeśli Twoja przeglądarka nie obsługuje Flasha, aby film nie jest odtwarzany
  • iPad i iPhone nie może wyświetlić wideo Flash.
  • Jeśli konwersji plików wideo do innych formatów, to nadal nie gra we wszystkich przeglądarkach.

Użycie znacznika <object>

Rola <object> tag jest osadzenie elementów multimedialnych na stronach HTML.

Poniższy kod HTML pokazuje jakiś video Flash osadzonego na stronie:

Przykłady

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

Spróbuj »

problem:

  • Jeśli Twoja przeglądarka nie obsługuje Flasha, film nie jest odtwarzany.
  • iPad i iPhone nie może wyświetlić wideo Flash.
  • Jeśli konwersji plików wideo do innych formatów, to nadal nie gra we wszystkich przeglądarkach.

Korzystanie z HTML5 <video> elementu

HTML5 <video> tag definiuje wideo lub film.

<Video> elementem wszystkich nowoczesnych przeglądarkach są obsługiwane.

Poniższy fragment HTML wyświetli stronę WWW wbudowaną OGG, MP4, lub w formacie WebM wideo:

Przykłady

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
您的浏览器不支持 video 标签。
</video>

Spróbuj »

problem:

  • Trzeba konwertować wideo do różnych formatów.
  • <Video> element nie jest ważny w starszych przeglądarkach.

Najlepszy HTML Rozwiązanie

W poniższym przykładzie użyto czterech różnych formatów wideo. HTML 5 <video> Element próbuje odtwarzać mp4, ogg lub formatach WebM jest, aby odtworzyć film. Jeśli wszystko zawiedzie, po czym powróci do <embed> elementu.

HTML 5 + <object> + <embed>

<video width="320" height="240" 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 »

problem:

  • Musisz przekonwertować wiele różnych formatów wideo

Youku Solutions

Najprostszym sposobem, aby wyświetlić wideo w HTML jest użycie Youku i innych witryn wideo.

Jeśli chcesz odtworzyć film na stronie internetowej, można przesłać film do Youku i innych witryn wideo, a następnie wstawić kod HTML, aby odtworzyć film na swojej stronie:

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

Używanie hiperłączy

Jeśli strona zawiera hiperłącze wskazujące na pliki multimedialne, większość przeglądarek użyje "aplikacji pomocnika", aby go odtworzyć.

Poniższy fragment kodu pokazuje linki do pliku AVI. Jeśli użytkownik kliknie na link, przeglądarka zacznie się "Helper Applications", takich jak Windows Media Player do odtwarzania plików AVI:

Przykłady

<a href="intro.swf">Play a video file</a>

Spróbuj »


Na rolkach opisie filmu

Gdy film jest zawarte na stronie internetowej, jest on nazywany inline wideo.

Jeśli masz zamiar użyć inline wideo w aplikacji internetowej, trzeba zdać sobie sprawę, że wiele osób uważa inline filmy denerwujące.

Należy również pamiętać, że użytkownicy mogą mieć opcję wideo inline przeglądarka zamknięte.

Nasza najlepsza rada jest tylko wtedy, gdy użytkownik chce zobaczyć film miejscem inline je zawiera. Pozytywnym przykładem jest to, że gdy użytkownik musi zobaczyć film i kliknij w link otworzy stronę i odtworzyć film.


HTML tag multimedialny

Nowość: HTML5 nowe tagi.

标签 描述
<embed> 定义内嵌对象。HTML4 中不赞成,HTML5 中允许。
<object> 定义内嵌对象。
<param> 定义对象的参数。
<audio> New 定义了声音内容
<video> New 定义一个视频或者影片
<source> New 定义了media元素的多媒体资源(<video> 和 <audio>)
<track> New 规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)