seekbar fonctionnel dans un player flv

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : seekbar fonctionnel dans un player flv

crasse2

bonsoir toutes et tous,

je suis en train de créer mon site, et dans un souci ,d'homogénéité je me suis aussi créé un player flash pour mes video (car les player standards n'etaient pas top visuellement), il est quasiment fini, fonctionne deja en parti, mais je n'arrive pas a rendre la seekbar fonctionnelle (en gros pouvoir saisir la tete de lecture et la deplacer pour se rendre a différent passage de la video, fonction utile lorsque le chargement est moins rapîde que la lecture, d'autant plus que j'host mes video en 720p, donc c'est assez souvent le cas, et la seule solution présentement dans ce cas est de revenir au debut de la video en faisant stop ou d'attendre que ça se charger en mettant pause)

bref pour faire simple je n'arrive pas a afficher la tete de lecture sur ma barre de chargement (le solide blanc sous la video) et encore moins a la rendre deplaçable.

voici mon script :

Code :

var netConn:NetConnection= new NetConnection();
netConn.connect(null);
var netStream:NetStream = new NetStream(netConn);
maVideo.attachVideo(netStream);
netStream.setBufferTime(20);
netStream.play("http://www.quart-avant-poing.com/vo/trailer_demx_b.mp4" );
this.createTextField("loaded_txt", this.getNextHighestDepth(), 10, 10, 1200, 22);
loaded_txt.textColor="0xFFFFFF";
var myformat:TextFormat = new TextFormat();
myformat.font = "Verdana";
myformat.size = 9 ;
myformat.letterSpacing = 10;
this.createEmptyMovieClip("progressBar_mc", this.getNextHighestDepth());
progressBar_mc.createEmptyMovieClip("bar_mc", progressBar_mc.getNextHighestDepth());
with (progressBar_mc.bar_mc) {
beginFill(0xFFFFFF);
moveTo(57,725);
lineTo(1223, 725);
lineTo(1223, 740);
lineTo(0, 740);
lineTo(0, 725);
endFill();
_xscale = 0;
_x = 57;
}
progressBar_mc.createEmptyMovieClip("stroke_mc", progressBar_mc.getNextHighestDepth());
progressBar_mc.createEmptyMovieClip("stroke_mc2", progressBar_mc.getNextHighestDepth());
with (progressBar_mc.stroke_mc) {
lineStyle(0, 0xFFFFFF);
moveTo(57, 725);
lineTo(57, 740);
lineTo(57, 725);
}
with (progressBar_mc.stroke_mc2) {
lineStyle(0, 0xFFFFFF);
moveTo(1280, 725);
lineTo(1280, 725);
lineTo(1280, 740);
}
var loaded_interval:Number = setInterval(checkBytesLoaded, 500, netStream);
function checkBytesLoaded(my_ns:NetStream) {
var pctLoaded:Number = Math.round(my_ns.bytesLoaded/my_ns.bytesTotal*100);
loaded_txt.text = Math.round(my_ns.bytesLoaded/1000)+" of "+Math.round(my_ns.bytesTotal/1000)+" KB loaded ("+pctLoaded+"%)";
loaded_txt.setTextFormat(myformat);
progressBar_mc.bar_mc._xscale = pctLoaded;
if (pctLoaded>=100) {
clearInterval(loaded_interval);
}
}
btn_l.onRelease = function() {
netStream.pause();
};
btn_a.onRelease = function()
{
netStream.play("" );
gotoAndStop(1);
};

et le player tel qu'il est actuellement pour exemple :

http://www.quart-avant-poing.com/trailer.html

si quelqu'un avait une idée de comment generer une tete de lecture et la rendre deplaçable a la souris (comme sur la plupart des player actuellement) ce serait sympa de m'en faire part

Publicité

Zedlefou

In cabbage we trust !

Voici un exemple de ce que tu peux faire. C'est déjà une base.
Copie colle dans un nouveau fichier et regarde comment ça marche. Ensuite c'est à toi de l'adapter en fonction de tes besoins. Si t'as des questions n'hésite pas.

Code :

var large = 550; // largeur de la bar
var video = 200; // Durée de la vidéo en secondes
//
// place tout de suite ton clip, c'est plus propre. comme ça tu peux bosser de zéro ensuite
var pb = this.createEmptyMovieClip("progressBar_mc", this.getNextHighestDepth());
pb._x = 57;
pb._y = 300;
// Ca c'est le fond. C'est pas indispensable, juste pour que ce soit plus clair.
var barbg = pb.createEmptyMovieClip("barbg_mc", pb.getNextHighestDepth());
barbg.beginFill(0xFFFFFF, 20);
barbg.moveTo(0, 0);
barbg.lineTo(large, 0);
barbg.lineTo(large, 15);
barbg.lineTo(0, 15);
barbg.lineTo(0, 0);
barbg.endFill();
barbg._xscale = 100;
// ta barre de progression
var bar = pb.createEmptyMovieClip("bar_mc", pb.getNextHighestDepth());
bar.beginFill(0xFFFFFF);
bar.moveTo(0, 0);
bar.lineTo(large, 0);
bar.lineTo(large, 15);
bar.lineTo(0, 15);
bar.lineTo(0, 0);
bar.endFill();
bar._xscale = 0;
// La tête de lecture
var tete:MovieClip = pb.createEmptyMovieClip("stroke_mc", pb.getNextHighestDepth());
tete.beginFill(0xffcc00);
tete.moveTo(0, 0);
tete.lineTo(0, 15);
tete.lineTo(5, 15);
tete.lineTo(5, 0);
tete.lineTo(0, 0);
tete.endFill();
tete.onPress = function() {
    // Tu limites les mouvement de ta tête pour pas qu'elle se balade.
    this.startDrag(false,large,0);
};
tete.onRelease = tete.onReleaseOutside = function() {
    this.stopDrag();
    //  Quand on relache, on envoit la position de la tête à une fonction
    changeVideo(this._x);
};
function changeVideo(coord) {
    var res = Math.round((coord*100) / large);
    trace(res + "% de la vidéo, soit :"+ (video*res)/100+"sec" );
    bar._xscale = res;
}

---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks

crasse2

super ! merci pour ton aide !

bon bein grace a ça j'y suis presque, voila ou ça en est :

Code :

var netConn:NetConnection= new NetConnection();
netConn.connect(null);
var netStream:NetStream = new NetStream(netConn);
maVideo.attachVideo(netStream);
netStream.setBufferTime(10);
netStream.play("http://www.quart-avant-poing.com/video/war_111111.avi.FLV" );
this.createTextField("loaded_txt", this.getNextHighestDepth(), 10, 10, 1200, 22);
loaded_txt.textColor="0xFFFFFF";
this.createTextField("tete", this.getNextHighestDepth(), 10, 10, 1200, 22);
tete.textColor="0xFF0000";
var myformat:TextFormat = new TextFormat();
myformat.font = "Verdana";
myformat.size = 9 ;
myformat.letterSpacing = 10;
var large = 1223; // largeur de la bar
var video = 49; // Durée de la vidéo en secondes
var pb = this.createEmptyMovieClip("progressBar_mc", this.getNextHighestDepth());
pb._x = 57;
pb._y = 725;
this.createEmptyMovieClip("progressBar_mc", this.getNextHighestDepth());
progressBar_mc.createEmptyMovieClip("bar_mc", progressBar_mc.getNextHighestDepth());
with (progressBar_mc.bar_mc) {
beginFill(0xFFFFFF);
moveTo(0,0);
lineTo(0, 15);
lineTo(1223, 15);
lineTo(1223, 0);
lineTo(0, 0);
endFill();
_xscale = 0;
}
progressBar_mc.createEmptyMovieClip("stroke_mc", progressBar_mc.getNextHighestDepth());
progressBar_mc.createEmptyMovieClip("stroke_mc2", progressBar_mc.getNextHighestDepth());
with (progressBar_mc.stroke_mc) {
lineStyle(0, 0xFFFFFF);
moveTo(0, 0);
lineTo(0, 15);
lineTo(0, 0);
}
with (progressBar_mc.stroke_mc2) {
lineStyle(0, 0xFFFFFF);
moveTo(1223, 0);
lineTo(1223, 0);
lineTo(1223, 15);
}
var tete:MovieClip = pb.createEmptyMovieClip("stroke_mc", pb.getNextHighestDepth());
tete.beginFill(0xff0000);
tete.moveTo(0, 0);
tete.lineTo(0, 15);
tete.lineTo(5, 15);
tete.lineTo(5, 0);
tete.lineTo(0, 0);
tete.endFill();
tete.onPress = function() {
// Tu limites les mouvement de ta tête pour pas qu'elle se balade.
this.startDrag(false,large,0);
};
tete.onRelease = tete.onReleaseOutside = function() {
this.stopDrag();
// Quand on relache, on envoit la position de la tête à une fonction
changeVideo(this._x);
};
function changeVideo(coord) {
var res = Math.round((coord*100) / large);
tete.text = Math.round((coord*100) / large) + "% de la vidéo, soit :"+ (video*res)/100+"sec" ;
tete.setTextFormat(myformat);
var tps = (video*res)/100;
bar_mc._xscale = res;
netStream.seek(tps);
}
var loaded_interval:Number = setInterval(checkBytesLoaded, 500, netStream);
function checkBytesLoaded(my_ns:NetStream) {
var pctLoaded:Number = Math.round(my_ns.bytesLoaded/my_ns.bytesTotal*100);
loaded_txt.text = Math.round(my_ns.bytesLoaded/1000)+" of "+Math.round(my_ns.bytesTotal/1000)+" KB loaded ("+pctLoaded+"%)";
loaded_txt.setTextFormat(myformat);
progressBar_mc.bar_mc._xscale = pctLoaded;
if (pctLoaded>=100) {
clearInterval(loaded_interval);
}
}
btn_l.onRelease = function() {
netStream.pause();
};
btn_a.onRelease = function()
{
netStream.play("" );
gotoAndStop(1);
};

j'ai effectivement deplacé mon clip des le depart, donc c'est plus propre effectivement au niveau des coordonnées, j'ai aussi rajouté la fonction "seek" pour que la tete de lecture remplisse pleinement sa fonction lorsqu'elle est deplacée (la video reprend sa lecture au niveau de la noouvelle position de la tete); reste juste un petit truc pour parfaire l'ensemble :
je n'arrive pas a caller la tete de lecture sur la progression de la lecture de la video, donc je peux la deplacer, mais lorsque que je la lache, elle reste immobile, or ce serait chouette qu'elle se remette a avancer au meme rythme que la video.

saurais-tu comment y parvenir ?

Zedlefou

In cabbage we trust !

Je ne connais pas la meilleur méthode, mais soit avec un onEnterFrame soit avec un gestionnaire d'événement dispo dans la classe video.

---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks

FORUM HardWare.fr

Programmation

Flash/ActionScript

seekbar fonctionnel dans un player flv

Sujets relatifs
probleme avec creation d'un player flv	problème lors publication en mode Flash Player 8
UPDATE Fonctionnel sur Easy php en local mais pas en ligne	Afficher le Timecode d'un Quicktime dans un flash player
player video, javascript + flash	[FLASH] Player Flash mp3 avec playlist m3u
Player vidéo en java	Player WEB pour vidéo au format MP4
Player mp3 en flash problème help !	Compatibilité Flash Player ActiveX
Plus de sujets relatifs à : seekbar fonctionnel dans un player flv

Page générée en 0.096 secondes