Charger une vidéo au hasard dans votre player flash

Ce que nous voulons : avoir un player qui, à chaque chargement de la page, load une vidéo différente.

Imaginons que nous ayons 3 vidéos.

  • Pour sauvegarder ma bande passante, je fais une pause au début de la vidéo après avoir joué 2 secondes.
  • Pour lire les vidéos nous allons utiliser la classe NetStream vu dans un précédent article.
  • La liste des vidéos sera conservée dans un tableau avec la classe Array.
  • Pour choisir une vidéo au hasard, on utilisera la méthode Math.random() qui renvoie un entier aléatoire compris entre 0 et le nombre entier spécifié.
  • Et enfin j’utilise la superbe classe mc tweens de Zeh Fernando pour effectuer les tweens de mon contrôle (play et stop).

Voici le code commenté suivi de l’exemple et du fla.

Voir l’exemple
Télécharger le fla

Ps : pour les actions de tween il vous faut « installer » la librairie de prototypes MC Tween (as1/2) . J’en parle ici

 
Stage.scaleMode = "noScale"; // pas de redimmensionnement de la fenêtre
Stage.align = "TL"; // on aligne la video : Haut Gauche
 
// on inclus la classe pour les tweens
#include "mc_tween2.as"
 
// Attention, il faut que le flv soit encodé avec flash 8, les versions précédentes n'incluant pas les métadatas
// on ouvre la connexion (dans le vide) puis on l'associera plus tard
var connection:NetConnection = new NetConnection();
connection.connect(null);
// chargement et contrôle de la video
var flux:NetStream = new NetStream (connection);
 
var nosVideos = new Array("effetText1.flv", "effetText2.flv", "effetText3.flv"); // création d'un tableau avec la liste des vidéos
i = nosVideos.length;  //  compte le nombre d'éléments dans le tableau (on commence à 0 : ici 0, 1, 2)
var hasard = Math.floor(Math.random()*i); // la variable hasard choisi un nombre au hasard
var videoSelection:Object = nosVideos[hasard]; // on choisit donc un nombre au hasard dans le tableau
 
	// attach movie pour faire le lien entre l'objet video sur la scene et le flux video netStream
	video.attachVideo(flux);
	// donnons le chemin vers la video
	flux.setBufferTime(2);
	flux.play(videoSelection);
	flux.seek(0);
	flux.pause()
trace (videoSelection);
 
	controle_mc.alphaTo(10,3,linear); // on rend le contrôle transparent.
 
// Lecture   ##################################################################
controle_mc.play_mc.onPress=function(){
	flux.pause();
}
 
controle_mc.play_mc.onRollOver=function  () {
	this.colorTo(0x990000, 0.5, linear);
	this._parent.alphaTo(100,1,linear);
}
 
controle_mc.play_mc.onRollOut=function  () {
	this.colorTo(null, 1);
	this._parent.alphaTo(10,1,linear);
}
 
// stop ##################################################################
controle_mc.stop_mc.onRelease = function() {
        flux.seek(0);
        flux.pause(true);
};
controle_mc.stop_mc.onRollOver=function  () {
	this.colorTo(0x990000, 0.5, linear);
	this._parent.alphaTo(100,1,linear);
}
 
controle_mc.stop_mc.onRollOut=function  () {
	this.colorTo(null, 1);
	this._parent.alphaTo(10,1,linear);
}

2 réponses sur “Charger une vidéo au hasard dans votre player flash”

  1. bonjour,

    je débute dans flash et je suis tombé sur ton article car je cherche à loader une vidéo venant de dailymotion dans une partie de mon flash.

    Je m’explique, quand je clic sur un lien dans le flash ca va chercher la bonne vidéo sur dailymotion et la charge dans le flash (sur mon site).

    je ne pense pas que ce soit très compliqué mais je n’y arrive pas, pourrais tu m’éclairer sur la chose?

    Cordialement

  2. Hé ben Clément, c’est marrant que tu me demande ca, car j’étais dessus. Pour te dire la vérité, j’avais un code qui fonctionnait très bien mais apparement dailymotion a modifié « certaines choses ». Il ne fonctionne donc plus..

    Je peux t’aider en ce qui concerne youtube :

    avec un mc nommé youtube_mc sur la scène :

    youtube_mc.loadMovie("http://www.youtube.com/v/KgaOU22rs5Q&hl=fr&fs=1&rel=0&color1=0xe1600f&color2=0xfebd01");
    youtube_mc._x = 33;
    youtube_mc._y = 30;
    youtube_mc._width = 280;
    youtube_mc._height = 210;

    sinon dynamiquement

    // crée un MovieClip pour charger le player
    var ytplayer:MovieClip = _root.createEmptyMovieClip("ytplayer", 1);
     
     
    // crée un écouteur à utiliser avec le MovieClipLoader
    var ytPlayerLoaderListener:Object = {
      onLoadInit: function() {
        // lorsque le player commence à se loader, on vérifie à interval régulier que le player est prèt
        this.loadInterval = setInterval(this.checkPlayerLoaded, 250);
      }
    };
     
     
    var loadInterval:Number;
     
     
    function checkPlayerLoaded():Void {
        // une fois que le player est pret nous pouvons charger la vidéo
        if (ytplayer.isPlayerLoaded()) {
            ytplayer.addEventListener("onStateChange", onPlayerStateChange);
            ytplayer.addEventListener("onError", onPlayerError);
            clearInterval(loadInterval);
        }
    }
     
    function onPlayerStateChange(newState:Number) {
        trace("New player state: "+ newState);
    }
     
    function onPlayerError(errorCode:Number) {
        trace("An error occurred: "+ errorCode);
    }
     
    // création d'un MovieClipLoader pour gérer le chargement du player
    var ytPlayerLoader:MovieClipLoader = new MovieClipLoader();
    ytPlayerLoader.addListener(ytPlayerLoaderListener);
     
    //chargement du player
    ytPlayerLoader.loadClip("http://www.youtube.com/v/VIDEO_ID", ytplayer);

    plus d’infos sur la doc : http://code.google.com/apis/youtube/flash_api_reference.html

    voila +++

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *