请求全屏 HTML5 视频播放答案

【问题标题】：Request Full Screen HTML5 Video onPlay请求全屏 HTML5 视频播放
【发布时间】：2013-06-14 10:11:59
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html html5-video fullscreen

【解决方案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();
    }
});

理想情况下，您可能想要构建一个更完整的播放器用户界面，但这应该会给您一个总体思路。

【讨论】：

【解决方案2】：

一种不太冗长的方式来切换全屏结合来自此和other questions 的答案。

这应该可以处理所有浏览器风格：基于 chromium 和 webkit、firefox、opera 和基于 MS 的浏览器。

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 元素。

【讨论】：