我正在尝试创建一个脚本来执行自动播放视频(完成),循环播放视频(完成),在离开窗口时暂停视频(切换到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>
答案 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>