Flex - Controle VideoPlayer

Introdução

O controle de vídeo suporta a reprodução de arquivos FLV e F4v. Este controle contém uma IU com recursos completos para controlar a reprodução de vídeo.

Declaração de Classe

A seguir está a declaração para spark.components.VideoPlayer classe -

public class VideoPlayer 
   extends SkinnableComponent

Propriedades Públicas

Sr. Não	Descrição da Propriedade
1	autoDisplayFirstFrame : Boolean Se autoPlay = false, então autoDisplayFirstFrame controla se o vídeo é carregado quando a fonte é definida.
2	autoPlay : Boolean Especifica se o vídeo começa a ser reproduzido imediatamente quando a propriedade source é definida.
3	autoRewind : Boolean Especifica se o arquivo FLV deve retroceder até o primeiro quadro quando a reprodução é interrompida, chamando o método stop () ou alcançando o final do fluxo.
4	bytesLoaded : Number [somente leitura] O número de bytes de dados que foram baixados para o aplicativo.
5	bytesTotal : Number [somente leitura] O tamanho total em bytes dos dados sendo baixados para o aplicativo.
6	currentTime : Number [somente leitura] Tempo atual do indicador de reprodução, medido em segundos, desde o início da reprodução do vídeo.
7	duration : Number [somente leitura] Duração da reprodução do vídeo, em segundos.
8	loop : Boolean Indica se a mídia deve ser reproduzida novamente após a conclusão da reprodução.
9	mediaPlayerState : String [somente leitura] O estado atual do vídeo.
10	muted : Boolean Defina como verdadeiro para silenciar o vídeo e como falso para ativar o som do vídeo.
11	pauseWhenHidden : Boolean Controla se o vídeo continua a ser reproduzido quando está "oculto".
12	playing : Boolean [somente leitura] Contém verdadeiro se o vídeo está sendo reproduzido ou tentando reproduzir.
13	scaleMode : String A propriedade scaleMode descreve diferentes maneiras de dimensionar o conteúdo do vídeo.
14	source : Object A fonte do vídeo.
15	videoObject : Video [somente leitura] O objeto flash.media.Video do Flash Player subjacente.
16	volume : Number O nível de volume, especificado como um valor entre 0 e 1.

Métodos Públicos

Sr. Não	Método e Descrição
1	VideoPlayer() Construtor.
2	pause():void Pausa a reprodução sem mover o indicador de reprodução.
3	play():void Faz com que o vídeo seja reproduzido.
4	seek(time:Number):void Busca dar tempo no vídeo.
5	stop():void Pára a reprodução do vídeo.

Métodos Protegidos

Sr. Não	Método e Descrição
1	formatTimeValue(value:Number):String Formata um valor de tempo, especificado em segundos, em uma String que é usada para currentTime e a duração.

Eventos

Sr. Não	Método e Descrição
1	bytesLoadedChange Enviado quando os dados são recebidos durante o andamento de uma operação de download.
2	complete Enviado quando o indicador de reprodução atinge a duração da mídia reproduzível.
3	currentTimeChange Enviado quando a propriedade currentTime do MediaPlayer é alterada.
4	durationChange Enviado quando a propriedade de duração da mídia é alterada.
5	mediaPlayerStateChange Enviado quando o estado do MediaPlayer muda.

Métodos herdados

Esta classe herda métodos das seguintes classes -

spark.components.supportClasses.SkinnableComponent
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Exemplo de controle do Flex VideoPlayer

Vamos seguir as etapas a seguir para verificar o uso do controle VideoPlayer em um aplicativo Flex criando um aplicativo de teste -

Degrau	Descrição
1	Crie um projeto com um nome HelloWorld em um pacote com.tutorialspoint.client conforme explicado no capítulo Flex - Criar aplicativo .
2	Adicione uma pasta de vídeo à pasta src . E adicione um vídeo de amostra a ele.
3	Modifique HelloWorld.mxml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
4	Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos.

A seguir está a maneira de incorporar um vídeo em um aplicativo flex.

<s:VideoPlayer source = "video/just for laugh magic trick.flv"
   width = "350" height = "250" loop = "true" />

A seguir está o conteúdo do arquivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "library://ns.adobe.com/flex/spark"
   xmlns:mx = "library://ns.adobe.com/flex/mx
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />	   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Complex Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
            
            <s:Panel id = "videoPlayerPanel" title = "Using VideoPlayer" 
               width = "500" height = "300" >
               <s:layout>
                  <s:HorizontalLayout  gap = "10" verticalAlign = "middle" 
                     horizontalAlign = "center" />	
               </s:layout>				
               
               <s:VideoPlayer source = "video/just for laugh magic trick.flv"
                  width = "350" height = "250" loop = "true" />				
            </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Quando estiver pronto com todas as alterações feitas, vamos compilar e executar o aplicativo no modo normal como fizemos no capítulo Flex - Criar aplicativo . Se tudo estiver bem com sua aplicação, ele produzirá o seguinte resultado: [ Experimente online ]

↰ Previous page