Flex - Contrôle de VideoPlayer

introduction

Le contrôle vidéo prend en charge la lecture des fichiers FLV et F4v. Ce contrôle contient une interface utilisateur complète pour contrôler la lecture vidéo.

Déclaration de classe

Voici la déclaration pour spark.components.VideoPlayer classe -

public class VideoPlayer 
   extends SkinnableComponent

Propriétés publiques

Sr.Non	Propriété et description
1	autoDisplayFirstFrame : Boolean Si autoPlay = false, alors autoDisplayFirstFrame contrôle si la vidéo est chargée lorsque la source est définie.
2	autoPlay : Boolean Spécifie si la lecture de la vidéo démarre immédiatement lorsque la propriété source est définie.
3	autoRewind : Boolean Spécifie si le fichier FLV doit revenir à la première image lorsque la lecture s'arrête, soit en appelant la méthode stop (), soit en atteignant la fin du flux.
4	bytesLoaded : Number [lecture seule] Le nombre d'octets de données qui ont été téléchargés dans l'application.
5	bytesTotal : Number [lecture seule] La taille totale en octets des données téléchargées dans l'application.
6	currentTime : Number [lecture seule] Heure actuelle de la tête de lecture, mesurée en secondes, depuis le début de la lecture de la vidéo.
sept	duration : Number [lecture seule] Durée de la lecture de la vidéo, en secondes.
8	loop : Boolean Indique si le support doit être lu à nouveau une fois la lecture terminée.
9	mediaPlayerState : String [lecture seule] L'état actuel de la vidéo.
dix	muted : Boolean Définissez sur true pour désactiver la vidéo, false pour réactiver la vidéo.
11	pauseWhenHidden : Boolean Contrôle si la vidéo continue à être lue lorsqu'elle est «masquée».
12	playing : Boolean [lecture seule] Contient true si la vidéo est en cours de lecture ou tente de lire.
13	scaleMode : String La propriété scaleMode décrit différentes manières de dimensionner le contenu vidéo.
14	source : Object La source vidéo.
15	videoObject : Video [lecture seule] L'objet flash.media.Video du lecteur flash sous-jacent.
16	volume : Number Le niveau de volume, spécifié comme une valeur comprise entre 0 et 1.

Méthodes publiques

Sr.Non	Méthode et description
1	VideoPlayer() Constructeur.
2	pause():void Interrompt la lecture sans déplacer la tête de lecture.
3	play():void Provoque la lecture de la vidéo.
4	seek(time:Number):void Cherche le temps donné dans la vidéo.
5	stop():void Arrête la lecture vidéo.

Méthodes protégées

Sr.Non	Méthode et description
1	formatTimeValue(value:Number):String Formate une valeur d'heure, spécifiée en secondes, en une chaîne qui est utilisée pour currentTime et la durée.

Événements

Sr.Non	Méthode et description
1	bytesLoadedChange Distribué lorsque les données sont reçues au fur et à mesure qu'une opération de téléchargement progresse.
2	complete Distribué lorsque la tête de lecture atteint la durée du support lisible.
3	currentTimeChange Distribué lorsque la propriété currentTime du MediaPlayer a changé.
4	durationChange Distribué lorsque la propriété duration du média a changé.
5	mediaPlayerStateChange Distribué lorsque l'état du MediaPlayer a changé.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

spark.components.supportClasses.SkinnableComponent
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Exemple de contrôle Flex VideoPlayer

Suivons les étapes suivantes pour vérifier l'utilisation du contrôle VideoPlayer dans une application Flex en créant une application de test -

Étape	La description
1	Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2	Ajoutez une vidéo de dossier au dossier src . Et ajoutez-y un exemple de vidéo.
3	Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
4	Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici la manière d'intégrer une vidéo dans une application flex.

<s:VideoPlayer source = "video/just for laugh magic trick.flv"
   width = "350" height = "250" loop = "true" />

Voici le contenu du fichier mxml modifié src/com.tutorialspoint/HelloWorld.mxml.

<?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
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />	   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Complex Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
            
            <s:Panel id = "videoPlayerPanel" title = "Using VideoPlayer" 
               width = "500" height = "300" >
               <s:layout>
                  <s:HorizontalLayout  gap = "10" verticalAlign = "middle" 
                     horizontalAlign = "center" />	
               </s:layout>				
               
               <s:VideoPlayer source = "video/just for laugh magic trick.flv"
                  width = "350" height = "250" loop = "true" />				
            </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ Essayez-le en ligne ]

↰ Previous page