功能增量与视频同步（或自动增量） [英] function increment sync with video (or auto increment)
问题描述
我正在忙于一个我在炒作上部分创建的webdoc，视频托管在 vimeo 上（所以我需要使用vimeo api像seekto这样的任务）但我的困难应限于js。
I'm busy with a webdoc that I'm partially creating on hype, the video are hosted on vimeo (so I need to use the vimeo api for some tasks like seekto) but my difficulties should be limited to js.
目标是以给定的视频时间间隔显示给定的图像。
使用下面的代码，我会在我的div id = popimgbox中的正确时间获得字符串test，success和确认成功，我可以在视频中来回寻找并仍然获得正确的answear，如果我可以这样说的话。
the objective is to display a given image at a given time interval of the video. With my code below, I do get the string "test", "success" and "confirmed success" at the right time in my div id=popimgbox, and I can seek back and forth in the video and still get the right "answear", if I may say so.
现在，我的图像都存储在同一个文件夹中，所有名称都是popimgX.jpg，带有X是一个数字。
Now, I have images that are all stored in the same folder, and all named popimgX.jpg, with X being a number.
我想
-
来存储网址变量中的我的图像让我们说popimgurl
to store the URLs of my images in a variable let's say "popimgurl"
我的变量被更新（通过函数???）以包含在视频的给定时间间隔内给定immage的URL
that my variable is updated (by a function???) in order to contain the URL of a given immage for a given interval of time of the video
仍然可以在视频中来回寻找并获取正确的URL正确的时间
to still be able seekto back and forth in the video and get the right URL at the right time
为此，我创建了一个函数增量和一对变量。使用下面的代码，我的 popimgurl 变量确实会在视频达到3秒后更新，但它只会增加一次 ...直到视频达到6秒，我想再次更新我的popimgurl变量。
To do so I created a function increment, and a pair of variable. With the code below, my popimgurl variable is indeed updated once the video reach 3 seconds, but it do not increment only once... untill the video reach 6 seconds, when I want to update my popimgurl variable once again.
我尝试将用于 js break 和 > js关闭但是在想到之后没有出于某些可以理解的原因进行管理;
I tried to use for with js break and js closure but did not manage for some understandable reasons after thought;
我做了一些尝试用switch，但我坚持这样的事实：案例必须是字符串或单个数值，而不是数字间隔或比较。
I did quite some try with switch, but I'm stuck with the fact that the case must be string or single numerical value, not numerical interval or comparaison.
提前感谢您的帮助： - ）
thank's in advance for your help :-)
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，我是一个初学者编码员，我尽我所能，如果我的问题没有很好地表达，或者如果答案在某个地方，但是我无法看到/理解它，那么请原谅我的法语
PS1: disclamer, I'm a beginer coder, i do my best so excuse my french if my question isn't well formulated or if the answer is somewhere but I was unable to see/understand it
PS2：我对popcornjs做了很多尝试，但没有办法使它与vimeoapi一起工作并且在炒作中，非常沮丧; - ）
PS2 : i did quite a try with popcornjs, but not way to make it work with vimeoapi and within hype, quite frustrated ;-)
PS3：因为这是我的第一次帖子我要感谢大家的支持;我欠你最多; - ）
PS3: as this is my first post I would like to thank's you all for the great support available here; I owe you most ;-)
推荐答案
最后我会自己回答。
这是一个仅代表vimeo的解决方案，因为这是我用来托管我的视频的内容，但是使用html5 < video> 标签。
It's a solution that only stand for vimeo, as this is what I use to host my videos, but very little changes have to be done to work with the html5 <video> tag as well.
首先，您需要定义变量和间隔：
First you need to define your variables and your intervals:
var intervals =[11.56, 44.08, 115, 125, 127.92, 177.72];
var index;
然后你需要添加一个事件监听器 timeupdate 返回已用时间，根据已用时间 data.seconds 或过滤并将 intrevals 秒 index 的值定义为 indexOf 过滤后数组的最后一个条目 interval
Then you need to add an event listener timeupdate that return the elapsed time , filter intrevals according to the elapsed time data.seconds or seconds and define the value of index as the indexOf the last entry of your filtered array intervals
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
}
就是这样！
现在为
- 秒= [0,11.56 [ - >指数= 0
- 秒= [11.56,44.08 [ - > index = 1
- seconds = [44.08,115 [ - > index = 2
等等
现在我们可以使用 index 作为变量来显示给定的图像：
Now we can use index as a variable for instance to display a given image :
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'>"
};
}
别忘了，你需要调用函数
Don't forget, you need to call the function displayImage() in your timeupdate event listener, it will then be fired every ±250ms but the image won't be reloaded each time
PS：vimeo在我的问题和我的答案之间重新发布了它的新api所以问题使用旧api而答案使用新的api
PS : vimeo has realeased its new api between my question and my answer so the question use the old api while the answer use the new one
这篇关于功能增量与视频同步（或自动增量）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
