javascript - Video.js 在播放时进入全屏

Question

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

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

我工作的客户希望网站具有响应式设计，点击“播放”按钮时播放器能够直接进入全屏 .此功能应该在桌面和移动/平板电脑浏览器上都可用。在视频页面上，应该有3个视频播放器，每个播放器都有唯一的ID，也有一个共同的CSS类。

我试过的一些代码效果不佳。下面是一个示例 JS 代码片段，用于控制其中一个视频 HTML 标记。

示例:

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'

我正在使用最新版本的谷歌浏览器。

Answer 1

这里有两个问题需要解决。

首先，您不能在“播放”事件处理程序中进入全屏。为了安全和良好的用户体验，浏览器只会让您在用户触发的事件中触发全屏，例如“点击”。您不能让每个网页在您访问后立即全屏显示，并且您可以使视频自动开始播放，这将违反该规则。因此，您需要将其移至实际播放按钮上的“点击”处理程序。

第二个是 Video.js 4.0.x 的一个大问题，即 minified将 Google Closure Compiler 与 Advanced Optimizations 结合使用.许多公共(public)属性和方法都被混淆了，使它们难以/无法使用。在这种情况下，requestFullScreen 现在是 player1.Pa()。而且，据我所知，cancelFullScreen 根本不存在。

这里有一些关于如何处理这个问题的选项:

1. 使用混淆的方法名称。我不推荐这样做，因为 a) 名称会随着每次次要版本升级(例如 4.0.5)而改变，并且 b) 它会使您的代码不可读，并且 c) 您不能使用 cancelFullScreen.

2. 获取未缩小的 video.js 副本并自行托管。 (您可以使用 Uglify 或其他不会混淆方法名称的压缩器。)Video.js 不提供此文件，因此您必须自己克隆 git 存储库并运行构建脚本。而且您无法免费使用 video.js 的 CDN。

3. 使用older version video.js 并等待 4.x 准备好迎接黄金时段。

4. 根本不要使用 video.js。考虑 jPlayer和 jwPlayer或自己滚动。

我推荐 2 或 3。

更新: 看起来这个特定问题已经 fixed , 但尚未发布。