Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Le contrôle Spark VideoPlayer

Compatible Flex 4. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 08 avril 2010

Cet article est une traduction de l'aide Adobe Flex.

Adobe a donné son accord concernant la traduction de la documentation.

Introduction

Le contrôle VideoPlayer vous permet de lire une vidéo en téléchargement progressif ou une vidéo en flux continu. Il supporte la diffusion multidébit et la vidéo en direct quand il est utilisé avec un serveur qui supporte ces fonctionnalités, comme Flash Media Server 3.5 ou plus.

Le contrôle VideoPlayer contient une interface utilisateur complète permettant à l'utilisateur de contrôler la vidéo. Il contient un bouton à bascule lecteur/pause; une barre d'avancement permettant à l'utilisateur de se déplacer dans la vidéo; une barre de volume; un afficheur de temps; et un bouton permettant d'entrer ou de sortir du mode plein écran.

Flex propose aussi le contrôle Spark VideoDisplay qui lit des vidéos mais ne possède pas de bordures, thème, ou interface utilisateur. Le contrôle Spark VideoDisplay possède les mêmes méthodes et propriétés que le contrôle Spark VideoPlayer. Il est utile lorsque vous ne voulez pas que l'utilisateur interagisse avec le contrôle.

Les contrôles VideoPlayer et VideoDisplay supporte la lecture des formats de fichiers FLV et F4V, ainsi que des formats basés sur MP4.

Les événements du contrôle Spark VideoPlayer

Le contrôle VideoPlayer diffuse différents types d'événements que vous pouvez utiliser pour surveiller et contrôler la lecture. La mise en œuvre sous-jacente du contrôle VideoPlayer s'appuie sur la classe org.osmf.media.MediaPlayer, et ses packages et classes liés. L'objet d'événement associé à chaque événement diffusé par le contrôle VideoPlayer est défini par une classe du package org.osmf.events.

L'exemple suivant gère les événements complete et mediaPlayerStateChange diffusé par le contrôle VideoPlayer:

<?xml version="1.0" encoding="utf-8"?>
<!-- controls\videoplayer\VideoPlayerEvent.mxml-->
<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">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import org.osmf.events.MediaPlayerStateChangeEvent;
            import org.osmf.events.TimeEvent;
 
            protected function vpCompleteHandler(event:TimeEvent):void {
                myTA.text = "Video complete - restarting."
            }
 
            protected function vpMediaPlayerStateChangeHandler(event:MediaPlayerStateChangeEvent):void {
                if (event.state == "loading")
                    myTA.text = "loading ...";
                if (event.state == "playing")
                    myTA.text = "playing ...";
            }
        ]]>
    </fx:Script>
 
    <s:VideoPlayer 
        source="rtmp://fmsexamples.adobe.com/vod/mp4:_cs4promo_1000.f4v"
        width="350" height="250"
        loop="true"
        complete="vpCompleteHandler(event);"
        mediaPlayerStateChange="vpMediaPlayerStateChangeHandler(event);"/>
    <s:TextArea id="myTA" width="350" height="25"/>
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

NDT: La lecture a été mise en pause pour faciliter la lecture de cette ressource

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Le contrôle VideoPlayer diffuse l'événement complete quand la vidéo est terminée. L'objet d'événement pour l'événement complete est de type org.osmf.events.TimeEvent.

Le contrôle VideoPlayer diffuse l'événement mediaPlayerStateChange quand l'état du contrôle MediaPlayer change. Le contrôle MediaPlayer possède plusieurs états, incluant les états buffering, loading, playing, et ready. L'objet d'événement pour l'événement mediaPlayerStateChange est de type org.osmf.events.MediaPlayerStateChangeEvent. Le gestionnaire d'événement pour l'événement mediaPlayerStateChange utilise la propriété state de l'objet d'événement pour déterminer le nouvel état du contrôle MediaPlayer.

Définition de la source vidéo du contrôle VideoPlayer

Le contrôle VideoPlayer supporte la lecture d'un média local, d'un média en flux continu, et d'un média en téléchargement progressif. Vous pouvez lire à la fois des médias en direct et enregistrés.

Pour lire un seul fichier de média, utilisez l'attribut source. La valeur correcte pour l'attribut source est le chemin d'accès au fichier. Utilisez une syntaxe correcte dans l'URL: HTTP pour un téléchargement progressif et RMTP pour un flux continu depuis un serveur Flash Media Server. Si vous utilisez le serveur Flash Media Server, utilisez des préfixes et extensions corrects.

Le code suivant lit un fichier FLV local, phone.flv, qui réside dans le dossier assets du même dossier de projet que le fichier SWF:

<s:VideoPlayer source="assets/phone.flv"/>

Le code suivant lit un seul fichier F4V depuis un serveur Flash Media Server, en utilisant le service de vidéo à la demande qu'offre le serveur Flash Media Server et plus. L'utilisation du préfixe MP4 et de l'extension de fichier F4V est requise. Le préfixe MP4 est toujours requis; l'extension de fichier F4V est requise quand le nom de fichier a téléchargé contient une extension de fichier.

<?xml version="1.0" encoding="utf-8"?>
<!-- controls\videoplayer\VideoPlayerSimple.mxml-->
<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">
 
    <s:VideoPlayer 
        source="rtmp://fmsexamples.adobe.com/vod/mp4:_cs4promo_1000.f4v"
        width="350" height="250"
        loop="true"/>
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

NDT: La lecture a été mise en pause pour faciliter la lecture de cette ressource

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

La diffusion multidébit avec le serveur Flash Media Server et le contrôle Spark VideoPlayer

Pour effectuer une diffusion multidébit, où Flash Player peut jouer automatiquement le flux avec le débit le plus élevé que l'utilisateur peut visualiser, utiliser un objet DynamicStreamingVideoSource. Flash Media Server 3.5 et plus supporte la diffusion multidébit.

L'objet DynamicStreamingVideoSource contient plusieurs éléments de flux, dont chacun représente un flux vidéo encodé à un débit différent. Le code suivant montre l'utilisation de l'objet DynamicStreamingVideoSource:

<?xml version="1.0" encoding="utf-8"?>
<!-- controls\VideoPlayer\VideoPlayerFMS.mxml -->
<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" >
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
 
    <s:VideoPlayer id="myPlayer"
        width="500" height="300">
        <s:source>
            <s:DynamicStreamingVideoSource id="mySVS"
                host="rtmp://fmsexamples.adobe.com/vod/">
                <s:DynamicStreamingVideoItem id="dreamgirl150"
                    streamName="MP4:_PS_dreamgirl_150.f4v"
                    bitrate="150" />
                <s:DynamicStreamingVideoItem id="dreamgirl500"
                    streamName="MP4:_PS_dreamgirl_500.f4v"
                    bitrate="500" />
                <s:DynamicStreamingVideoItem id="dreamgirl1000"
                    streamName="MP4:_PS_dreamgirl_1000.f4v"
                    bitrate="1000" />
            </s:DynamicStreamingVideoSource>
        </s:source>
    </s:VideoPlayer>
 
    <s:TextArea width="500" height="50"
        text="Please wait while the video loads..."/>
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

NDT: La lecture a été mise en pause pour faciliter la lecture de cette ressource

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Lecture vidéo en direct avec le contrôle Spark VideoPlayer

Pour lire une vidéo en direct, utilisez un objet DynamicStreamingVideoSource et définissez l'attribut live sur true:

<s:VideoPlayer> 
    <s:DynamicStreamingVideoSource host="rtmp://localhost/live/" live="true"/> 
        <s:DynamicStreamingVideoItem streamName="myStream.flv"/> 
    </s:DynamicStreamingVideoSource> 
</s:VideoPlayer>

Le contrôle VideoPlayer est l'application cliente qui lit les vidéos. Pour capturer et diffuser une vidéo en direct, vous pouvez utiliser un outil comme Flash Media Live Encoder, qui capture et diffuse de la vidéo en direct vers Flash Media Server. Si vous n'utilisez pas Flash Media Live Encoder, vous êtes obligez de créer une application personnalisée de diffusion. Pour plus d'informations sur la création d'application personnalisée de capture vidéo, regardez Flash Media Server documentation.

Définition de la taille du contrôle Spark VideoPlayer

L'apparence de n'importe quelle vidéo diffusée dans le contrôle VideoPlayer est affectée par les propriétés suivantes:

  • scaleMode
  • height
  • width

La propriété scaleMode ne fonctionne que lorsque vous spécifiez les propriétés height ou width. Il ajuste la taille du média devant être joué après avoir défini la taille du contrôle. Les valeurs possibles sont none, stretch, letterBox ou zoom.

Si vous ne spécifiez pas les 2 propriétés height et width du contrôle, Flex adapte la taille du contrôle aux dimensions du média lu. Si vous spécifiez seulement une propriété, et vous définissez la propriété scaleMode, la taille du média lu détermine la valeur de l'autre propriété. Si vous ne définissez pas la propriété scaleMode, le média conserve son ratio d'aspect lors de son redimensionnement.

Si vous spécifiez explicitement les propriétés width et height, assurez vous que les valeurs sont appropriées par rapport à la taille de la vidéo lue.

Par défaut, Flex dimensionne le contrôle VideoPlayer à la taille du média. Si vous spécifiez les propriétés width et height du contrôle, et qu'elles sont inférieures aux dimensions du média, Flex ne change pas la taille du composant. Au lieu de cela, Flex redimensionne le média pour l'adapter au composant. Si la zone de lecture du contrôle est inférieure à la taille par défaut du média, Flex rétrécit le média pour l'adapter à l'intérieur du contrôle.

La vidéo d'exemple utilisée ici est plus large que la taille spécifiée du composant, mais le ratio de la largeur et de la hauteur sont appropriées à la taille de la vidéo. Si vous supprimez les propriétés width et height à partir du code, toutefois, vous verrez que le composant VideoPlayer est automatiquement dimensionné à la taille de la vidéo.