使用 HTML5 视频标签退出全屏

发布于 2024-12-16 18:45:36 字数 867 浏览 2 评论 0原文

我试图让视频在视频结束时退出全屏，但它不会。我搜索并找到了方法来做到这一点，但我一生都无法让它发挥作用。我正在 iPad2 上使用最新版本的 Chrome (15) 和 iOS 5 进行测试。这是我正在使用的代码：

<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function(){
  $("#myVideoTag").on('ended', function(){
    webkitExitFullScreen();
  });
});

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>854x480</title>
</head>
<body>
<video  width="854" height="480"
        src="video/854x480-Template_1.mp4"
        poster="images/poster.jpg"
        id="myVideoTag"
        type="video/mp4"
        preload="auto"
        autobuffer
        controls>
  <p>Requires HTML5 capable browser.</p>
</video>

</body>
</html>

任何帮助将不胜感激。

原文

I'm trying to get the video to exit fullscreen at the end of the video but it won't. I searched and found ways to do this but for the life of me I can't get it to work. I'm testing in the latest version of Chrome (15) and iOS 5 on the iPad2.
Here's the code I'm using:

<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function(){
  $("#myVideoTag").on('ended', function(){
    webkitExitFullScreen();
  });
});

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>854x480</title>
</head>
<body>
<video  width="854" height="480"
        src="video/854x480-Template_1.mp4"
        poster="images/poster.jpg"
        id="myVideoTag"
        type="video/mp4"
        preload="auto"
        autobuffer
        controls>
  <p>Requires HTML5 capable browser.</p>
</video>

</body>
</html>

Any help will be appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

愛上了 2024-12-23 18:45:36

webkitExitFullScreen 是 video 元素的一个方法，因此必须以这种方式调用它：

videoElement.webkitExitFullscreen();
//or
$("#myVideoTag")[0].webkitExitFullscreen();
//or, without needing jQuery
document.getElementsById('myVideoTag').webkitExitFullscreen();

由于它位于事件处理程序内部，因此 this 将是video 结束了，所以：

$("#myVideoTag").on('ended', function(){
  this.webkitExitFullscreen();
});

它变得有点复杂，因为 webkitExitFullscreen 仅适用于基于 webkit 的浏览器（Safari、Chrome、Opera），这样你就可以了解更多关于它的正确用法在 MDN

webkitExitFullScreen is a method of the video element, so it has to be called this way:

videoElement.webkitExitFullscreen();
//or
$("#myVideoTag")[0].webkitExitFullscreen();
//or, without needing jQuery
document.getElementsById('myVideoTag').webkitExitFullscreen();

Since it's inside an event handler, this will be the video that ended, so:

$("#myVideoTag").on('ended', function(){
  this.webkitExitFullscreen();
});

It gets a bit more complicated because webkitExitFullscreen only works in webkit-based browsers (Safari, Chrome, Opera), so you can learn more about its correct usage on MDN

回复收藏 0 原文

π浅易 2024-12-23 18:45:36

我知道这个问题已经得到解答，但这是我最终用于所有浏览器在结束后关闭全屏视频的小代码片段。

到目前为止，适用于 Chrome、IE11、Firefox：

$("#myVideoTag").on('ended', function(){
    if (document.exitFullscreen) {
        document.exitFullscreen(); // Standard
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen(); // Blink
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen(); // Gecko
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen(); // Old IE
    }
});

您还可以找到当前的全屏元素（如果有），例如：

  var fullscreenElement = document.fullscreenElement || 
   document.mozFullScreenElement || document.webkitFullscreenElement;

来源：https://www.sitepoint.com/use-html5-full-screen-api/

只是想我会添加答案，因为这是我遇到的第一个问题正在寻找解决方案。

I know this is already answered, but here is the little code snippet I ended up using for all browsers to close fullscreen video after it ends.

Works on Chrome, IE11, Firefox so far:

$("#myVideoTag").on('ended', function(){
    if (document.exitFullscreen) {
        document.exitFullscreen(); // Standard
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen(); // Blink
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen(); // Gecko
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen(); // Old IE
    }
});

You can also find the current full screen element (if any) like:

  var fullscreenElement = document.fullscreenElement || 
   document.mozFullScreenElement || document.webkitFullscreenElement;

Source: https://www.sitepoint.com/use-html5-full-screen-api/

Just thought I would add the answer as this was the first question I came across when looking for a solution to this.

回复收藏 0 原文

心房敞 2024-12-23 18:45:36

谢谢 cbaigorri，使用 .webkitExitFullscreen(); 确实效果很好。

视频播放完毕后，我使用以下命令退出全屏：

<script type="text/javascript">
function CloseVideo() {
    document.getElementsByTagName('video')[0].webkitExitFullscreen();
}
</script>

<video controls onended=CloseVideo() >
    <source src="video.mp4" type="video/mp4">
</video>

Thank you cbaigorri, it did work wonderfully to use .webkitExitFullscreen();

I used the following to exit fullscreen when the video is done playing:

<script type="text/javascript">
function CloseVideo() {
    document.getElementsByTagName('video')[0].webkitExitFullscreen();
}
</script>

<video controls onended=CloseVideo() >
    <source src="video.mp4" type="video/mp4">
</video>

回复收藏 0 原文

~没有更多了~