窗口最小化时 HTML 视频暂停
Posted
技术标签:
【中文标题】窗口最小化时 HTML 视频暂停【英文标题】：HTML video pause when window is minimized 【发布时间】：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" 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?的可能重复
【参考方案1】：
简单的javascript事件：
window.onfocus = function() document.getElementById('player').play(); ;
window.onblur = function() document.getElementById('player').pause(); ;<video 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 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");
)();
【讨论】：
以上是关于窗口最小化时 HTML 视频暂停的主要内容，如果未能解决你的问题，请参考以下文章