resume video play javascript

Question

I'm trying to create a script to do autoplay video (done), to loop video (done), pause video when leave the window (switch to another tab on Chrome, for example, DONE). Now I want to resume playback when I switch back to the tab where the video was paused.

Here's what I got so far:

<!DOCTYPE html> 
<html> 
<body> 

<video id="myVideo" width="320" height="176" controls autoplay loop">
<!--<video id="myVideo" width="320" height="176" controls loop>-->
  <source src="myVideo.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<!--Script para fazer três coisas: carregar vídeo automaticamente, pausar quando trocar de aba e voltar quando clicar de volta e também para fazer loop do vídeo após o término-->
<script>
var vid = document.getElementById("myVideo");
function enableAutoplay() { 
    vid.autoplay = true;
    vid.load();
}

function disableAutoplay() { 
    vid.autoplay = false;
    vid.load();
} 

function checkAutoplay() { 
    alert(vid.autoplay);
} 
</script> 
<script>
document.addEventListener("visibilitychange", onchange);
function onchange (evt) {
   document.getElementById("myVideo").pause();
}
</script> 
<!--Script para fazer três coisas: carregar vídeo automaticamente, pausar quando trocar de aba e voltar quando clicar de volta e também para fazer loop do vídeo após o término -->
<script>
window.addEventListener("visibilitychange", onchange);
function onchange (evt) {
    document.getElementByID("myVideo").onfocus = play();
}
</script>
</body> 
</html>

This may help you: http://stackoverflow.com/a/19519701/978649 — Lucas Franco, Mar 29 '17 at 15:19
I just started learning JS and I've tried this. It didn't work for me. I'd need something like this. Could you help me? — Fran M.W., Mar 29 '17 at 15:32

score 1 · Answer 1 · answered Mar 29 '17 at 15:56

this is working for me, with onfocus and onblur, tested in Chrome, Safari and Firefox:

<!DOCTYPE html> 
<html> 
<body> 

<video id="myVideo" width="320" height="176" controls autoplay loop">
<!--<video id="myVideo" width="320" height="176" controls loop>-->
  <source src="myVideo.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<!--Script para fazer três coisas: carregar vídeo automaticamente, pausar quando trocar de aba e voltar quando clicar de volta e também para fazer loop do vídeo após o término-->
<script>
var vid = document.getElementById("myVideo");
function enableAutoplay() { 
    vid.autoplay = true;
    vid.load();
}

function disableAutoplay() { 
    vid.autoplay = false;
    vid.load();
} 

function checkAutoplay() { 
    //alert(vid.autoplay);
    console.log("checkAutoplay");
} 

</script> 
<script>
// called when the window/tab is shown
window.onfocus = function () { 
    var date1 = new Date();
    console.log("onfocus " + date1 + " play ");
    document.getElementById("myVideo").play();
}; 
// called when the window/tab is hidden
window.onblur = function () { 
    var date1 = new Date();
    console.log("onblur " + date1 + " pause ");
    document.getElementById("myVideo").pause();
};
</script> 
</body> 
</html>

resume video play javascript

1 Answers1