Latest web development tutorials

HTML Vídeo (vídeos) Tocar

Há muitas maneiras de jogar o vídeo no método HTML.


HTML Vídeo (vídeos) Tocar

Exemplos

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

tente »


Problemas e soluções

Reproduzir vídeo em HTML não é fácil!

Você precisa de um monte de dicas familiares para garantir que o arquivo de vídeo em todos os navegadores (Internet Explorer, Chrome, Firefox, Safari, Opera), e todo o hardware (PC, Mac, iPad, iPhone) podem ser reproduzidos.

Neste capítulo, W3CSchool você resumir os problemas e soluções.


Usando a tag <embed>

tag papel <embed> é incorporar elementos multimídia em páginas HTML.

O seguinte código HTML para exibir o Flash vídeo incorporado na página:

Exemplos

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

tente »

problema

  • O HTML4 não reconhecer o tag <embed>. Sua página não pode ser verificada.
  • Se seu navegador não suporta Flash, de modo que o vídeo não vai jogar
  • iPad e iPhone não pode exibir vídeos em Flash.
  • Se você converter vídeos para outros formatos, ainda não joga em todos os navegadores.

Usando a tag <object>

Papel <object> marca é incorporar elementos multimídia em páginas HTML.

O seguinte trecho de HTML mostra alguns vídeo em Flash incorporado na página:

Exemplos

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

tente »

problema:

  • Se seu navegador não suporta Flash, o vídeo não vai jogar.
  • iPad e iPhone não pode exibir vídeos em Flash.
  • Se você converter vídeos para outros formatos, ainda não joga em todos os navegadores.

Usando o elemento <video> HTML5

HTML5 <video> tag define um vídeo ou filme.

<Video> elemento em todos os navegadores modernos são suportados.

O seguinte fragmento de HTML irá exibir uma ogg, mp4, ou o formato WebM vídeo página da Web incorporado:

Exemplos

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

tente »

problema:

  • Você precisa converter o vídeo em muitos formatos diferentes.
  • <Video> elemento não é válido em navegadores mais antigos.

Melhor Solução de HTML

O exemplo a seguir usa quatro diferentes formatos de vídeo. HTML 5 <video> elemento tenta jogar mp4, ogg, ou formatos WebM é para reproduzir o vídeo. Se tudo falhar, então cair de volta ao elemento <embed>.

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>

tente »

problema:

  • Você deve converter muitos formatos de vídeo diferentes

Soluções Youku

A maneira mais fácil para exibir vídeos em HTML é usar Youku e outros sites de vídeo.

Se você quiser jogar o vídeo em uma página da web, você pode enviar um vídeo para Youku e outros sites de vídeo, e em seguida, insira o código HTML para reproduzir o vídeo em sua página:

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

usando hiperlinks

Se a página contém um link apontando para arquivos de mídia, a maioria dos navegadores irá usar "aplicação auxiliar" para reproduzir o arquivo.

O fragmento de código a seguir mostra links para arquivo AVI. Se o usuário clica no link, o navegador irá iniciar as "aplicações de ajuda", como o Windows Media Player para reproduzir o arquivo AVI:

Exemplos

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

tente »


Na descrição do vídeo em linha

Quando um vídeo está incluído na página da web, ele é chamado de vídeo embutido.

Se você pretende usar o vídeo embutido em uma aplicação web, você precisa perceber que muitas pessoas acham vídeos inline irritantes.

Observe também que os usuários podem ter fechado a sua opção de vídeo em linha browser.

Nosso melhor conselho é somente quando o usuário quer ver o vídeo local em linha contém-los. Um exemplo positivo é que, quando o usuário precisa ver o vídeo e clicar em um link irá abrir a página e reproduzir o vídeo.


tag HTML multimédia

Novo: HTML5 novas tags.

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