窗口最小化时 HTML 视频暂停答案

【问题标题】：HTML video pause when window is minimized窗口最小化时 HTML 视频暂停
【发布时间】：2016-07-25 14:42:14
【问题描述】：

我有一个包含视频的 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>

【问题讨论】：

分享你的html代码
Is there a way to detect if a browser window is not currently active?的可能重复

标签： javascript html video minimize pause

【解决方案1】：

简单的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>

带有 EventListener 的 Javascript 事件：

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

【讨论】：

【解决方案2】：

也许这有助于您检测页面何时失去焦点或可见性：Javascript to detect if user changes tab

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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();
     };
   }
  };  
})

如果您需要进一步的帮助，请随时评论我的回答。

【讨论】：

【解决方案5】：

你需要结合两件事 -

第一个是使用 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"});
})();

【讨论】：