Inserir Vídeo em Página HTML 5

1. Introdução
A grande diferença entre o HTML 4 e o HTML 5 para inserir vídeos em página é a tag <video>.
O HTML 5 não suporta o formato flv só com a tag <video>.
Além da tag <video>, há também vários tipos de player de vídeo que podem ser incorporados em uma página HTML, geralmente são melhores que a tag <video>, porém a maioria são pagos.
É possivel criar player de vídeo com JavaScript, vários player são feitos nessa linguagem.
Os formatos de vídeos são na verdade conteiners que no seu interior encontram-se os arquivos de vídeo e de audio codificados pelos codecs de video e audio respectivamente.
Tome muito cuidado com os programas de gravação de vídeo e conversão de vídeo, repare na configuração de saída do vídeo e do audio, cada um tem um tipo de codecs, dois conteiners podem ser do mesmo formato e conter tipos diferente de arquivos no seu interior, tudo dependerá do codecs utilizado, será explicado mais a frente.
Outros fatores que podem influenciar na gravação de vídeo e conversão de arquivo é a versão do Windows e a versão do Browser ou Navegador, além do sistema 32 bits ou 64 bits.

Cuidado com os programas de gravação de vídeo e conversores de vídeo, somente trabalhando com os mesmo serão possíveis aprender como funcionam, muitos são pura propaganda, no site baixaki.com.br e outro similares é possível conseguir programas gratuitos e com funcionalidades boas para testes e uso pessoal, logo abaixo estão discriminados algumas opções que já testei.

2. Programas
TipCam: utilizado para gravação da tela do monitor do computador em flv.
FormatFactory: utilizado para conversão de vídeo de flv para vídeo em MP4, avi para flv, etc. Tente primeiro fazer as conversões nesse programa, tem mais opções de configuração.
Configuração do FormatFactory para converter arquivo flv em MP4:
Ícone do MP4
Tipo: MP4
Codificar vídeo: AVC(H264)
Codificar Audio: AAC (sucessor do MP3)
Canal de Audio: 1

Obs: atentar para a conversão de arquivos que são suportados pelo HTML 5.

Tabela com os formatos suportados pele tag <video> do  HTML 5 que são aceitos em cada navegador sem a necessidade de ter que instalar plugins/codecs.
Navegador Formatos aceitos (conteiners)
Internet Explorer .mp4, .m4v
Safari .mp4, .m4v
Google Chrome .mp4, .m4v, .webm, .ogv
Firefox .webm, .ogv
Opera .webm, .ogv

Obs:
1) Os conversores VIDEOCONVERTER version 2.3.02 e o FormatFactory 3.5.0 tem a opção de converter arquivo avi para flv e mp4, e o Player VLC media player, além de reproduzir arquivos flv, webm, etc, também converte arquivo avi para webm, os três tem vários outro formatos para conversão, porém com as configurações do meu computador a conversão de arquivo flv para MP4 no Player VLC media player não funcionou corretamente, não produziu as imagens, apenas o som, há nesse programa alguns formatos MP4 que não são aceitos no Internet Explorer 11.
2) os formatos mp4 e webm são aceitos por todos os navegadores acima mencionados só com o uso da tag <video>.
3) Ogg é um formato de arquivo de container. Vorbis é o codec de audio. Um codec é um protocolo de conversão que representa som , imagens ou uma série de números . Em 2007 , Ogg foi estendido para incluir como codec de vídeo. O formato de vídeo é chamado Theora . A extensão OGG só é usado para arquivos de áudio . Xiph introduziu duas novas extensões de arquivos . OGA é agora usado para arquivos de áudio e OGV é a extensão de arquivo para arquivos de vídeo. Um arquivo pode conter OGV vídeo sem áudio , ou  ambos, um vídeo e um fluxo de áudio sincronizado.
4) Teste vários tipos de programas de gravação e conversão de vídeos para você achar aquele que tem mais qualidade.

3. Conteiner - Codecs
Diferentes navegadores precisam de diferentes tipos de formatos. Isso é necessário porque existem questões relacionadas às patentes.
MP4 - H.264
O container MP4 utiliza o codec de vídeo H.264 e pode usar o MP3 ou AAC como codecs de áudio. Sua relação compressão–qualidade é muito superior aos outros formatos como WebM e Ogg.
Ele pode ser executado sem a necessidade de instalações adicionais no Internet Explorer, Safari e Chrome.

MPEG
O formatos baseados no MPEG são cobertos por patentes e não podem ser distribuídos livremente, pois exigem o pagamento da licença de uso.
O mime type utilizado para o formato MP4 é video/mp4.

WebM - VP8
O formato WebM é baseado em uma versão mais restrita do container Matroska (.mkv). Ele usa o codec de vídeo VP8 e o codec de áudio Vorbis. Ele pode ser executado sem a necessidade de instalações adicionais no Firefox, Chrome e Opera.
O mime type utilizado para o formato WebM é video/webm.

Ogg - Theora Vorbis
O container Ogg, que utiliza o codec de vídeo Theora e o codec de áudio Vorbis, pode ser executado sem a necessidade de instalações adicionais no Firefox, Chrome e Opera. Embora ele funcione neste navegadores, o formato mais recomendado é o WebM, pois ele oferece uma relação compressão–qualidade melhor, além de ser suportado em mais navegadores.
O mime type utilizado para o formato Ogg é video/ogg.

4. Tag <video>
A sintaxe do elemento <video> é conforme exemplo abaixo:

Exemplo:
Neste próximo exemplo, há dois formatos de vídeo especificados,  mp4 e webm. Dependendo do navegador, o elemento de vídeo selecionará o formato que pode ser reproduzido.
A marca de objeto foi adicionada para executar o player Adobe Flash a fim de oferecer suporte para navegadores antigos. Se houver suporte para vídeo HTML5 no navegador, ele aplicará os formatos de vídeo apresentados. Se não houver suporte para vídeo HTML5, ele carregará o player Flash usando as marcas de objeto e incorporação.

<!DOCTYPE html>
<html lang="pt_BR">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

 <video width="320" height="240" controls poster="abertura.png" controls autoplay >
<source src="arquivos/wamp.mp4" type="video/mp4" />
<source src="arquivos/wamp.webm" type="video/webm"/>
   <object>
     <embed src="arquivos/wamp.swf" type= "application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="always" />
   </object>       
   HTML5 Video is required for this example
 </video>
</body>
</html>

Link para o teste do código acima

Obs: os arquivos de vídeos estão na pasta chamada arquivos.


5. Tag <object>
Também é possível reproduzir vídeo só com a tag <object> no formato flash (swf).

Exemplo:
<!DOCTYPE html>
<html lang="pt_BR">
<head>
<title></title>
</head>
<body>
<object width="500" height="300" type="application/x-shockwave-flash" data="arquivos/wamp.swf">
<param name="movie" value="arquivos/wamp.swf" />
<param name="wmode" value="transparent" />
<param name="quality" value="high" />
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obter Adobe Flash Player" /></a>
</object>
</body>
</html>

Link para o teste do código acima


6. Tag <embed>

Exemplo:
<!DOCTYPE html>
<html lang="pt_BR">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
   <object>
     <embed src="arquivos/wamp.swf" type= "application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="always" width="320" height="240"/>
   </object>      
</body>
</html>

Link para o teste do código acima


Esta tabela apresenta os atributos de vídeo básicos. Os atributos boolianos são considerados "verdadeiros" por sua presença e "falsos" por sua ausência enquanto atributos do elemento video.
Atributo Descrição
src
Uma cadeia de caracteres que representa um URL que aponta para um arquivo de vídeo.
source src O elemento de vídeo só permite a definição de um atributo src por vez. Isso é satisfatório quando você sabe que usará apenas um formato de arquivo. Porém, para trabalhar com mais de um formato de arquivo e mais navegadores, você pode usar o elemento source. O elemento source funciona em conjunto com o elemento de vídeo para proporcionar o ajuste ideal de acordo com o formato do conteúdo de vídeo.
controls Atributo booliano que ativa um conjunto de controles de reprodução internos. Isso geralmente inclui "reproduzir", "pausar", "buscar" e "definir volume". O Internet Explorer 10 também exibe um controle para escolher diversas faixas de áudio e texto.
poster Uma cadeia de caracteres que representa uma imagem de espaço reservado que é exibida no player de vídeo. A imagem de pôster é exibida somente quando não há um vídeo disponível porque a origem ainda não foi definida ou porque o conteúdo ainda está sendo carregado.
loop Atributo booliano que reproduz o vídeo repetidamente até que o botão de pausa dos controles seja pressionado ou que o método pause seja chamado a partir do script.
muted Atributo booliano que reproduz o vídeo com a faixa de áudio desativada.
autoplay Atributo booliano que inicia a reprodução do vídeo automaticamente depois que o player tiver conteúdo suficiente armazenado em buffer.
preload Atributo booliano que define uma dica do armazenamento em buffer necessário.
height Define a altura do player de vídeo em pixels.
width Define a largura do player de vídeo em pixels.

Obs: 
Se for definido apenas uma dimensão do player de vídeo (por exemplo, a altura), o player dimensionará o vídeo na dimensão especificada e ajustará a outra dimensão de acordo com a proporção do conteúdo de vídeo. Se for definido as duas dimensões para uma proporção que não corresponda ao conteúdo de vídeo, o player aplicará a dimensão mais próxima para ajustar a imagem, mas manterá a proporção do vídeo. O vídeo ficará centralizado horizontal ou verticalmente com espaços vazios em um dos lados.

CSS
O exemplo a seguir usa CSS para posicionar um pequeno vídeo sobre outro maior. Ele também usa CSS para definir a largura do player de vídeo e insere uma borda colorida ao redor das imagens inseridas.
HTML

    <style type="text/css">      
    #Video1
    {
     position:absolute;
     top: 50px;
     left:0px;       
     width:1000px;      
     border:2px solid blue;
     display:block;
     z-index:99;
     }
       
   #Video2
    {
     position:absolute;
     top:80px;
     left:60px;
     width:300px;
     border:2px solid red;       
     z-index:100;
    }
   
    </style>
</head>
    <body>       
       <video id="Video1" controls loop autoplay >
           <source src="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" type="video/mp4" />          
       </video>
      
       <video id="Video2" muted autoplay controls >
           <source src="http://ie.microsoft.com/testdrive/Videos/BehindIE9AllAroundFast/video.mp4" type="video/mp4" />
           HTML5 Video not supported
       </video>  


Tabela com relação dos conteiners e seus respectivos tipos:
Media (conteiner)
Type Windows plug-ins Linux plug-ins
MP3 (sound) audio/mpeg
Windows Media Player/Quicktime
OGG (sound) application/ogg Needs user setup except WMP




MID (sound) audio/x-midi Windows Media Player/Quicktime
MPG or MPUm codec é um software que é usado para compactar ou descompactar um arquivo de mídia digital, como música ou vídeo.Um codec é um software que é usado para compactar ou descompactar um arquivo de mídia digital, como música ou vídeo.Um codec é um software que é usado para compactar ou descompactar um arquivo de mídia digital, como música ou vídeo.EG (video) video/mpeg Windows Media Player/Quicktime
MOV (video) video/quicktime Windows Media Player/Quicktime
WAV (uncompressed sound) audio/x-wav Windows Media Player/Quicktime
AVI (video) video/avi Windows Media Player/Quicktime
WMV (video) video/x-ms-wmv Windows Media Player/Quicktime
SWF (Flash video) application/x-shockwave-flash Adobe Flash Player Adobe Flash Player
FLV (Flash video) video/x-flv Adobe Flash Player Adobe Flash Player
F4V and F4P (Flash video) video/mp4 Adobe Flash Player Adobe Flash Player
F4A (Flash audio) audio/mp4 Adobe Flash Player Adobe Flash Player
RA (Real Audio) audio/x-pn-realaudio-plugin Real player
RM (Real Media) application/vnd.rn-realmedia Real player
CLASS (Java applets) application/x-java-applet Java runtime environment
HTML (Web pages) not needed not needed not neede

You then need to tell the browser where to get the plug-ins using CODEBASE and PARAM. The common plug-ins are:
Plug-in IE clsid IE codebase PARAM pluginurl
Media Player 22D6F312-B0F6-11D0-94AB-0080C74C7E95 http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab http://www.microsoft.com/Windows/MediaPlayer/
Quicktime 02BF25D5-8C17-4B23-BC80-D3488ABDDC6B http://www.apple.com/qtactivex/qtplugin.cab http://www.apple.com/quicktime/download/
Real Player CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA n/a n/a
Flash Player D27CDB6E-AE6D-11cf-96B8-444553540000 http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab http://get.adobe.com/flashplayer/
Java runtime 8AD9C840-044E-11D1-B3E9-00805F499D93 http://java.sun.com/products/plugin/autodl/jinstall-1_5_0-windows-i586.cab http://java.com/en/download/index.jsp

Different types of media (and therefore different plug-ins) may need extra PARAM entries.

Here’s a chart to make it easier to follow:


6. A tag <áudio>

Será mostrado o básico sobre o uso da tag <audio>.

Exemplo:
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>HTML5 Audio</title>
</head>
<body>
<audio  controls="controls">
    <source src="arquivos/e1.mp3" type="audio/mp3" />
    seu navegador não suporta HTML5
</audio>
</body>
</html>
Incorporação nesta página:


Exemplo com vários formatos:
<!doctype html>
<head>
    <title>
        Multiple format audio example
    </title>
</head>
<body>
    <audio controls="true">
        <source src="demo.mp3" type="audio/mp3">
        <source src="demo.ogg" type="audio/ogg">
        <source src="demo.aac" type="audio/mp4">
        HTML5 audio not supported
    </audio>
</body>
</html>

Os atributos da tag <audio>:
Atributo Valor Descrição
autoplay autoplay Define que o audio começará a ser tocado assim que ele estiver pronto.
controls controls Os controles serão mostrados.
loop loop Define que o audio começará a ser tocado novamente quando terminar.
preload preload Define que o audio será carregado enquanto a página é lida. Esse atributo é ignorado caso o atributo autoplay estiver definido.
src url URL do arquivo a ser tocado

Formatos de áudio suportados:
Formato IE 8+ Firefox 3.5+ Opera 10.5+ Chrome 3.0+ Safari 3.0+
Ogg Vorbis Não Sim Sim Sim Não
MP3 Não Não Não Sim Sim
Wav Não Sim Sim Não Sim


Browser .mp3 .wav .ogg
Mozzila Firefox 3.6
ok
ok
Opera 10.63
ok
ok
Google Chrome 8.0 ok
ok
ok
Apple Safari 5.0.3 (with QuickTime) ok
ok

Microsoft IE 9 Beta ok
ok


Botões Controladores com javascript

A tag <audio> permite configurar seus métodos com a tag <button>, basta atribuir um identificador para o audio e associá-lo ao evento onclik do button.

Exemplo:
<audio id="demo" src="audio.mp3"></audio>
<div>
  <button onclick="document.getElementById('demo').play()">Reproduzir o áudio</button>
  <button onclick="document.getElementById('demo').pause()">Pausar o áudio</button>
  <button onclick="document.getElementById('demo').volume+=0.1">Aumentar o volume</button>
  <button onclick="document.getElementById('demo').volume-=0.1">Diminuir o volume</button>
</div>

Exemplo:
<!DOCTYPE html>
<html>
<body>
<audio id="player" src="audio/e1.mp3"></audio>
<div>
<button onclick="document.getElementById('player').play()">Play</button>
<button onclick="document.getElementById('player').pause()">Pause</button>
<button onclick="document.getElementById('player').muted=!document.getElementById('player').muted">Mute/ Unmute</button>
</div>
</body>
</html>
Incorporação nesta página:

Exemplo com embed em HTML 5:

<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src="/html/yourfile.mid" width="100%" height="60" >
   <noembed><img src="yourimage.gif" alt="Alternative Media" ></noembed>
</embed>
</body>
</html>
<!doctype html>
<html>

Exemplo com object em HTML 4:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Elemento object</title>
</head>
<body>
<h4>Elemento object utilizado para chamar um áudio:</h4>
<p>
      <object data="arquivos/e1.mp3" height="20" width="20"></object>
</p>
</body>
</html>


The <embed> Tag Attributes
Following is the list of important attributes which can be used with <embed> tag.
Attribute Description
align Determines how to align the object. It can be set to either center, left or right.
autostart This boolean attribute indicates if the media should start automatically. You can set it either true or false.
loop Specifies if the sound should be played continuously (set loop to true), a certain number of times (a positive value) or not at all (false)
playcount Specifies the number of times to play the sound. This is alternate option for loop if you are usiong IE.
hidden Specifies if the multimedia object should be shown on the page. A false value means no and true values means yes
width Width of the object in pixels
height Height of the object in pixels
name A name used to reference the object.
src URL of the object to be embedded.
volume Controls volume of the sound. Can be from 0 (off) to 100 (full volume)