Video.js进入全屏播放

Question

我已经搜索了很长时间，但仍然没有找到一个有效的解决方案，我的问题。我只是不能让视频播放器进入全屏。API确实有许多示例，但它们似乎都不起作用。

我目前正在处理的页面中包含的jQuery版本为1.8.2。另外，我使用的是视差-1.1.js和它正常工作所需的库，所以这也可能是一个问题。

我工作的客户端希望网站具有响应性设计，使用，当"Play“按钮被点击时，玩家可以直接转到全屏。这种功能在桌面浏览器和移动/平板浏览器上都应该是雪崩的。在视频页面上，应该有3个视频播放器，每个播放器都有唯一的ID，并且它们还有一个公共的CSS类。

我尝试过的一些代码不太好用。下面是一个控制一个视频HTML标记的示例JS代码片段。

示例：

player1 = _V_('video-1');

player1.on("play",
    function () {
        this.requestFullScreen();
});

player1.on("ended",
    function () {
        this.cancelFullScreen();
});

代码生成此错误：

Uncaught TypeError: Object [object Object] has no method 'requestFullScreen'

我正在使用最新版本的谷歌Chrome。

Answer 1

这里有两个问题要解决。

首先，不能进入“play”事件处理程序中的全屏。为了安全和良好的用户体验，浏览器只允许您在用户触发的事件中触发全屏，比如“单击”。你不能让每个网页在你访问它的时候就被全屏播放，而且你可以让视频自动播放，这违反了规则。因此，您需要将其移动到实际播放按钮上的“单击”处理程序。

第二个问题是Video.js 4.0.x的一个大问题，它是minified使用Google闭包编译器和Advanced Optimizations。如此多的公共属性和方法被混淆，使得它们难以使用/不可能使用。在这种情况下，requestFullScreen现在是player1.Pa()。据我所知，cancelFullScreen根本不存在。

下面是一些如何处理此问题的选项：

1. 使用模糊的方法名。我不建议这样做，因为( a)每次小版本升级(例如4.0.5)都会更改名称，( b)它会使您的代码不可读，而c)您不能使用cancelFullScreen。
2. 获得一个非缩小的副本video.js并自己托管它。(您可以使用Uglify或另一个不会弄乱方法名称的小型程序。)Video.js不提供这个文件，所以您必须克隆git并自己运行构建脚本。而且你也没有免费使用视频.‘s的CDN的优势。
3. 使用older version of video.js并等到4.x准备好黄金时段。
4. 根本不要使用video.js。考虑一下jPlayer和jwPlayer，或者自己滚。

我推荐2或3。

更新：看起来这个特殊的问题是fixed，但它还没有发布。

Answer 2

我个人使用了一个自定义链接，触发播放和全屏。

<a class="enter-fullscreen" href="#">Play fullscreen</a>

而js的部分：

<script type="text/javascript">

    $('.enter-fullscreen').click(function(e) {
        e.preventDefault();
        $('.vjs-play-control').click();
        $('.vjs-fullscreen-control').click();
    });

</script>

这是可改进的，但简单，并做的工作。

Answer 3

解决这个问题的一个简单方法是：

document.querySelector('.vjs-big-play-button').addEventListener('click', player.requestFullscreen)

视频进入全屏，播放按钮的常规事件使其开始播放。