请求在播放时全屏HTML5视频

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>

- Stefan Dunn

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();
    }
});

理想情况下，您可能希望构建更完整的播放器用户界面，但这应该可以给您一个大致的想法。

- brianchirls

Answer 2

结合本文和其他问题的答案，一种更简洁的方式来切换全屏模式。

这将处理所有浏览器：基于chromium和webkit的浏览器、火狐、欧朋和基于Microsoft的浏览器。

var p = document.querySelector('#videoplayer');

if (!window.isFs) {
    window.isFs = true;
    var fn_enter = p.requestFullscreen || p.webkitRequestFullscreen || p.mozRequestFullScreen || p.oRequestFullscreen || p.msRequestFullscreen;
    fn_enter.call(p);
} else {
    window.isFs = false;
    var fn_exit = p.exitFullScreen || p.webkitExitFullScreen || p.mozExitFullScreen || p.oExitFullScreen || p.msExitFullScreen;
    fn_exit.call(p);
}

p代表video元素的DOM对象，window.isFs只是用于存储当前全屏状态的随机变量。

如果你的player是一个jQuery对象，那么你可以使用var p = player.get(0)获取基础的DOM元素。

- ccpizza