Reproducción de vídeo en modo de pantalla completa

Activación del modo de pantalla completa para Flash Player en un navegador

Antes de que pueda implementar el modo de pantalla completa para Flash Player en un navegador, actívelo mediante la plantilla de publicación para su aplicación. Las plantillas que permiten la pantalla completa incluyen etiquetas <object> y <embed> que contienen un parámetro allowFullScreen . El siguiente ejemplo muestra el parámetro allowFullScreen en una etiqueta <embed> .

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
    id="fullScreen" width="100%" height="100%" 
    codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"> 
    ... 
    <param name="allowFullScreen" value="true" /> 
    <embed src="fullScreen.swf" allowFullScreen="true" quality="high" bgcolor="#869ca7" 
        width="100%" height="100%" name="fullScreen" align="middle" 
        play="true" 
        loop="false" 
        quality="high" 
        allowScriptAccess="sameDomain" 
        type="application/x-shockwave-flash" 
        pluginspage="http://www.adobe.com/go/getflashplayer"> 
    </embed> 
    ... 
</object>

En Flash, seleccione Archivo -> Configuración de publicación y en el cuadro de diálogo Configuración de publicación, en la ficha HTML, seleccione la plantilla Solo Flash - Permitir pantalla completa.

En Flex, asegúrese de que la plantilla HTML incluya las etiquetas <object> y <embed> que son compatibles con la pantalla completa.

Inicio del modo de pantalla completa

Para el contenido de Flash Player que se ejecuta en un navegador, el modo de pantalla completa se inicia para vídeo como respuesta a un clic de ratón o a una pulsación de tecla. Por ejemplo, el modo de pantalla completa se puede iniciar cuando el usuario hace clic en un botón con la etiqueta de modo de pantalla completa o selecciona un comando Pantalla completa en un menú contextual. Para responder al usuario, añada un detector de eventos al objeto en el que sucede la operación. El siguiente código añade un detector de eventos a un botón en el que el usuario hace clic para introducir el modo de pantalla completa:

var fullScreenButton:Button = new Button(); 
fullScreenButton.label = "Full Screen"; 
addChild(fullScreenButton); 
fullScreenButton.addEventListener(MouseEvent.CLICK, fullScreenButtonHandler); 
 
function fullScreenButtonHandler(event:MouseEvent) 
{ 
    stage.displayState = StageDisplayState.FULL_SCREEN;     
 
}

El código inicia el modo de pantalla completa estableciendo la propiedad Stage.displayState en StageDisplayState.FULL_SCREEN . Este código escala todo el escenario a modo de pantalla completa con el ajuste de escala de vídeo en proporción al espacio que ocupa en el escenario.

La propiedad fullScreenSourceRect permite especificar un área concreta del escenario para realizar un ajuste de escala a pantalla completa. En primer lugar, defina el rectángulo que desee escalar a pantalla completa. Después asígnelo a la propiedad Stage.fullScreenSourceRect . Esta versión de la función fullScreenButtonHandler() agrega dos líneas adicionales de código que escalan solo el vídeo a pantalla completa.

private function fullScreenButtonHandler(event:MouseEvent) 
{ 
    var screenRectangle:Rectangle = new Rectangle(video.x, video.y, video.width, video.height); 
    stage.fullScreenSourceRect = screenRectangle; 
    stage.displayState = StageDisplayState.FULL_SCREEN; 
}

Aunque en este ejemplo se invoca un controlador de eventos como respuesta a un clic de ratón, la técnica de pasar al modo de pantalla completa es la misma tanto para Flash Player como para AIR. Defina el rectángulo que desee escalar y, a continuación, establezca la propiedad Stage.displayState . Para obtener más información, consulte Referencia de ActionScript 3.0 para la plataforma de Adobe Flash .

El siguiente ejemplo completo agrega código que crea la conexión y el objeto NetStream para el vídeo y comienza a reproducirlo.

package 
{ 
    import flash.net.NetConnection; 
    import flash.net.NetStream; 
    import flash.media.Video; 
    import flash.display.StageDisplayState; 
    import fl.controls.Button; 
    import flash.display.Sprite; 
    import flash.events.MouseEvent; 
    import flash.events.FullScreenEvent; 
    import flash.geom.Rectangle; 
     
    public class FullScreenVideoExample extends Sprite 
    {     
        var fullScreenButton:Button = new Button(); 
        var video:Video = new Video(); 
 
        public function FullScreenVideoExample() 
        { 
            var videoConnection:NetConnection = new NetConnection(); 
            videoConnection.connect(null); 
             
            var videoStream:NetStream = new NetStream(videoConnection); 
            videoStream.client = this; 
 
            addChild(video); 
             
            video.attachNetStream(videoStream); 
             
            videoStream.play("http://www.helpexamples.com/flash/video/water.flv"); 
             
            fullScreenButton.x = 100; 
            fullScreenButton.y = 270; 
            fullScreenButton.label = "Full Screen"; 
            addChild(fullScreenButton); 
            fullScreenButton.addEventListener(MouseEvent.CLICK, fullScreenButtonHandler); 
        } 
 
        private function fullScreenButtonHandler(event:MouseEvent) 
        {  
            var screenRectangle:Rectangle = new Rectangle(video.x, video.y, video.width, video.height); 
            stage.fullScreenSourceRect = screenRectangle; 
            stage.displayState = StageDisplayState.FULL_SCREEN;  
        }     
         
        public function onMetaData(infoObject:Object):void 
        { 
            // stub for callback function 
        } 
    } 
}

La función onMetaData() es una función callback para administrar metadatos de vídeo, si existen. Una función callback es una función que llama el tiempo de ejecución como respuesta a algún tipo de instancia o evento. En este ejemplo, la función onMetaData() es un código auxiliar que cumple con el requisito de proporcionar la función. Para obtener más información, consulte Escritura de métodos callback para metadatos y puntos de referencia .

Cancelación del modo de pantalla completa

Un usuario puede cancelar el modo de pantalla completa introduciendo uno de los métodos abreviados de teclado como, por ejemplo, la tecla Esc. Para cancelar el modo de pantalla completa en ActionScript, establezca la propiedad Stage.diplayState en StageDisplayState.NORMAL . El código del siguiente ejemplo cancela el modo de pantalla completa cuando se produce el evento netStatus de NetStream.Play.Stop.

videoStream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler); 
 
private function netStatusHandler(event:NetStatusEvent) 
{ 
    if(event.info.code == "NetStream.Play.Stop") 
        stage.displayState = StageDisplayState.NORMAL; 
}

Aceleración de hardware a pantalla completa

Cuando se vuelve a escalar un área rectangular del escenario en modo de pantalla completa, Flash Player o AIR utilizan la aceleración de hardware, si está disponible y habilitada. El tiempo de ejecución utiliza el adaptador de vídeo del equipo para agilizar el ajuste de escala del vídeo, o una parte del escenario, al tamaño de pantalla competa. En este caso, las aplicaciones de Flash Player a menudo lo aprovechan cambiando a la clase StageVideo desde la clase Video (o la clase Camera; Flash Player 11.4/AIR 3.4 y posterior).

Para obtener más información sobre la aceleración de hardware a pantalla completa, consulte Trabajo con el modo de pantalla completa . Para obtener más información sobre StageVideo, consulte Uso de la clase StageVideo para la presentación con aceleración por hardware .