4

<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>
4

2 回答 2

14

这里有几件事：

首先，在您的代码中，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();
    }
});

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

于 2013-06-14T14:12:03.167 回答
2

一种不太冗长的方式来切换全屏结合来自这个问题和其他问题的答案。

这应该可以处理所有浏览器风格：基于 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).

于 2018-02-13T22:08:44.093 回答