ウィンドウが最小化されたときのHTMLビデオの一時停止

ビデオを含むHTMLファイルがあります。ウィンドウを最小化したり、ブラウザでタブを変更したりすると、ビデオを一時停止する機能を追加したいと思います。ウィンドウが最小化されたときのHTMLビデオの一時停止

どうすればその機能を自分のhtmlに追加できますか？

私はjavascriptの機能を追加しましたが、ビデオはまだ任意の条件

編集中に再生されている：私のコードを共有します。

<!DOCTYPE html> 
<html> 
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> 



<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Untitled 1</title> 
</head> 
<body> 

<video id="videoPlayer" width="640" height="480" position="center" controls> 
    <source src="\\TEKPC1366\Users\BerkayS\Desktop\DataModel2\DataModel3\DataModelYazisiz.mp4" type="video/mp4" /> 
    <source src="\\TEKPC1366\Users\BerkayS\Desktop\DataModel2\DataModel3\DataModelYazisiz.mp4.webm" type="video/webm" /> 
    <track src="C:\Users\BerkayS\Desktop\DataModel2\DataModel3\deneme.vtt" kind="subtitles" srclang="tu" label="Türkçe" /> 
    <track src="C:\Users\BerkayS\Desktop\DataModel2\DataModel3\denemeenglish.vtt" kind="subtitles" srclang="en" label="English" /> 
    <track src="C:\Users\BerkayS\Desktop\DataModel2\DataModel3\denemedeutsch.vtt" kind="subtitles" srclang="de" label="Deutsch" /> 
    <track src="C:\Users\BerkayS\Desktop\DataModel2\DataModel3\denemespanish.vtt" kind="subtitles" srclang="es" label="Espanol" /> 
    <track src="C:\Users\BerkayS\Desktop\DataModel2\DataModel3\denemerussian.vtt" kind="subtitles" srclang="ru" label="русский" /> 
    <track src="C:\Users\BerkayS\Desktop\DataModel2\DataModel3\denemearabic.vtt" kind="subtitles" srclang="ar" label="العربية" /> 

</video> 


    <script 
window.onfocus = function() {kaf()}; 
window.onblur = function() {kef()}; 

function kaf() { 
document.getElementById('videoPlayer').play(); 

} 

function kef() { 
document.getElementById('videoPlayer').pause(); 
} 

    </script> 


</body> 
</html>

出典

2016-04-05 abidinberkay

の – Pedram

可能な重複あなたの 'html'コードを共有する[をブラウザウィンドウが現在アクティブでないかどうかを検出する方法はありますか？]（http://stackoverflow.com/questions/1060008ブラウザウィンドウが現在アクティブではない場合に検出される） – cubrr

シンプルなJavaScriptのイベント：

window.onfocus = function() { document.getElementById('player').play(); }; 
 
window.onblur = function() { document.getElementById('player').pause(); };

<video height="180" controls autoplay loop id=player> 
 
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> 
 
    <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg"> 
 
    Your browser does not support HTML5 video. 
 
</video>

のJavascriptのEventListenerのイベント：

window.addEventListener("focus", aaa); 
 
window.addEventListener("blur", bbb); 
 

 
function aaa(){ 
 
document.getElementById('player').play(); 
 
} 
 

 
function bbb(){ 
 
document.getElementById('player').pause(); 
 
}

<video height="180" controls autoplay loop id=player> 
 
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> 
 
    <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg"> 
 
    Your browser does not support HTML5 video. 
 
</video>

ビデオソース：techslides

出典

2016-04-05 15:37:00

ページがフォーカスや視界を失ったとき、あなたが検出するために多分これが役立つことができます：Javascript to detect if user changes tab

出典

2016-04-05 15:05:06 rubentd

$(window).focus(function() { 
 
    //do something 
 
}); 
 

 
$(window).blur(function() { 
 
    //do something 
 
});

出典

2016-04-05 15:07:11 zani

HTML

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
<div id="youtube"></div> 

<p id="status"></p>

ピントの合っていない場合にはJavascriptをを検出します

//YouTube 
var tag = document.createElement('script'); 
tag.src = "https://www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

$(function(){ 
    var youtubePlayer; 
    var myWindow = window; 
    onYouTubeIframeAPIReady = function(){ 
    youtubePlayer = new YT.Player('youtube', { 
    height: '390', 
    width: '640', 
    videoId: 'sXtekwuT8R0', 
    events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
    } 
    }); 
    } 

    onPlayerReady = function(event) { 
    event.target.playVideo(); 
    }; 

    onPlayerStateChange = function(event) { 
    if (event.data == YT.PlayerState.PLAYING) { 
    $("#status").text("Playing!"); 
    myWindow.focus(); 
    myWindow.onblur = function() { 
     $("#status").text("You went away!"); 
     youtubePlayer.stopVideo(); 
    }; 
    } 
    }; 
})

あなたはそれとさらにヘルプが必要な場合、私の答えをコメントすることを躊躇しないでください。

出典

2016-04-05 15:11:30 Kyon

は、次の2つのものの組み合わせを必要とする -

最初はプログラムではJavaScriptを使用してビデオを一時停止する機能があること。

HTML

<video id="videoContainer" src="videoLink.ogg"></video>

はJavaScript

document.getElementById('videoContainer').pause();

次のステップでは、ウィンドウにフォーカスがあるかどうかを検出することです。完全な答えを得るには、答えを見てくださいIs there a way to detect if a browser window is not currently active?

しかし、そこに掲載されているコードは、ブラウザの互換性のための設定です。私はそれがどれくらい必要か分からないので、私はそれを読むことをお勧めしますあなたが必要とするものをそれから取る。

(function() { 
    var hidden = "hidden"; 

    // Standards: 
    if (hidden in document) 
    document.addEventListener("visibilitychange", onchange); 
    else if ((hidden = "mozHidden") in document) 
    document.addEventListener("mozvisibilitychange", onchange); 
    else if ((hidden = "webkitHidden") in document) 
    document.addEventListener("webkitvisibilitychange", onchange); 
    else if ((hidden = "msHidden") in document) 
    document.addEventListener("msvisibilitychange", onchange); 
    // IE 9 and lower: 
    else if ("onfocusin" in document) 
    document.onfocusin = document.onfocusout = onchange; 
    // All others: 
    else 
    window.onpageshow = window.onpagehide 
    = window.onfocus = window.onblur = onchange; 

    function onchange (evt) { 
    var v = "visible", h = "hidden", 
     evtMap = { 
      focus:v, focusin:v, pageshow:v, blur:h, focusout:h, pagehide:h 
     }; 

    evt = evt || window.event; 
    if (evt.type in evtMap) 
     document.body.className = evtMap[evt.type]; 
    else 
     document.body.className = this[hidden] ? "hidden" : "visible"; 
    } 

    // set the initial state (but only if browser supports the Page Visibility API) 
    if(document[hidden] !== undefined) 
    onchange({type: document[hidden] ? "blur" : "focus"}); 
})();

出典

2016-04-05 15:12:35 Adjit

ウィンドウが最小化されたときのHTMLビデオの一時停止

答えて

関連する問題