当用户点击< video>上的播放按钮时,我正在使用以下代码触发全屏.元件:
var video = $("#video");
video.on('play', function(e){
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
}
});
但是当我点击播放按钮时没有任何反应.
任何想法都是为什么?
编辑:这是我的HTML代码:
<video width="458" height="258" controls id='video' >
<source src='<?= bloginfo('template_directory'); ?>/inc/pilot.mp4' type="video/mp4">
<source src='<?= bloginfo('template_directory'); ?>/inc/pilot.ogv' type="video/ogg">
<source src='<?= bloginfo('template_directory'); ?>/inc/pilot.webm' type="video/webm">
</video>
解决方法:
这里有几件事情:
首先,在您的代码中,视频是一个jQuery对象,而不是实际的视频元素.对于jQuery对象,您可以像这样引用它:
var actualVideo = video[0]; // (assuming '#video' actually exists)
其次,为了安全性和良好的用户体验,浏览器只允许您在用户触发的事件中触发全屏,例如“点击”.您访问后不能让每个网页都全屏显示,并且您可以使视频自动开始播放,这违反了该规则.
因此,另一种解决方案是在点击事件中请求全屏,如下所示:
var video = $("#video");
video.on('click', function(e){
var vid = video[0];
vid.play();
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
});
理想情况下,你可能想要建立一个更完整的玩家ui,但这应该给你一般的想法.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。