Blog de Fennecos Un blog Flex!!

11mar/101

Ajout de sous-titres sur Video

Voilà comment ajouter simplement dans Flex des sous titres à un VideoDisplay grâce à la classe CuePointManager.

Nous avons donc au départ un vidéo display ayant pour id "video"

<mx:VideoDisplay id="video" />

Il nous faut ensuite un tableau associatif dans lequel il y aura tous les sous-titres

private var _subs:Array/*de sous-titres*/ = new Array();

On utilise maintenant la classe CuePointManager pour ajouter des cuepoints à notre VideoDisplay

//sous-titre à la 12ème seconde
var time:Number = 12;
//ayant pour nom subtitle01
var name:String = subtitle01;
//Texte du sous-titre
var texte:String = "Voici un exemple de sous-titre";
//on assigne un nouveau CuePoint à notre FLV
CuePointManager(video.cuePointManager).addCuePoint({name:name, time:time} );

//Et enfin on rentre le texte dans un tableau associatif                             
_subs[name] = texte;

On ajoute ensuite un texte qui se placera en bas du vidéo display, ainsi qu'un écouteur sur le cuePoint

<mx:Canvas >
        <mx:VideoDisplay id="video" cuePointManagerClass="mx.controls.videoClasses.CuePointManager" cuePoint="onCuePoint(event)"/>

        <mx:Text id="sub" width="100%" bottom="0"
                paddingLeft="20" paddingRight="20"
                fontWeight="bold" fontFamily="Arial"
                textAlign="center" color="#fFFF00" fontSize="12"
                selectable="false">
                <mx:filters>
                        <mx:DropShadowFilter id="shadowFilter"
                                       
                                        angle="45"
                                        blurX="2" blurY="2"
                                        distance="1" alpha="1"
                                        quality="1" strength="6"
                                        color="#000000" knockout="false"/>
                </mx:filters>
        </mx:Text>
</mx:Canvas>

Et au final on renseigne le champs texte par le sous-titre correspondant dans l'écouteur onCuePoint

private function onCuePoint(e:CuePointEvent):void
{
        sub.text = _subs[e.cuePointName];
}

Et c'est tout! =^)

Commentaires (1) Trackbacks (0)

Laisser un commentaire


Aucun trackbacks pour l'instant