Manual Básico de HTML

Mídia HTML

Manual de referência HTML

HTML5 Manual Básico

HTML5 API

HTML5 Mídia

大全 de Exemplos HTML Áudio (Audio) HTML

Reprodução de Vídeo (Video) HTML

Existem muitos métodos para reproduzir vídeos em HTML.

Vídeos HTML (Videos)

Exemplo

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>Manual Básico(oldtoolbag.com)</title>　
</head>
<body>
<video　width="320"　height="240"　controls　autoplay>
　　<source　src="movie.ogg"　type="video/ogg">
　　<source　src="movie.mp4"　type="video/mp4">
　　<source　src="movie.webm"　type="video/webm">
　　<object　data="movie.mp4"　width="320"　height="240">
　　　　<embed　width="320"　height="240"　src="movie.swf">
　　</object>
</video>
</body>
</html>

Teste e veja ‹/›

Problemas e soluções

Não é fácil reproduzir vídeos em HTML!

Você precisa dominar muitas técnicas para garantir que seus arquivos de vídeo possam ser reproduzidos em todos os navegadores (Internet Explorer, Chrome, Firefox, Safari, Opera) e em todos os dispositivos (PC, Mac, iPad, iPhone).

Neste capítulo, o tutorial básico resume problemas e soluções.

Uso do tag<embed>

A função do标签<embed> é integrar elementos multimídia em páginas HTML.

O código HTML a seguir mostra o vídeo Flash integrado na página da web:

Exemplo online

Pergunta

HTML4 Não foi possível identificar o tag <embed>. Sua página não pode ser validada.
Se o navegador não suportar Flash, o vídeo não será reproduzido
iPad e iPhone não podem exibir vídeos Flash.
Se você converter o vídeo para outro formato, ele ainda não será reproduzido em todos os navegadores.

Usando o tag <object>

O tag <object> é usado para embedder elementos multimídia em páginas HTML.

O seguinte fragmento HTML mostra um vídeo Flash embutido na página:

Exemplo

Pergunta:

Se o navegador não suportar Flash, o vídeo não será reproduzido.
iPad e iPhone não podem exibir vídeos Flash.
Se você converter o vídeo para outro formato, ele ainda não será reproduzido em todos os navegadores.

usando HTML5 O elemento <video>

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

O elemento <video> é suportado em todos os navegadores modernos.

O seguinte fragmento HTML exibirá um vídeo embutido na página em ogg, mp4 ou vídeos no formato webm:

Exemplo online

Exemplo

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>Manual Básico(oldtoolbag.com)</title>　
</head>
<body>
<video　width="320"　height="240"　controls　autoplay>
　　<source　src="movie.mp4"　type="video/mp4">
　　<source　src="movie.ogg"　type="video/ogg">
　　<source　src="movie.webm"　type="video/webm">
　　Seu navegador não suporta o atributo video.
</video>
</body>
</html>

Teste e veja ‹/›

Pergunta:

Você deve converter o vídeo para muitos formatos diferentes
O elemento <video> não é eficaz em navegadores antigos.

a melhor solução HTML

A seguir, um exemplo de 4 . HTML 5 O elemento <video> tentará reproduzir com vários formatos de vídeo mp4um dos formatos ogg ou webm para reproduzir o vídeo. Se todos falharem, recorra ao elemento <embed>.

Exemplo

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>Manual Básico(oldtoolbag.com)</title>　
</head>
<body>
<video　width="320"　height="240"　controls　autoplay>
　　<source　src="movie.ogg"　type="video/ogg">
　　<source　src="movie.mp4"　type="video/mp4">
　　<source　src="movie.webm"　type="video/webm">
　　<object　data="movie.mp4"　width="320"　height="240">
　　　　<embed　width="320"　height="240"　src="movie.swf">
　　</object>
</video>
</body>
</html>

Teste e veja ‹/›

Pergunta:

Você deve converter o vídeo para muitos formatos diferentes

Solução Youku

A maneira mais simples de exibir vídeos em HTML é usar plataformas de vídeos como Youku.

Se você quiser reproduzir um vídeo na página da web, você pode carregar o vídeo em plataformas de vídeos como Youku e inserir o código HTML na sua página para reproduzir o vídeo.

Você pode encontrar o código HTML embutido na entrada de compartilhamento de várias plataformas de vídeos.

Exemplo

<embed　src='https://player.youku.com/player.php/sid/XNDQ0MTI1NzE1Mg==/v.swf'　allowFullScreen='true'　quality='high'　width='480'　height='400'　align='middle'　allowScriptAccess='always'　type='application/x-shockwave-flash'></embed>

Teste e veja ‹/›

Uso de hiperlinks

Se a página da web contiver hiperlinks para arquivos de mídia, a maioria dos navegadores usará um "aplicativo auxiliar" para reproduzir o arquivo.

O seguinte trecho de código mostra um link para um arquivo AVI. Se o usuário clicar no link, o navegador iniciará um "aplicativo auxiliar", como o Windows Media Player, para reproduzir o arquivo AVI:

Exemplo online

<a href="bookmark.swf">Reproduzir um arquivo de vídeo</a>

Descrição do vídeo em linha

Quando o vídeo é incluído na página da web, ele é chamado de vídeo em linha.

Se você planeja usar vídeos em linha em aplicativos web, você precisa estar ciente de que muitos acham que os vídeos em linha são irritantes.

Além disso, note que o usuário pode já ter desativado a opção de vídeo em linha no navegador.

A nossa melhor recomendação é incluir apenas onde o usuário deseja ver o vídeo em linha. Um exemplo positivo é, quando o usuário precisa ver um vídeo e clicar em um link, a página abre e o vídeo é reproduzido.

Etiquetas de mídia HTML

Etiqueta	Descrição
<embed>	Define o objeto embutido. HTML4 Desaconselhado, HTML5 Permitido.
<object>	Define o objeto embutido.
<param>	Define os parâmetros do objeto.
<audio>HTML5	Define o conteúdo de som
<video>HTML5	Define um vídeo ou filme
<source>HTML5	Definiu os recursos multimídia do elemento media (<video> e <audio>)
<track>HTML5	Arquivo de Legendas ou Outro Arquivo Contendo Texto para o Elemento media (video e audio)

大全 de Exemplos HTML Áudio (Audio) HTML