Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
930 connectés 

  FORUM HardWare.fr
  Programmation
  Flash/ActionScript

  seekbar fonctionnel dans un player flv

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

seekbar fonctionnel dans un player flv

n°1894990
crasse2
Posté le 14-06-2009 à 22:52:12  profilanswer
 

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 :
  1. var netConn:NetConnection= new NetConnection();
  2. netConn.connect(null);
  3. var netStream:NetStream = new NetStream(netConn);
  4. maVideo.attachVideo(netStream);
  5. netStream.setBufferTime(20);
  6. netStream.play("http://www.quart-avant-poing.com/vo/trailer_demx_b.mp4" );
  7. this.createTextField("loaded_txt", this.getNextHighestDepth(), 10, 10, 1200, 22);
  8. loaded_txt.textColor="0xFFFFFF";
  9. var myformat:TextFormat = new TextFormat();
  10. myformat.font = "Verdana";
  11. myformat.size = 9 ;
  12. myformat.letterSpacing = 10;
  13. this.createEmptyMovieClip("progressBar_mc", this.getNextHighestDepth());
  14. progressBar_mc.createEmptyMovieClip("bar_mc", progressBar_mc.getNextHighestDepth());
  15. with (progressBar_mc.bar_mc) {
  16.     beginFill(0xFFFFFF);
  17.     moveTo(57,725);
  18.     lineTo(1223, 725);
  19.     lineTo(1223, 740);
  20.     lineTo(0, 740);
  21.     lineTo(0, 725);
  22.     endFill();
  23.     _xscale = 0;
  24. _x = 57;
  25. }
  26. progressBar_mc.createEmptyMovieClip("stroke_mc", progressBar_mc.getNextHighestDepth());
  27. progressBar_mc.createEmptyMovieClip("stroke_mc2", progressBar_mc.getNextHighestDepth());
  28. with (progressBar_mc.stroke_mc) {
  29.     lineStyle(0, 0xFFFFFF);
  30.     moveTo(57, 725);
  31.     lineTo(57, 740);
  32.     lineTo(57, 725);
  33. }
  34. with (progressBar_mc.stroke_mc2) {
  35.     lineStyle(0, 0xFFFFFF);
  36.     moveTo(1280, 725);
  37.     lineTo(1280, 725);
  38.     lineTo(1280, 740);
  39. }
  40. var loaded_interval:Number = setInterval(checkBytesLoaded, 500, netStream);
  41. function checkBytesLoaded(my_ns:NetStream) {
  42.     var pctLoaded:Number = Math.round(my_ns.bytesLoaded/my_ns.bytesTotal*100);
  43.     loaded_txt.text = Math.round(my_ns.bytesLoaded/1000)+" of "+Math.round(my_ns.bytesTotal/1000)+" KB loaded ("+pctLoaded+"%)";
  44. loaded_txt.setTextFormat(myformat);
  45.     progressBar_mc.bar_mc._xscale = pctLoaded;
  46.     if (pctLoaded>=100) {
  47.     clearInterval(loaded_interval);
  48.     }
  49. }
  50. btn_l.onRelease = function()  {
  51. netStream.pause();
  52. };
  53. btn_a.onRelease = function()
  54. {
  55. netStream.play("" );
  56. gotoAndStop(1);
  57. };


 
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 :)

mood
Publicité
Posté le 14-06-2009 à 22:52:12  profilanswer
 

n°1896844
Zedlefou
In cabbage we trust !
Posté le 19-06-2009 à 10:28:28  profilanswer
 

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 :
  1. var large = 550; // largeur de la bar
  2. var video = 200; // Durée de la vidéo en secondes
  3. //
  4. // place tout de suite ton clip, c'est plus propre. comme ça tu peux bosser de zéro ensuite
  5. var pb = this.createEmptyMovieClip("progressBar_mc", this.getNextHighestDepth());
  6. pb._x = 57;
  7. pb._y = 300;
  8. // Ca c'est le fond. C'est pas indispensable, juste pour que ce soit plus clair.
  9. var barbg = pb.createEmptyMovieClip("barbg_mc", pb.getNextHighestDepth());
  10. barbg.beginFill(0xFFFFFF, 20);
  11. barbg.moveTo(0, 0);
  12. barbg.lineTo(large, 0);
  13. barbg.lineTo(large, 15);
  14. barbg.lineTo(0, 15);
  15. barbg.lineTo(0, 0);
  16. barbg.endFill();
  17. barbg._xscale = 100;
  18. // ta barre de progression
  19. var bar = pb.createEmptyMovieClip("bar_mc", pb.getNextHighestDepth());
  20. bar.beginFill(0xFFFFFF);
  21. bar.moveTo(0, 0);
  22. bar.lineTo(large, 0);
  23. bar.lineTo(large, 15);
  24. bar.lineTo(0, 15);
  25. bar.lineTo(0, 0);
  26. bar.endFill();
  27. bar._xscale = 0;
  28. // La tête de lecture
  29. var tete:MovieClip = pb.createEmptyMovieClip("stroke_mc", pb.getNextHighestDepth());
  30. tete.beginFill(0xffcc00);
  31. tete.moveTo(0, 0);
  32. tete.lineTo(0, 15);
  33. tete.lineTo(5, 15);
  34. tete.lineTo(5, 0);
  35. tete.lineTo(0, 0);
  36. tete.endFill();
  37. tete.onPress = function() {
  38.     // Tu limites les mouvement de ta tête pour pas qu'elle se balade.
  39.     this.startDrag(false,large,0);
  40. };
  41. tete.onRelease = tete.onReleaseOutside = function() {
  42.     this.stopDrag();
  43.     //  Quand on relache, on envoit la position de la tête à une fonction
  44.     changeVideo(this._x);
  45. };
  46. function changeVideo(coord) {
  47.     var res = Math.round((coord*100) / large);
  48.     trace(res + "% de la vidéo, soit :"+ (video*res)/100+"sec" );
  49.     bar._xscale = res;
  50. }



---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks
n°1896923
crasse2
Posté le 19-06-2009 à 13:29:16  profilanswer
 

super ! merci pour ton aide ! :D
 
bon bein grace a ça j'y suis presque, voila ou ça en est :
 

Code :
  1. var netConn:NetConnection= new NetConnection();
  2. netConn.connect(null);
  3. var netStream:NetStream = new NetStream(netConn);
  4. maVideo.attachVideo(netStream);
  5. netStream.setBufferTime(10);
  6. netStream.play("http://www.quart-avant-poing.com/video/war_111111.avi.FLV" );
  7. this.createTextField("loaded_txt", this.getNextHighestDepth(), 10, 10, 1200, 22);
  8. loaded_txt.textColor="0xFFFFFF";
  9. this.createTextField("tete", this.getNextHighestDepth(), 10, 10, 1200, 22);
  10. tete.textColor="0xFF0000";
  11. var myformat:TextFormat = new TextFormat();
  12. myformat.font = "Verdana";
  13. myformat.size = 9 ;
  14. myformat.letterSpacing = 10;
  15. var large = 1223; // largeur de la bar
  16. var video = 49; // Durée de la vidéo en secondes
  17. var pb = this.createEmptyMovieClip("progressBar_mc", this.getNextHighestDepth());
  18. pb._x = 57;
  19. pb._y = 725;
  20. this.createEmptyMovieClip("progressBar_mc", this.getNextHighestDepth());
  21. progressBar_mc.createEmptyMovieClip("bar_mc", progressBar_mc.getNextHighestDepth());
  22. with (progressBar_mc.bar_mc) {
  23.     beginFill(0xFFFFFF);
  24.     moveTo(0,0);
  25.     lineTo(0, 15);
  26.     lineTo(1223, 15);
  27.     lineTo(1223, 0);
  28.     lineTo(0, 0);
  29.     endFill();
  30.     _xscale = 0;
  31. }
  32. progressBar_mc.createEmptyMovieClip("stroke_mc", progressBar_mc.getNextHighestDepth());
  33. progressBar_mc.createEmptyMovieClip("stroke_mc2", progressBar_mc.getNextHighestDepth());
  34. with (progressBar_mc.stroke_mc) {
  35.     lineStyle(0, 0xFFFFFF);
  36.     moveTo(0, 0);
  37.     lineTo(0, 15);
  38.     lineTo(0, 0);
  39. }
  40. with (progressBar_mc.stroke_mc2) {
  41.     lineStyle(0, 0xFFFFFF);
  42.     moveTo(1223, 0);
  43.     lineTo(1223, 0);
  44.     lineTo(1223, 15);
  45. }
  46. var tete:MovieClip = pb.createEmptyMovieClip("stroke_mc", pb.getNextHighestDepth());
  47. tete.beginFill(0xff0000);
  48. tete.moveTo(0, 0);
  49. tete.lineTo(0, 15);
  50. tete.lineTo(5, 15);
  51. tete.lineTo(5, 0);
  52. tete.lineTo(0, 0);
  53. tete.endFill();
  54. tete.onPress = function() {
  55.     // Tu limites les mouvement de ta tête pour pas qu'elle se balade.
  56.     this.startDrag(false,large,0);
  57. };
  58. tete.onRelease = tete.onReleaseOutside = function() {
  59.     this.stopDrag();
  60.     //  Quand on relache, on envoit la position de la tête à une fonction
  61.     changeVideo(this._x);
  62. };
  63. function changeVideo(coord) {
  64.     var res = Math.round((coord*100) / large);
  65.     tete.text = Math.round((coord*100) / large) + "% de la vidéo, soit :"+ (video*res)/100+"sec" ;
  66. tete.setTextFormat(myformat);
  67. var tps = (video*res)/100;
  68.     bar_mc._xscale = res;
  69. netStream.seek(tps);
  70. }
  71. var loaded_interval:Number = setInterval(checkBytesLoaded, 500, netStream);
  72. function checkBytesLoaded(my_ns:NetStream) {
  73.     var pctLoaded:Number = Math.round(my_ns.bytesLoaded/my_ns.bytesTotal*100);
  74.     loaded_txt.text = Math.round(my_ns.bytesLoaded/1000)+" of "+Math.round(my_ns.bytesTotal/1000)+" KB loaded ("+pctLoaded+"%)";
  75. loaded_txt.setTextFormat(myformat);
  76.     progressBar_mc.bar_mc._xscale = pctLoaded;
  77.     if (pctLoaded>=100) {
  78.     clearInterval(loaded_interval);
  79.     }
  80. }
  81. btn_l.onRelease = function()  {
  82. netStream.pause();
  83. };
  84. btn_a.onRelease = function()
  85. {
  86. netStream.play("" );
  87. gotoAndStop(1);
  88. };


 
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 ?

n°1896998
Zedlefou
In cabbage we trust !
Posté le 19-06-2009 à 15:52:55  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Flash/ActionScript

  seekbar fonctionnel dans un player flv

 

Sujets relatifs
probleme avec creation d'un player flvproblème lors publication en mode Flash Player 8
UPDATE Fonctionnel sur Easy php en local mais pas en ligneAfficher le Timecode d'un Quicktime dans un flash player
player video, javascript + flash[FLASH] Player Flash mp3 avec playlist m3u
Player vidéo en javaPlayer 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


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR