窗口最小化时HTML视频暂停 | 窗口最小化时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-8http-equiv =Content-Type/> 
< title>无标题1< / title> 
< / head> 
< body> 
 
< video id =videoPlayerwidth =640height =480position =centercontrols> 
< source src =\\TEKPC1366\Users\BerkayS\Desktop\DataModel2\DataModel3\DataModelYazisiz.mp4type =video / mp4/> 
< source src =\\TEKPC1366\Users\BerkayS\Desktop\DataModel2\DataModel3\DataModelYazisiz.mp4.webmtype =video / webm/> 
< track src =C：\Users\BerkayS\Desktop\DataModel2\DataModel3\deneme.vttkind =subtitlessrclang =tulabel =Türkçe/> ; 
< track src =C：\Users\BerkayS\Desktop\DataModel2\DataModel3\denemeenglish.vttkind =subtitlessrclang =enlabel =English/> ; 
< track src =C：\Users\BerkayS\Desktop\DataModel2\DataModel3\denemedeutsch.vttkind =subtitlessrclang =delabel =Deutsch/> gt ; 
< track src =C：\Users\BerkayS\Desktop\DataModel2\DataModel3\denemespanish.vttkind =subtitlessrclang =eslabel =Espanol/> ; 
< track src =C：\Users\BerkayS\Desktop\DataModel2\DataModel3\denemerussian.vttkind =subtitlessrclang =rulabel =русский/> ; 
< track src =C：\Users\BerkayS\Desktop\DataModel2\DataModel3\denemearabic.vttkind =subtitlessrclang =arlabel =العربية/> ; 
 
< / video> 
 
 
  window.onfocus = function（）{kaf（）}; 
 window.onblur = function（）{kef（）}; 
 
函数kaf（）{
 document.getElementById（'videoPlayer'）。play（）; 
 
 
 $ b函数kef（）{
 document.getElementById（'videoPlayer'）。pause（）; 
} 
 
< / script> 
 
 
< / body> 
< / html>

解决方案

简单的javascript事件：

  window.onfocus = function（）{document.getElementById（'player'）。play（）; }; window.onblur = function（）{document.getElementById（'player'）。pause（）; };

< video height =180controls autoplay loop id = player> < source src =http://techslides.com/demos/sample-videos/small.mp4type =video / mp4> < source src =http://techslides.com/demos/sample-videos/small.ogvtype =video / ogg> < / video>

使用EventListener的Javascript事件：

 window.addEventListener（focus，aaa）; window.addEventListener（blur，bbb）; function aaa （）{的document.getElementById（ '球员'）播放（）。 } function bbb（）{document.getElementById（'player'）。pause（）;}

 < video height =180controls autoplay loop id = player> < source src =http://techslides.com/demos/sample-videos/small.mp4type =video / mp4> < source src =http://techslides.com/demos/sample-videos/small.ogvtype =video / ogg> < / video>

I have a html file that contains a video. I want to add a feature to pause video when the window is minimized or the tab is changed on browser.

How can add that feature to my html?

I added javascript function but video is still being played in any condition

edit: sharing my code.

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

解决方案

Simple javascript event:

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 event with 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>

这篇关于窗口最小化时HTML视频暂停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！