微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jquery – 使用HTML5视频标记退出全屏

我试图让视频在视频结束时退出全屏,但事实并非如此.我搜索并找到了做到这一点的方法,但对于我的生活,我无法让它发挥作用.我正在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>

任何帮助将不胜感激.

解决方法

webkitExitFullScreen是视频元素的一种方法,因此必须以这种方式调用它:
videoElement.webkitExitFullscreen();
//or
$("#myVideoTag")[0].webkitExitFullscreen();
//or,without needing jQuery
document.getElementsById('myVideoTag').webkitExitFullscreen();

由于它在事件处理程序中,这将是结束的视频,因此:

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

它变得有点复杂,因为webkitExitFullscreen仅适用于基于webkit的浏览器(Safari,Chrome,Opera),因此您可以在MDN上了解有关其正确用法的更多信息

原文地址:https://www.jb51.cc/jquery/177601.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐