请求全屏HTML5视频onPlay [英] Request Full Screen HTML5 Video onPlay

问题描述

当用户点击< video> 元素上的播放按钮时，我正在使用以下代码触发全屏：

I'm using the following code to trigger fullscreen when a user clicks on the play button on a <video> element:

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

但是当我点击播放按钮时没有任何反应。

But nothing happens when I click the play button.

任何想法都是为什么？

编辑：这是我的HTML代码：

Here's my HTML code:

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

推荐答案

这里有几件事：

首先，在你的代码中， video 是一个jQuery对象，而不是实际的视频元素。对于jQuery对象，您可以像这样引用它：

First, in your code, video is a jQuery object, not the actual video element. For a jQuery object, you can reference it like this:

var actualVideo = video[0]; // (assuming '#video' actually exists)

其次，为了安全性和良好的用户体验，浏览器只会让您在用户触发的事件中触发全屏，例如点击。您访问后不能将每个网页全屏显示，并且您可以自动开始播放视频，这会违反该规则。

Second, for security and good user experience, browsers will only let you trigger full screen inside a user-triggered event, like a 'click'. You can't have every web page going to full screen as soon as you visit it, and you can cause a video to start playing automatically, which would violate that rule.

所以另一种解决方案是在点击事件中请求全屏，如下所示：

So an alternative solution would be to request fullscreen in a click event, like this:

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

Ideally, you'd probably want to build out a more complete player ui, but this should give you the general idea.

这篇关于请求全屏HTML5视频onPlay的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！