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，但这应该给你一般的想法。

Answer 2

一种不那么冗长的方式来切换全屏组合此答案和other questions的答案。

<a href="#">Some text</a>表示p元素的DOM对象，video只是一个随机变量，用于存储当前的全屏状态。

如果您的window.isFs是jQuery对象，则使用player获取底层DOM元素。

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

var p = player.get(0)

请求全屏HTML5视频onPlay

2 个答案: