Resumo:
Veremos como criar um player de vídeo utilizando ActionScript 3 no Flash, utilizando Streaming.

Tutorial:
Muitas pessoas usam componentes prontos do Flash para rodar seus vídeos, como o FLVPlayback, mas não sabem que é relativamente fácil criar um próprio player, podendo assim customizar como quiser o seu layout.
Nesta primeira parte do tutorial, veremos como criar o player e como adicionas alguns controles no filme como: play, stop, pause e reset.
E na segunda parte vamos adicionar controle de volume e a seekbar, que serve para atrasar ou adiantar o filme.

Antes de iniciarmos, visite uma prévia do artigo:

http://www.rafaelcosta.com/Tutoriais/playerVideo/

Vamos ao trabalho:

Obs: Colocarei a tag [code] no início de qualquer código e a tag [/code] no final do mesmo código, para facilitar o entendimento.

Para criar seu player de vídeo, usaremos NetConnection e NetStream. Não é necessário servidor especial para isso.

Começaremos o projeto declarando algumas variáveis que serão necessárias:

[code]
// Largura do Vídeo
var larguraVideo:Number = new Number(320);
// Altura do Vídeo
var alturaVideo:Number = new Number(240);
// Posição X do vídeo
var posicaoX = 0;
// Posição Y do vídeo
var posicaoY = 0;
// Link do vídeo
var urlVideo:String = new String("video.flv");

[/code]

Estas variáveis informam a largura e altura do vídeo, as posições X e Y do vídeo e a url do vídeo.

Feito isso, vamos criar a instância do video e posiciona-lo ao palco.

[code]
// Criando nova instância do vídeo
var video:Video = new Video();
// Adicionando o vídeo ao Palco
addChild(video);
// Posicionando a posição X do vídeo
video.x = posicaoX;
// Posicionando a posição Y do vídeo
video.y = posicaoY;

[/code]

Agora vamos criar a NetConnection para o nosso vídeo

[code]
// Nova instância para NetConnection
var nc:NetConnection = new NetConnection();
// Como não estamos usando um servidor específico, conectaremos a NetConnection a um valor nulo
nc.connect(null);

[/code]

Feito isso, crie a instância para NetStream

[code]
// Novo NetStream, responsável pelo stream do vídeo
var ns:NetStream = new NetStream(nc);

[/code]

E agora colocar o video com Stream

[code]
video.attachNetStream(ns);

[/code]

Executar o vídeo...

[code]
// Caminho para o vídeo
ns.play(urlVideo);

[/code]

Agora crie 4 botões e instancie-os de: iniciar, parar, pausar e resetar.

Aprenderemos como adicionar ações de controle em nossos vídeos.

Todas as ações serão passadas para nosso NetStream, que mandará para o vídeo.

Ações para pausar o vídeo:

[code]

// Adicionar Evento ao botão

pausar.addEventListener(MouseEvent.CLICK, pauseVideo);

// Botão ficar com “mãozinha”

pausar.buttonMode = true;

// Função chamada pelo botão

function pauseVideo(e:MouseEvent):void

{

// Pausar vídeo

ns.pause();

}

[/code]

Ações para executar o vídeo:

[code]

iniciar.addEventListener(MouseEvent.CLICK, resumeVideo);

iniciar.buttonMode = true;

function resumeVideo(e:MouseEvent):void

{

// Retornar vídeo

ns.resume();

}

[/code]

Ações para parar(famoso stop) o vídeo:

[code]

parar.addEventListener(MouseEvent.CLICK, pararVideo);

parar.buttonMode = true;

function pararVideo(e:MouseEvent):void

{

// Retorna o vídeo para 0 segundos

ns.seek(0);

// Pausa o vídeo

ns.pause();

}

[/code]

Ações para retornar o vídeo a 0segundos, sem parar.

[code]

resetar.addEventListener(MouseEvent.CLICK, resetarVideo);

resetar.buttonMode = true;

function resetarVideo(e:MouseEvent):void

{

// Retornar vídeo à 0 segundos

ns.seek(0);

}

[/code]

Abaixo o código completo:

[code]

// Largura do Vídeo

var larguraVideo:Number = new Number(320);

// Altura do Vídeo

var alturaVideo:Number = new Number(240);

// Posição X do vídeo

var posicaoX = 0;

// Posição Y do vídeo

var posicaoY = 0;

// Link do vídeo

var urlVideo:String = new String("video.flv");

// Criando nova instância do vídeo

var video:Video = new Video();

// Adicionando o vídeo ao Palco

addChild(video);

// Posicionando a posição X do vídeo

video.x = posicaoX;

// Posicionando a posição Y do vídeo

video.y = posicaoY;

// Nova instância para NetConnection

var nc:NetConnection = new NetConnection();

// Como não estamos usando um servidor específico, conectaremos a NetConnection a um valor nulo

nc.connect(null);

// Novo NetStream, responsável pelo stream do vídeo

var ns:NetStream = new NetStream(nc);

video.attachNetStream(ns);

// Caminho para o vídeo

ns.play(urlVideo);

// Adicionar Evento ao botão

pausar.addEventListener(MouseEvent.CLICK, pauseVideo);

// Botão ficar com “mãozinha”

pausar.buttonMode = true;

// Função chamada pelo botão

function pauseVideo(e:MouseEvent):void

{

// Pausar vídeo

ns.pause();

}

iniciar.addEventListener(MouseEvent.CLICK, resumeVideo);

iniciar.buttonMode = true;

function resumeVideo(e:MouseEvent):void

{

// Retornar vídeo

ns.resume();

}

parar.addEventListener(MouseEvent.CLICK, pararVideo);

parar.buttonMode = true;

function pararVideo(e:MouseEvent):void

{

// Retorna o vídeo para 0 segundos

ns.seek(0);

// Pausa o vídeo

ns.pause();

}

resetar.addEventListener(MouseEvent.CLICK, resetarVideo);

resetar.buttonMode = true;

function resetarVideo(e:MouseEvent):void

{

// Retornar vídeo à 0 segundos

ns.seek(0);

}

[/code]

Espero que tenha ficado claro como criar seu próprio player de vídeo no Flash usando AS3 e aguarde que na segunda parte vamos personalizar ainda mais nosso player.

Qualquer dúvida poste nos comentários. Abraços a todos!