seekbar fonctionnel dans un player flv

seekbar fonctionnel dans un player flv - Flash/ActionScript - Programmation

Marsh Posté le 14-06-2009 à 22:52:12    

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" );
  8. this.createTextField("loaded_txt", this.getNextHighestDepth(), 10, 10, 1200, 22);
  9. loaded_txt.textColor="0xFFFFFF";
  13. var myformat:TextFormat = new TextFormat();
  14. myformat.font = "Verdana";
  15. myformat.size = 9 ;
  16. myformat.letterSpacing = 10;
  21. this.createEmptyMovieClip("progressBar_mc", this.getNextHighestDepth());
  22. progressBar_mc.createEmptyMovieClip("bar_mc", progressBar_mc.getNextHighestDepth());
  23. with (progressBar_mc.bar_mc) {
  24.     beginFill(0xFFFFFF);
  25.     moveTo(57,725);
  26.     lineTo(1223, 725);
  27.     lineTo(1223, 740);
  28.     lineTo(0, 740);
  29.     lineTo(0, 725);
  30.     endFill();
  31.     _xscale = 0;
  32. _x = 57;
  33. }
  34. progressBar_mc.createEmptyMovieClip("stroke_mc", progressBar_mc.getNextHighestDepth());
  35. progressBar_mc.createEmptyMovieClip("stroke_mc2", progressBar_mc.getNextHighestDepth());
  36. with (progressBar_mc.stroke_mc) {
  37.     lineStyle(0, 0xFFFFFF);
  38.     moveTo(57, 725);
  39.     lineTo(57, 740);
  40.     lineTo(57, 725);
  41. }
  42. with (progressBar_mc.stroke_mc2) {
  43.     lineStyle(0, 0xFFFFFF);
  44.     moveTo(1280, 725);
  45.     lineTo(1280, 725);
  46.     lineTo(1280, 740);
  47. }
  49. var loaded_interval:Number = setInterval(checkBytesLoaded, 500, netStream);
  50. function checkBytesLoaded(my_ns:NetStream) {
  51.     var pctLoaded:Number = Math.round(my_ns.bytesLoaded/my_ns.bytesTotal*100);
  52.     loaded_txt.text = Math.round(my_ns.bytesLoaded/1000)+" of "+Math.round(my_ns.bytesTotal/1000)+" KB loaded ("+pctLoaded+"%)";
  53. loaded_txt.setTextFormat(myformat);
  54.     progressBar_mc.bar_mc._xscale = pctLoaded;
  55.     if (pctLoaded>=100) {
  56.     clearInterval(loaded_interval);
  57.     }
  58. }
  61. btn_l.onRelease = function()  {
  62. netStream.pause();
  63. };
  65. btn_a.onRelease = function()
  66. {
  67. netStream.play("" );
  68. gotoAndStop(1);
  69. };


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

Reply

Marsh Posté le 14-06-2009 à 22:52:12   

Reply

Marsh Posté le 19-06-2009 à 10:28:28    

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
Reply

Marsh Posté le 19-06-2009 à 13:29:16    

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


 
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 ?

Reply

Marsh Posté le 19-06-2009 à 15:52:55    

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
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed