Crear una barra de Progreso de Video en ActionScript 3

Cuando manejamos vídeo en Flash con ActionScript 3, los que diseñamos o desarrollamos siempre tomamos como un buen referente a youtube, ya que su control de vídeo es uno de los más usados, razón por la cual ellos siempre vienen actualizando o mejorando su reproductor. En este tip inicial (prometo que serán más) crearemos la barra de progreso de un vídeo FLV usando descarga progresiva. Eso quiere decir que podremos ver como va descargando el buffer (el vídeo descargado en tu ordenador y listo para ver) y la reproducción de la misma.

Para eso crearemos una barra horizontal y la duplicaremos, le asignaremos el eje superior derecho, así se escalará de izquierda a derecha. Asimismo le pondremos los nombres de instancia "mcBarra" y "mcBarraBuffer" respectivamente.

Ahora crearemos un contenedor donde alojaremos el vídeo o si gustas podemos usar el mismo swf para que sea su contenedor.

Con esto tenemos lo necesario para empezar, aquí viene la parte divertida de todo, abriremos la ventana de acciones (F9) y colocaremos este código:

Código :

import com.cristalab.utils.MyVideo;

var video:MyVideo = new MyVideo();
//propiedades 
video.buffer = 1.5;
video.mcBarra = mcBarra;
video.mcBarraBuffer = mcBarraBuffer;
video.contentVideo = this;

video.createVideo();
video.urlVideo="http://www.helpexamples.com/flash/video/cuepoints.flv"
//inicia video
video.initVideo();

Y listo!!!!

Eso es todo si en realidad sólo buscamos que funcione y no nos importe que pase por detrás. Pasaré a explicar un poco: Yo hice esta clase llamada MyVideo para que de una forma fácil y rápida podamos tener un reproductor de vídeo, el detalle es este:

• buffer: Para decirle cuanto tiempo en segundos debe tener asegurado una reproducción fluida.
  
• mcBarra: Es el nombre de instancia de la barra de reproducción.
  
• mcBarraBuffer: Es el nombre de instancia de la barra de BUFFER o del video descargado en tu ordenador.
  
• contentVideo: Es donde estará el video.
  
• urlVideo: Es la dirección del FLV.
  
• createVideo: Es el método que crea todo lo que necesitas internamente.
  
• initVideo: Es para iniciar el vídeo.

Lo único obligatorio que necesitas: contentVideo, urlVideo, createVideo e initVideo, el resto es opcional.

Ahora, si eres de los que quieren saber cómo y porqué funcionan las cosas, aquí está la clase completa:

Código :

package com.cristalab.utils{
   
   import flash.display.Sprite;
   import flash.display.DisplayObjectContainer;
   import flash.media.Video;
   import flash.net.NetConnection;
   import flash.net.NetStream;
   import flash.utils.Timer;
   import flash.events.TimerEvent;
   import flash.events.AsyncErrorEvent;
   import flash.events.NetStatusEvent;
   
   public class MyVideo extends Sprite{
   
      private var $__contentVideo:Sprite;
      private var $__mcBarra:Sprite;
      private var $__mcBarraBuffer:Sprite;
      private var $__tmpClient:CustomClient;
      private var $__duration:Number;
      private var $__buffer:Number;
      private var $__video:Video;
      private var $__nc:NetConnection;
      private var $__ns:NetStream;
      private var $__urlVideo:String;
      private var $__timer:Timer;
   
      public function MyVideo(){}
      
      public function createVideo():void{
         if( !this.$__contentVideo ) throw new Error("YOU NEED A CONTENT");
         //
         $__nc = new NetConnection();
         $__nc.connect(null);
         $__ns = new NetStream($__nc);
         $__tmpClient = new CustomClient();
         $__ns.client = $__tmpClient;
         //
         $__ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorEventHandler, false, 0, true);
         $__ns.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler, false, 0, true);
         //
         $__video = new Video();
         $__video.attachNetStream($__ns);
         $__contentVideo.addChild($__video);
      }
      
      public function initVideo():void{
         if( !$__nc ) throw new Error("YOU HAVE TO CALL THE FUNCTION: CREATEVIDEO()");
         if( !$__urlVideo ) throw new Error("YOU NEED A URL FLV");
         $__ns.play( $__urlVideo );
      }
      
      private function netStatusHandler(event : NetStatusEvent) : void {
         switch (event.info.code)
         {
            case "NetStream.Play.Start":
               this.$__timer = new Timer(250);
               this.$__timer.addEventListener(TimerEvent.TIMER, fooTimer, false, 0, true);
               this.$__timer.start();
               if($__buffer) $__ns.bufferTime = $__buffer;
               myScale(this.$__mcBarra, 0);
               myScale(this.$__mcBarraBuffer, 0);
               break;
            case "NetStream.Play.Stop":
               this.$__timer.stop();
               this.$__timer.removeEventListener(TimerEvent.TIMER, fooTimer);
               this.$__timer = null;
               myScale(this.$__mcBarra, 1);
               myScale(this.$__mcBarraBuffer, 1);
               break;
         }
      }
      
      public function fooTimer(e:TimerEvent):void{
         if( $__tmpClient.duration > 0 ){
            myScale(this.$__mcBarra, ((100*$__ns.time)/$__tmpClient.duration)/100);
            var valueBuffer:Number = ( ((   $__ns.time + $__ns.bufferLength  )/ $__tmpClient.duration )   );
            if(valueBuffer > this.$__mcBarraBuffer.scaleX)
               myScale(this.$__mcBarraBuffer, valueBuffer);
         }
      }
      
      private function myScale(mc:DisplayObjectContainer, value:Number):void{
         if(mc) mc.scaleX = value;
      }
      
      private function asyncErrorEventHandler(event : AsyncErrorEvent) : void {
         //ignore
      }
      
      public function set contentVideo(value:Sprite):void{
         this.$__contentVideo = value
      }
      
      public function get contentVideo():Sprite{ return this.$__contentVideo; }
      
      public function set mcBarra(value:Sprite):void{
         this.$__mcBarra = value
      }
      
      public function get mcBarra():Sprite{ return this.$__mcBarra; }
      
      public function set mcBarraBuffer(value:Sprite):void{
         this.$__mcBarraBuffer = value
      }
      
      public function get mcBarraBuffer():Sprite{ return this.$__mcBarraBuffer; }
      
      public function set buffer(value:Number):void{
         this.$__buffer = value
      }
      
      public function get buffer():Number{ return this.$__buffer; }
      
      public function set urlVideo(value:String):void{
         this.$__urlVideo = value
      }
      
      public function get urlVideo():String{ return this.$__urlVideo; }
      
   }
}

class CustomClient {
   public var duration:Number;
    public function onMetaData(info:Object):void {
      this.duration = info.duration;
        trace("metadata: duration=" + info.duration + " width=" + info.width + " height=" + info.height + " framerate=" + info.framerate);
    }
}

Explicación

Bueno, aquí un poco el detalle de esta clase. Como ven hay una clase privada llamada CustomClient, que es quien nos retorna los MetaData donde obtenemos la duración del vídeo, valor importante para este tip.

El método createVideo lo único que hace es crear las instancias de NetConnection y NetStream, así como asignarle los listener, el importante aquí es NetStatusEvent.NET_STATUS quien nos dice cuando inicia y acaba el vídeo de reproducirse. Aquí llama al método netStatusHandler.

Luego tenemos el initVideo que comprueba que exista lo necesario y empiece a reproducir.

Como han visto, creamos un timer apenas el vídeo empieza, esto nos ayudará a que las barras se muevan invocando al método fooTimer, las fórmulas son regla de 3 simple.

El resto son get y set, nada de que preocuparse.

Bueno, hace unos años hice una versión en AS2, así que si estás buscando en esa versión y llegaste hasta aquí, pues puedes darle un vistazo.

Esta es una breve clase básica de vídeo que iré implementando poco a poco, así que estate atento.

Los archivos del ejemplo están aquí o puedes ver el ejemplo funcionando aquí.

Recuerda que los vídeos necesitan tener los MetaData.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.