我正在尝试让视频在视频结束时退出全屏,但事实并非如此。我搜索并找到了做到这一点的方法,但对于我的生活,我无法让它发挥作用。我正在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>
任何帮助将不胜感激。
答案 0 :(得分:16)
webkitExitFullScreen
是video
元素的一种方法,因此必须以这种方式调用:
videoElement.webkitExitFullscreen();
//or
$("#myVideoTag")[0].webkitExitFullscreen();
//or, without needing jQuery
document.getElementsById('myVideoTag').webkitExitFullscreen();
由于它位于事件处理程序中,this
将是video
ended
,因此:
$("#myVideoTag").on('ended', function(){
this.webkitExitFullscreen();
});
它变得有点复杂,因为webkitExitFullscreen
仅适用于基于webkit的浏览器(Safari,Chrome,Opera),因此您可以在MDN上了解有关其正确用法的更多信息
答案 1 :(得分:5)
我知道这已经得到了解答,但这里是我最终用于所有浏览器的小代码片段,以便在结束后关闭全屏视频。
到目前为止适用于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/
以为我会添加答案,因为这是我在寻找解决方案时遇到的第一个问题。
答案 2 :(得分:2)
谢谢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>