恢复视频播放javascript

时间:2017-03-29 15:12:34

标签: javascript video

我正在尝试创建一个脚本来执行自动播放视频(完成),循环播放视频(完成),在离开窗口时暂停视频(切换到Chrome上的另一个标签,例如,DONE)。现在,当我切换回视频暂停的标签时,我想恢复播放。

这是我到目前为止所得到的:

<!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>

1 个答案:

答案 0 :(得分:1)

这对我有用,onfocus和onblur,在Chrome,Safari和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>