Latest web development tutorials

HTML5 Vídeo (Video)

Muitos sites irá usar para vídeo. HTML5 fornece uma exibição de vídeo padrão.

Detectar o seu browser suporta vídeo HTML5:



Web site de vídeo

Até agora, ainda não existe uma norma destinada a exibição de vídeo na página.

Hoje, a maioria de vídeo através dos plug-ins (como Flash) a ser exibido. No entanto, nem todos os navegadores têm os mesmos plugins.

HTML5 especifica uma forma padrão para incluir vídeo através dos elementos de vídeo.


Suporte a navegadores

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9 +, Firefox, Opera, Chrome, Safari e apoio <video> elemento.

Nota: Internet Explorer 8 ou versões anteriores do IE não suportam o elemento <video>.


HTML5 (vídeo) - Como funciona

Para exibir vídeo em HTML5, tudo que você precisa é:

Exemplos

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

tente »

<Video> elemento fornece a reprodução, pausa e controles de volume para controlar o vídeo.

Ao mesmo tempo elemento <video> elemento também fornece atributos de altura e largura controlar as dimensões do vídeo. Se você definir a altura e largura do espaço de vídeo necessário será mantida quando a página é carregada. . Se você não definir essas propriedades, o navegador não sabe o tamanho do vídeo, o navegador que você não pode reservar um espaço específico quando carregado, a página será baseada na mudança de tamanho do vídeo original.

<Video> entre <video /> marca e conteúdo inserido não está disponível para apoiar os elementos de vídeo exibidas no navegador.

<Video> elemento suporta múltiplos elemento <source>. <Source> elementos podem conectar-se a arquivos de vídeo diferentes. O browser usará o primeiro formato reconhecido:


Formatos de vídeo e suporte ao navegador

Atual, <video> elemento suporta três formatos de vídeo: MP4, WebM, e Ogg:

navegador MP4 WebM Ogg
Internet Explorer SIM NO NO
cromo SIM SIM SIM
Firefox SIM SIM SIM
safári SIM NO NO
ópera SIM (do Opera 25 em diante) SIM SIM
  • MP4 = MPEG 4 arquivos com vídeo H.264 e codificação de áudio AAC
  • WebM = WebM arquivos com VP8 vídeo e Vorbis codificado codificação de áudio
  • Ogg = Ogg Theora com vídeo codificado e áudio Vorbis codificado

Formato de vídeo

格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg


HTML5 <video> - para controlar o uso do DOM

HTML5 <video> e <audio> elemento também tem métodos, propriedades e eventos.

Métodos <video> e <audio> elementos, propriedades e eventos pode ser controlado usando JavaScript.

Que métodos são utilizados para reproduzir, pausar e de carga e assim por diante. Em que as propriedades (tais como a duração, o volume, etc.) pode ser lido ou definido. Em que evento DOM pode informá-lo que, digamos, <video> elemento começar a jogar, parou, parou, e assim por diante.

Exemplos de método simples, demonstramos como usar o elemento <video>, ler e definir propriedades, e como chamar métodos.

exemplo 1

Criando um jogo simples / pausar o vídeo e redimensionar controles:




O exemplo acima chama dois métodos: play () e pause (). Ele também usa duas propriedades: em pausa e largura.

tente »

Consulte a referência para mais Manual do HTML5 Audio / Video DOM Referência .


tag HTML5 Vídeo

标签 描述
<video> 定义一个视频
<source> 定义多种媒体资源,比如 <video> 和<audio>
<track> 定义在媒体播放器文本轨迹