Flex - Control de reproductor de video

Introducción

El control de video admite la reproducción de archivos FLV y F4v. Este control contiene una interfaz de usuario con todas las funciones para controlar la reproducción de video.

Declaración de clase

A continuación se muestra la declaración de spark.components.VideoPlayer clase -

public class VideoPlayer 
   extends SkinnableComponent

Propiedades publicas

No Señor	Descripción de propiedad
1	autoDisplayFirstFrame : Boolean Si autoPlay = false, autoDisplayFirstFrame controla si el video se carga cuando se establece la fuente.
2	autoPlay : Boolean Especifica si el video comienza a reproducirse inmediatamente cuando se establece la propiedad de origen.
3	autoRewind : Boolean Especifica si el archivo FLV debe rebobinarse hasta el primer fotograma cuando se detiene la reproducción, ya sea llamando al método stop () o llegando al final de la secuencia.
4	bytesLoaded : Number [solo lectura] El número de bytes de datos que se han descargado en la aplicación.
5	bytesTotal : Number [solo lectura] El tamaño total en bytes de los datos que se descargan en la aplicación.
6	currentTime : Number [solo lectura] Tiempo actual del cabezal de reproducción, medido en segundos, desde que se inició la reproducción del video.
7	duration : Number [solo lectura] Duración de la reproducción del video, en segundos.
8	loop : Boolean Indica si el medio debe volver a reproducirse una vez completada la reproducción.
9	mediaPlayerState : String [solo lectura] El estado actual del video.
10	muted : Boolean Configure en verdadero para silenciar el video, falso para reactivar el video.
11	pauseWhenHidden : Boolean Controla si el video continúa reproduciéndose cuando está "oculto".
12	playing : Boolean [solo lectura] Contiene verdadero si el video se está reproduciendo o está intentando reproducirse.
13	scaleMode : String La propiedad scaleMode describe diferentes formas de dimensionar el contenido de video.
14	source : Object La fuente de video.
15	videoObject : Video [solo lectura] El objeto flash.media.Video del reproductor flash subyacente.
dieciséis	volume : Number El nivel de volumen, especificado como un valor entre 0 y 1.

Métodos públicos

No Señor	Método y descripción
1	VideoPlayer() Constructor.
2	pause():void Pausa la reproducción sin mover el cabezal de reproducción.
3	play():void Hace que se reproduzca el video.
4	seek(time:Number):void Busca el tiempo dado en el video.
5	stop():void Detiene la reproducción de video.

Métodos protegidos

No Señor	Método y descripción
1	formatTimeValue(value:Number):String Formatea un valor de tiempo, especificado en segundos, en una cadena que se usa para currentTime y la duración.

Eventos

No Señor	Método y descripción
1	bytesLoadedChange Se envía cuando se reciben los datos a medida que avanza una operación de descarga.
2	complete Se envía cuando el cabezal de reproducción alcanza la duración de los medios reproducibles.
3	currentTimeChange Se envía cuando ha cambiado la propiedad currentTime de MediaPlayer.
4	durationChange Se envía cuando la propiedad de duración de los medios ha cambiado.
5	mediaPlayerStateChange Se envía cuando el estado de MediaPlayer ha cambiado.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

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

Ejemplo de control de Flex VideoPlayer

Sigamos los siguientes pasos para verificar el uso del control VideoPlayer en una aplicación Flex creando una aplicación de prueba:

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación .
2	Agregue un video de carpeta a la carpeta src . Y agregue un video de muestra.
3	Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
4	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.

A continuación se muestra la forma de incrustar un video en una aplicación flexible.

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

A continuación se muestra el contenido del archivo 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>

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]

↰ Previous page