请求全屏HTML5视频onPlay

Question

当用户点击<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>

Answer 1

这里有几件事情:

首先,在您的代码中,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,但这应该给你一般的想法.