Reproductor de vídeo en Flex

Con la llegada de Flex 4, implantar un reproductor de vídeo es muy sencillo. Entre los componentes incluídos hay uno llamado VideoPlayer, que ya incluye todo lo necesario para llevar a cabo esta labor, además de propiedades y métodos para hilar fino en cuanto a su visualización y comportamiento.

La siguiente aplicación presenta un reproductor que ocupa una superficie considerable del navegador web, con unos botones adicionales en la parte superior para controlar la reproducción: reproducir, pausar y parar. También incluye la posibilidad de silenciar el vídeo, o de reproducir dos tipos de vídeo: MOV y FLV.


<?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"
  backgroundColor="#000000"
  minWidth="955" minHeight="600">

  <mx:ApplicationControlBar horizontalAlign="center" width="100%">
    <s:Button id="playBtn" label="Reproducir"
      click="player.play();" />
    <s:Button id="pauseBtn" label="Pausar"
      click="player.pause();" />
    <s:Button id="stopBtn" label="Parar"
      click="player.stop();" />
    <s:CheckBox id="mutedCheckBox" color="#AAAAAA"
      label="Silencio" selected="false"
      click="player.muted = mutedCheckBox.selected;" />
    <s:CheckBox id="video1" color="#AAAAAA"
      label="MOV" selected="false"
      click="video2.selected=false;player.source='http://www.url.com/video.mov'"/>
    <s:CheckBox id="video2" color="#AAAAAA"
      label="FLV" selected="true"
      click="video1.selected=false;player.source='http://www.url.com/video.flv'"/>
  </mx:ApplicationControlBar>

  <s:Group horizontalCenter="0" verticalCenter="0">
    <s:VideoPlayer id="player"
      width="950" height="550"
      autoRewind="true"
      source="http://www.url.com/video.flv"/>
  </s:Group>

</s:Application>


Las propiedades utilizadas en este ejemplo son las siguientes:
- source permite indicar dónde se ubica el archivo del vídeo a reproducir.
- autoRewind (true/false) controla si el vídeo se rebobina al principio cuando éste llega al final de la reproducción o se detiene la misma.
- muted (true/false) establece el modo silencio.

Los métodos utilizados son los siguientes:
- play() reproduce el vídeo. Si hubo una pausa, retoma la reproducción desde el punto en que se pausó.
- pause() detiene la reproducción sin rebobinar el vídeo (pausa)
- stop() detiene la reproducción, rebobinando al principio del vídeo.

Para ver el reproductor en acción, haz click aquí: http://www.tecnillusions.com/demoVideo/DemoVideo.html