Video.js在播放时进入全屏
我一直在寻找很长一段时间，但仍未找到解决我问题的有效方法。 我似乎无法让video播放器进入全屏。 API确实有很多例子，但它们似乎都不起作用。
我目前正在处理的页面上包含的jQuery版本是1.8.2。 此外，我正在使用parallax-1.1.js和它正常工作所需的库，因此这也可能是一个问题。
我工作的客户希望网站具有响应式设计， 当点击“播放”按钮时，播放器能够直接进入全屏 。 此function应该可以在桌面和移动/平板电脑浏览器上使用。 在video页面上，应该有3个video播放器，每个video播放器都有唯一的ID，并且它们也有一个共同的CSS类。
我试过的一些代码效果不好。 这是一个控制其中一个videoHTML标记的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。
这里有两个问题需要解决。
首先，你不能在’play’事件处理程序中全屏显示。 为了获得安全性和良好的用户体验，浏览器只允许您在用户触发的事件中触发全屏，例如“点击”。 一旦您访问它，就不能让每个网页都全屏显示，并且您可以使video自动开始播放，这违反了该规则。 因此，您需要将其移动到实际播放按钮上的“单击”处理程序。
第二个是Video.js 4.0.x的一个大问题，即使用带有高级优化的 Google Closure Compiler进行缩小 。 许多公共属性和方法都被混淆，使得它们难以/不可能使用。 在这种情况下， requestFullScreen现在是player1.Pa() 。 而且，据我所知， cancelFullScreen根本不存在。
以下是如何处理此问题的一些选项：
-
使用模糊方法名称。 我不推荐这个，因为a）名称会随着每个次要版本升级而改变（例如4.0.5）和b）它会使你的代码不可读，并且c）你不能使用
cancelFullScreen。 -
获取一个未经缩小的复制video.js并自己托管。 （您可以使用Uglify或其他不会弄乱方法名称的minifier。）Video.js不提供此文件，因此您必须克隆git repo并自行运行构建脚本。 而且你没有获得免费使用video.js的CDN的优势。
-
使用旧版本的video.js并等待4.x准备好进入黄金时段。
-
根本不要使用video.js. 考虑jPlayer和jwPlayer或自己动手。
我推荐2或3。
更新：看起来这个特定问题已得到修复 ，但尚未发布。
解决问题的一种简单方法：
document.querySelector('.vjs-big-play-button').addEventListener('click', player.requestFullscreen)
video全屏显示，播放按钮的常规事件使其开始播放。
在video.js文件中转到这一行
BigPlayButton.prototype.handleClick = function handleClick(event) { var playPromise = this.player_.play();
并添加
BigPlayButton.prototype.handleClick = function handleClick（event）{
var playPromise = this.player_.play(); document.getElementsByClassName('vjs-fullscreen-control')[0].click() // exit early if clicked via the mouse if (this.mouseused_ && event.clientX && event.clientY) { silencePromise(playPromise); return; }