Video.js在播放时进入全屏

Question

我一直在寻找很长一段时间但仍未找到解决问题的有效方法.我似乎无法让视频播放器进入全屏.API确实有很多例子,但它们似乎都不起作用.

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

我工作的客户希望网站具有响应式设计,当点击"播放"按钮时,播放器能够直接进入全屏.此功能应该可以在桌面和移动/平板电脑浏览器上使用.在视频页面上,应该有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'

我正在使用最新版本的Google Chrome.

Answer 1

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

首先,你不能在'play'事件处理程序中全屏显示.为了获得安全性和良好的用户体验,浏览器只允许您在用户触发的事件中触发全屏,例如"点击".您访问后不能让每个网页都全屏显示,并且您可以使视频自动开始播放,这违反了该规则.因此,您需要将其移动到实际播放按钮上的"单击"处理程序.

第二个是Video.js 4.0.x的一个大问题,即使用带有高级优化的 Google Closure Compiler进行缩小.许多公共属性和方法都被混淆,使得它们难以/不可能使用.在这种情况下,现在.而且,据我所知,根本不存在.requestFullScreenplayer1.Pa()cancelFullScreen

以下是如何处理此问题的一些选项:

1. 使用模糊方法名称.我不推荐这个,因为a)名称会随着每个次要版本升级而改变(例如4.0.5)和b)它会使你的代码不可读,并且c)你不能使用cancelFullScreen.

2. 获取一个未缩小的复制video.js并自己托管.(您可以使用Uglify或其他不会破坏方法名称的minifier.)Video.js不提供此文件,因此您必须克隆git repo并自行运行构建脚本.并且您没有获得免费使用video.js的CDN的优势.

3. 使用较旧版本的video.js并等待4.x准备好进入黄金时段.

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

我推荐2或3.

更新:看起来这个特定问题已得到修复,但尚未发布.