Eu tenho uma página com uma barra de progresso de 20 segundos e um vídeo, e quero que a animação da barra de progresso comece quando eu reproduzir o vídeo. e eu quero ambos, vídeo e barra de progresso, fazer uma pausa quando eu mudar de guia
HTML
<div id = “progressBar”> <div> </div> </div>
<iframe class = “embed-responsive-item” src = ” https://www.youtube.com/embed/T3q_s_mdeZY&enablejsapi=1&autoplay=0&showinfo=0&controls=0 ” frameborder = “0” allowfullscreen> </iframe>
Eu tentei este código abaixo, mas nenhuma mudança
JavaScript
jQuery (function ($) {
function handleVisibilityChange () {
if (document [hidden]) {
myvideo.pause ();
} else {
myvideo.play ();
função progress (timeleft, timeotal, $ element) {
var progressBarWidth = timeleft * $ element.width () /timotal;
$ element.find (‘div’). animate ({width: progressBarWidth}, timeleft == weatherotal? 0: 1000, ‘linear’). html (timeleft + “sec”) ;
if (timeleft> 0) {
setTimeout (function () {
progress (timeleft – 1, hora total, $ element);
}, 1000);
} else {
$ (‘# progressBar’). replaceWith (‘<button id = “buttonProgressBar”> Passez à l ‘ étape suivante <i class = “fa fa-fast-forward” aria-hidden = “true”> </i> </button> ‘)
}
};
progresso (20, 20, $ (‘# progressBar’));
}
}
});