2017-03-29 6 views
1

私は、自動再生ビデオを行う(終了)、ビデオをループする(終了)、ウィンドウを離れるときにビデオを一時停止する(Chromeの別のタブに切り替える、例えば完了)スクリプトを作成しようとしています。今度は、ビデオが一時停止したタブに戻ったときに再生を再開したいです。ここでレジュームビデオ再生javascript

は、私がこれまでに得たものです:

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

これはあなたを助けることがあります。http: //stackoverflow.com/a/19519701/978649 –

+0

私はJSを学び始めました。私はこれを試しました。それは私のために働かなかった。私はこのようなものが必要です。私たちを手伝ってくれますか?

+0

本当にあなたを迷惑して申し訳ありません。 –

答えて

1

これはクロム、SafariやFirefoxでテストされ、ONFOCUSとのonblurで、私のために働いている:

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

WOW!ありがとうございました!それはうまくいった! –

+0

素晴らしい、あなたは歓迎です – WeHumLove

関連する問題