sincronização de incremento de função com vídeo (ou incremento automático)
Estou ocupado com um webdoc que estou criando parcialmentehype, o vídeo está hospedado emvimeo (então eu preciso usar o vimeo api para algumas tarefas como seekto), mas minhas dificuldades devem ser limitadas a js.
o objetivo éexibir uma determinada imagem em um determinado intervalo de tempo do vídeo. Com o meu código abaixo, recebo a string "test", "success" e "confirmou sucesso" no momento certo em meu div id = popimgbox, e posso procurar o vídeo e ainda assim obter a resposta certa ", se assim posso dizer.
Agora, tenho imagens armazenadas na mesma pasta e todas nomeadas popimgX.jpg, com X sendo um número.
eu quero
para armazenar os URLs das minhas imagens em uma variável, digamos "popimgurl"
que minha variável é atualizada (por uma função ???) para conter o URL de uma determinada imagem por um determinado intervalo de tempo do vídeo
ainda poder procurar e voltar no vídeo e obter o URL certo na hora certa
Para isso, criei um incremento de função e um par de variáveis. Com o código abaixo, meupopimgurl A variável é realmente atualizada quando o vídeo chega a 3 segundos, masnão incrementa apenas uma vez... até que o vídeo atinja 6 segundos, quando eu quiser atualizar minha variável popimgurl novamente.
Eu tentei usarpara comjs quebra ejs encerramento mas não conseguiu por alguns motivos compreensíveis após reflexão;
Eu tentei bastante com o switch, mas estou preso ao fato de que o caso deve ser string ou valor numérico único, não intervalo numérico ou comparação.
Agradeço antecipadamente por sua ajuda :-)
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, eu sou um programador iniciante, faço o meu melhor, desculpe meu francês se minha pergunta não for bem formulada ou se a resposta estiver em algum lugar, mas eu não consegui entender / entender
PS2: eu tentei bastante com popcornjs, mas não há maneira de fazê-lo funcionar com vimeoapi e dentro do hype, bastante frustrado ;-)
PS3: como este é o meu primeiro post, gostaria de agradecer a todos pelo excelente suporte disponível aqui; Eu te devo mais ;-)