Lecture de vidéos en mode plein écran

Activation du mode plein écran pour Flash Player dans un navigateur

Avant que vous ne puissiez implémenter le plein écran pour Flash Player dans un navigateur, activez-le via le modèle de publication de votre application. Les modèles qui permettent le mode plein écran comprennent les balises <object> et <embed> , qui contiennent un paramètre allowFullScreen . L’exemple suivant affiche le paramètre allowFullScreen dans une balise <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>

Dans Flash, choisissez Fichier -> Paramètres de publication, puis dans la boîte de dialogue Paramètres de publication, cliquez sur l’onglet HTML, puis sélectionnez le modèle Flash seulement - Autorisation du Plein écran.

Dans Flex, assurez-vous que le modèle HTML inclut les balises <object> et <embed> qui prennent en charge le plein écran.

Activation du mode plein écran

Pour le contenu de Flash Player s’exécutant dans un navigateur, le mode plein écran de la vidéo est activé en réponse à un clic de souris ou à une pression sur une touche. Par exemple, vous pouvez activer le mode plein écran lorsque l’utilisateur clique sur un bouton appelé Plein écran ou sélectionne une commande Plein écran dans un menu contextuel. Pour répondre à l’utilisateur, ajoutez un écouteur d’événement à l’objet sur lequel se produit l’action. Le code suivant ajoute un écouteur d’événement à un bouton sur lequel l’utilisateur clique pour accéder au mode plein écran :

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;     
 
}

Le code active le mode plein écran en définissant la propriété Stage.displayState sur StageDisplayState.FULL_SCREEN . Ce code affiche la totalité de la scène en mode plein écran et met à l’échelle la vidéo selon les proportions de l’espace qu’elle occupe sur la scène.

La propriété fullScreenSourceRect vous permet de spécifier une zone particulière de la scène en vue de l’afficher en mode plein écran. Définissez tout d’abord le rectangle que vous souhaitez afficher en mode plein écran. Ensuite, affectez-le à la propriété Stage.fullScreenSourceRect . Cette version de la fonction fullScreenButtonHandler() ajoute deux lignes supplémentaires de code qui n’activent le plein écran que pour la vidéo.

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; 
}

Bien que cet exemple invoque un gestionnaire d’événement en réponse à un clic de souris, la technique d’activation du mode plein écran est la même pour Flash Player et pour AIR. Définissez le rectangle que vous souhaitez mettre à l’échelle, puis définissez la propriété Stage.displayState . Pour plus d’informations, voir le manuel Guide de référence ActionScript 3.0 pour la plate-forme Adobe Flash .

L’exemple complet qui suit ajoute le code permettent de créer la connexion et l’objet NetStream pour la vidéo, puis commence à le lire.

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 fonction onMetaData() est une fonction de rappel pour gérer les métadonnées de la vidéo, si celles-ci existent. Une fonction de rappel est une fonction que le moteur d’exécution appelle en réponse à certains types d’occurrences ou d’événements. Dans cet exemple, la fonction onMetaData() est une souche capable de fournir la fonction. Pour plus d’informations, voir Ecriture de méthodes de rappel pour les métadonnées et les points de repère

Désactivation du mode plein écran

Tout utilisateur peut désactiver le mode plein écran à l’aide de l’un des raccourcis clavier, notamment en appuyant sur la touche Echap. En ActionScript, vous pouvez désactiver le mode plein écran en définissant la propriété Stage.displayState sur StageDisplayState.NORMAL . Dans l’exemple suivant, le code désactive le mode plein écran lorsque l’événement netStatus de NetStream.Play.Stop se produit.

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

Accélération matérielle en mode plein écran

Lorsque vous modifiez la mise à l’échelle d’une zone rectangulaire de la scène en lui appliquant le mode Plein écran, Flash Player ou AIR utilise l’accélération matérielle, à condition que cette fonction soit disponible et activée. Le moteur d’exécution utilise l’adaptateur vidéo de l’ordinateur pour accélérer la mise à l’échelle de la vidéo ou d’une partie de la scène au mode Plein écran. Dans ces cas, les applications Flash Player peuvent souvent en profiter en basculant sur la classe StageVideo à partir de la classe Video (ou de la classe Camera pour Flash Player 11.4/AIR 3.4 et les versions ultérieures).

Pour plus d’informations sur l’accélération matérielle en mode Plein écran, voir Utilisation du mode Plein écran . Pour plus d’informations sur StageVideo, voir Présentation à accélération matérielle par le biais de la classe StageVideo .