Synchronisation d'incrément de fonction avec la vidéo (ou l'augmentation automatique)

Je suis occupé avec un webdoc que je crée partiellement sur le battage médiatique , la vidéo est hébergée sur vimeo (donc j'ai besoin d'utiliser vimeo api pour certaines tâches comme seekto) mais mes difficultés devraient être limitées à js.

L'objectif est d' afficher une image donnée à un intervalle de temps donné de la vidéo . Avec mon code ci-dessous, je reçois la chaîne "test", "succès" et "succès confirmé" au bon moment dans mon div id = popimgbox, et je peux chercher et aller de l'avant dans la vidéo et toujours avoir le bon "answear ", Si je peux le dire.

Maintenant, j'ai des images qui sont toutes stockées dans le même dossier, et toutes nommées popimgX.jpg, X étant un nombre.

je veux

  • Pour stocker les URL de mes images dans une variable disons "popimgurl"

  • Que ma variable est mise à jour (par une fonction ???) afin de contenir l'URL d'un immage donné pour un intervalle de temps donné de la vidéo

  • Pour toujours pouvoir chercher et aller de l'avant dans la vidéo et obtenir la bonne URL au bon moment

Pour ce faire, j'ai créé une incrément de fonction et une paire de variables. Avec le code ci-dessous, ma variable popimgurl est effectivement mise à jour une fois que la vidéo atteint 3 secondes, mais elle ne s'imprime qu'une seule fois … jusqu'à ce que la vidéo atteigne 6 secondes, lorsque je souhaite actualiser ma variable popimgurl une fois de plus.

J'ai essayé d'utiliser avec js break et js fermeture, mais n'a pas réussi pour des raisons compréhensibles après la pensée;

J'ai fait un certain essai avec le commutateur, mais je suis coincé avec le fait que le cas doit être une chaîne ou une valeur numérique unique, pas un intervalle ni une comparaison numérique.

Merci d'avance pour votre aide 🙂

var iframe = $('#vplayer_1')[0]; var player = $f(iframe); var status = $('.status'); fired = 0; //my try to sync increment var dia = (function () { var n = 0; return function increment() {return n += 1;} })(); function dian(){ popimgurl = '${resourcesFolderName}/popimg'+ dia() +'.jpg'; popimgloader = '<img src ="' + popimgurl + '">'; } // When the player is ready, add listeners for pause, finish, and playProgress player.addEvent('ready', function() { status.text('ready'); player.addEvent('pause', onPause); player.addEvent('finish', onFinish); player.addEvent('playProgress', onPlayProgress); }); // Call the API when a button is pressed $('button').bind('click', function() { player.api($(this).text().toLowerCase()); }); function onPause(id) { status.text('paused'); } function onFinish(id) { status.text('finished'); } function onPlayProgress(data, id) { status.text(data.seconds + 's played'); //my chapters, when I want the img to change within popimgbox if (data.seconds >= 1) { popimgbox.innerHTML = "test"; } if (data.seconds >= 3) { // popimgbox.style.display = "success" dian(); popimgbox.innerHTML = popimgurl; } if (data.seconds >= 6) { // popimgbox.style.display = "confirmed success" dian(); popimgbox.innerHTML = popimgurl; } } 

PS1: disclamer, je suis un codeur de débutant, je fais de mon mieux, excusez-moi si ma question n'est pas bien formulée ou si la réponse est quelque part, mais je n'ai pas pu le comprendre

PS2: j'ai essayé avec popcornjs, mais pas le moyen de le faire fonctionner avec vimeoapi et à la hype, assez frustré 😉

PS3: comme il s'agit de mon premier post, je tiens à vous remercier pour le soutien idéal disponible ici; Je te dois le plus 😉

Enfin, je vais me répondre.

C'est une solution qui ne signifie que pour vimeo, car c'est ce que j'utilise pour héberger mes vidéos, mais il faut faire très peu de modifications pour travailler avec la <video> html5 <video> .

D'abord, vous devez définir vos variables et vos intervalles:

 var intervals =[11.56, 44.08, 115, 125, 127.92, 177.72]; var index; 

Ensuite, vous devez ajouter un événement timeupdate qui retourne le temps écoulé, filtre les intrevals fonction des données de temps écoulées. data.seconds ou seconds et définissez la valeur de l' index comme indexOf la dernière entrée de vos intervals filtrés

 player.on('timeupdate', function(data) { seconds = data.seconds; index = intervals.indexOf(intervals.filter(function(nb) { return seconds < nb; })[0]); if (diaIndex == -1) { // do something if seconds > the higher value of your last interval } 

Et c'est tout !

Maintenant pour

  • Secondes = [0, 11,56 [-> index = 0
  • Secondes = [11.56, 44.08 [-> index = 1
  • Secondes = [44.08, 115 [-> index = 2

etc


Maintenant, nous pouvons utiliser l' index comme variable par exemple pour afficher une image donnée:

 var imgNum = 0; function diaplayImg(index) { if(index === imgNum) { return; // this will avoid that the same image is releaded on every timeupdate events } else { imgNum =+ index document.getElementById('myImageWraper').innerHTML = "<img src='img" + imgNum+ ".png'>" }; } 

N'oubliez pas, vous devez appeler la fonction displayImage() dans votre timeupdate événement timeupdate , il sera alors mis à feu chaque ± 250 ms mais l'image ne sera pas rechargée à chaque fois

PS: vimeo a réussi son nouvel api entre ma question et ma réponse, alors la question utilise l'ancien api alors que la réponse utilise la nouvelle