reproduzir / pausar a barra de progresso e um vídeo ao mesmo tempo ao alternar entre as guias

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’));
}
}
});