使用HTML5视频标记退出全屏 [英] Exiting Fullscreen With The HTML5 Video Tag
问题描述
我正试图让视频在视频结尾处退出全屏，但事实并非如此。我搜索并找到了做到这一点的方法，但对于我的生活，我无法让它发挥作用。我正在iPad2上测试最新版本的Chrome（15）和iOS 5。
这是我正在使用的代码：
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.
推荐答案
webkitExitFullScreen 是 video 元素的一种方法，因此它必须是这样称呼：
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();
});
它变得有点复杂，因为 webkitExitFullscreen 仅适用于基于webkit的浏览器（Safari，Chrome，Opera），因此您可以在 MDN
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
这篇关于使用HTML5视频标记退出全屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
