Vídeo através de Players ou tags do HTML

1. Introdução:
A reprodução de vídeo pela internet requer uma atenção especial do programador, a fim de facilitar o entendimento foi dividido o assunto em três apostilas, que na verdade são dependentes entre si, são elas:

1ª Apostila: com o título, "Extensão, Tipo e Formato de Arquivo de Vídeo", esta apostila faz uma abordagem sobre o assunto proposto afim de diferenciá-los, quando gravamos um arquivo de vídeo através de uma câmera, um computador ou outro meio, é gerado apenas uma arquivo que contém o arquivo de vídeo e o arquivo de áudio, o arquivo único gerado é na verdade um conteiner e os arquivos de áudio e vídeo são codificados ao gravá-los e decodificados ao repoduzí-los através de um software chamado codec, dois conteiners podem ter a mesma extensão, porém, o codec utilizado para a codificação podem ser diferentes, o que os tornam dois arquivos diferentes com a mesma extensão, como se fosse uma arquivo .zip que em seu interior pode havar vários tipos de arquivos compactado.

2ª Apostila: com o título, "Inserir Vídeo em Página com HTML 5", esta segunda apostila faz uma breve explicação sobre a tag <video> e comenta as possíveis dificuldades na sua implantação.

3ª Apostila: é esta própria apostila com o título, "Vídeo através de Players ou tags do HTML":
O HTML 5 mudou a exibição de videos com a tag <video> , mas ainda existem muitos navegadores antigos que não aceitam essa tag, lembrando que em um navegador moderno pode exibir tanto uma página feita em HTML 4 ou HTML 5 de acordo com suas regras de formatação, caso tenha dúvidas consulte o site www.miscelaneadoconhecimento.com.br e verifique sobre HTML.

2. Formas de reprodução de vídeos pela internet
Há várias formas de reproduzir um vídeo pela internet, serão abordados apenas as duas primeira formas que são mais conhecidas:
- Utilizando um player específico já pronto com essa finalidade (ex: Adobe Player);
- Através do player do próprio browser utilizando tags HTML4 e HTML5, tal player tem poucos recursos;
- Através de um servidor que suporta transmissão de vídeo em tempo real como o Red 5, para uma simples reprodução de vídeo não é necessário a utilização de um servidor desse tipo.

2.1. Utilizando um player
Há vários tipos de player, irei mostrar apenas dois.

2.1.1. JW Player
Primeiro é necessário fazer o download do player, pode ser no site oficial ou no baixaki.com.br, esse player é fornecedo gratuitamente, porém também pode ser vendido, pressupõe se que terá mais recursos e suporte técnico.
- Acesse o site www.baixaki.com.br
- Escolha o programa JW Player for Flash 5.4, ele suporta formatos: flv, H264/MPEG-4, aac, jpg, png, gif e xml.
Após fazer o download será baixado o arquivo JW Player for Flash.exe que ao ser executado intalará o player, no meu caso foi instalado em C:\Users\Usuario1\Desktop\mediaplayer.zip
- copie o arquivo mediaplayer.zip para a mesma paste que contenha a página HTML 5 que irá usá-lo.  descompactê-o dentro dessa pasta, mude o nome da pasta criada na descompactação para um nome mais curto, exemplo,  mediaplayer, dentro desta pasta deverá ter os seguintes arquivos:
JW Player Quick Start Guide.pdf: é um guia de instalação do player em uma página HTML.
jwplayer.js
license.txt
player.swf
preview.jpg
readme.html
video.mp4

Exemplo de implantação do JW Player em um código HTML 5:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Player de vídeo</title>
    <script type="text/javascript" src="mediaplayer/jwplayer.js"></script>
</head>
 
<body>
<div id="container">Loading the player ...</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer: "mediaplayer/player.swf",
file: "arquivos/wamp.flv",
height: 270,
width: 480
});
</script>
</body>
</html>

Link para o vídeo em HTML 5

Obs: O código HTML 5 suporta arquivo de vídeo do tipo flv através do JW Player.

Exemplo de implantação do JW Player em um código HTML 4:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta charset="UTF-8" />
    <title>Player de vídeo</title>
    <script type="text/javascript" src="mediaplayer/jwplayer.js"></script>
</head>
 
<body>
<div id="container">Loading the player ...</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer: "mediaplayer/player.swf",
file: "arquivos/wamp.flv",
height: 470,
width: 680
});
</script>
</body>
</html>

Link para o vídeo em HTML 4

2.1.2. Video.js
Acesse o site http://www.videojs.com/ para fazer o download.
Este video player é open source  e também é implantado em página HTML 5.
Após baixar o arquivo video-js-4.11.1.zip é só descompactá-lo e dar um nome para a pasta, no meu caso dei o nome de video-js.
Alguns arquivo presentes nessa pasta:

video-js/video.dev.js
video-js/video.js
video-js/demo.html
...

Exemplo:
<!DOCTYPE html>
<html lang="pt_BR">
<head>
<title>Video.JS Example</title>
<link href="//video-sj/video-js.css" rel="stylesheet">
<script src="//video-sj/video.js">
</script>
</head>
<body>
<div style="width:800px;height:400px;margin:0px auto;">
<video id="example_video_1" class="video-js vjs-default-skin"
 controls preload="auto" width="800" height="400"
 poster="abertura.png"
 data-setup='{"controls":true}'>
<source src="arquivos/wamp.webm" type='video/webm' />
<source src="arquivos/wamp.mp4" type='video/mp4' />  
</video>
</div>
</body>
</html>


Link para o vídeo em HTML 5

Obs: o Video.js utiliza a tag <video>, logo só pode ser implantado em página HTML 5.

2) Com uso de link
A maneira mais fácil de inserir um vídeo em uma página HTML é através de um simples link para um arquivo de vídeo do tipo swf porque o Flash Payer reconhece o arquivo automaticamente:

<a href="aula1.swf" target="_blank">Link para o vídeo</a>


3) Com uso de <object> e <embed>
3.1. HTML 4

Exemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Flash Video</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"                        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="400"    height="400" >
    <param name="movie" value="wamp.swf">
    <param name="quality" value="high" >
    <param name="LOOP" value="false">
<embed src="arquivos/wamp.swf" width="400" height="400" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed >
 </object >
  </body>
</html>


Link para o vídeo em HTML 4

Obs: as tags <object> e <embed> do exemplo acima também podem ser usadas no HTML 5.

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.