Video.js在播放时进入全屏 [英] Video.js enter fullscreen on play
问题描述
我一直在寻找很长一段时间，但仍未找到解决问题的有效方法。我似乎无法让视频播放器进入全屏。 API确实有很多例子，但它们似乎都不起作用。
I've been searching around for a long time but still haven't found a valid solution for my problem. I just cant seem to get the video player to enter fullscreen. The API does have many examples but none of them seem to work.
我目前正在处理的页面上包含的jQuery版本是1.8.2。此外，我正在使用parallax-1.1.js和它正常工作所需的库，这也可能是一个问题。
The jQuery version included on the page I am currently working on is 1.8.2. Also, I am using parallax-1.1.js and libraries required for it to work properly so that may also be an issue.
我工作的客户想要网站具有响应式设计， 当点击播放按钮时播放器直接进入全屏的能力 。此功能应该可以在桌面和移动/平板电脑浏览器上使用。在视频页面上，应该有3个视频播放器，每个都有唯一的ID，并且它们也有一个共同的CSS类。
The client I am working for wants the site to have responsive design, with the ability of the player to directly go to fullscreen when the "Play" button is clicked. This functionality should be avalable both on desktop, and mobile/tablet browsers. On the video page, there should be 3 video players, each of them has unique IDs, and they also have a common CSS class.
我试过的一些代码没有工作得很好。以下是控制其中一个视频HTML标记的示例JS代码段。
Some of the code I tried didn't work well. Here's an example JS code snippet controlling one of the video HTML tags.
示例：
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'
我正在使用最新版本的谷歌浏览器。
I am working with the latest version of Google Chrome.
推荐答案
这里有两个问题需要解决。
There are a two problems to be solved here.
首先，你不能在'play'事件处理程序中全屏显示。为了获得安全性和良好的用户体验，浏览器只允许您在用户触发的事件中触发全屏，例如点击。一旦您访问它，就不能让每个网页都全屏显示，并且您可以使视频自动开始播放，这违反了该规则。所以你需要将它移动到实际播放按钮上的点击处理程序。
First, you cannot go to full screen inside a 'play' event handler. 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 you need to move this to a 'click' handler on the actual play button.
第二个是Video.js 4.0.x的一个大问题，就是那个使用Google封闭编译器缩小 高级优化。许多公共属性和方法都被混淆，使得它们难以/不可能使用。在这种情况下， requestFullScreen 现在是 player1.Pa（）。而且，据我所知， cancelFullScreen 根本不存在。
The second is a big problem with Video.js 4.0.x, which is that it's minified using Google Closure Compiler with Advanced Optimizations. So many of the public properties and methods are obfuscated, making them difficult/impossible to use. In this case, requestFullScreen is now player1.Pa(). And, as far as I can tell, cancelFullScreen doesn't exist at all.
以下是一些选项如何处理：
Here are some options for how to handle this:
-
使用模糊方法名称。我不推荐这个，因为a）名称会随着每个次要版本升级而改变（例如4.0.5）和b）它会使你的代码不可读，以及c）你不能使用
cancelFullScreen。
获取未经缩小的复制video.js并自行托管。 （您可以使用Uglify或其他不会弄乱方法名称的minifier。）Video.js不提供此文件，因此您必须克隆git repo并自行运行构建脚本。并且你没有获得免费使用video.js的CDN的优势。
Get an un-minified copy video.js and host it yourself. (You can use Uglify or another minifier that won't mess with the method names.) Video.js doesn't provide this file, so you have to clone the git repo and run the build script yourself. And you don't get the advantage of using video.js's CDN for free.
使用旧版本并等到4.x准备好黄金时间。
Use an older version of video.js and wait until 4.x is ready for prime time.
Don根本不使用video.js.考虑 jPlayer 和 jwPlayer 或roll你个人。
Don't use video.js at all. Consider jPlayer and jwPlayer or roll your own.
我推荐2或3。
更新：看起来这个特定问题已经已修复，但它尚未发布。
Update: It looks like this particular issue has been fixed, but it has not made it into release yet.
这篇关于Video.js在播放时进入全屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
