jQuery Video.js 在播放时进入全屏模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17143720/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Video.js enter fullscreen on play
提问by Filip Filipovi?
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.
我已经搜索了很长时间，但仍然没有为我的问题找到有效的解决方案。我似乎无法让视频播放器进入全屏模式。API 确实有很多示例，但它们似乎都不起作用。
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.
我目前正在处理的页面上包含的 jQuery 版本是 1.8.2。此外，我正在使用 parallax-1.1.js 和它正常工作所需的库，因此这也可能是一个问题。
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.
我为之工作的客户希望该网站具有响应式设计，当点击“播放”按钮时，播放器能够直接进入全屏模式。此功能应该在台式机和移动/平板电脑浏览器上都可用。在视频页面上，应该有3个视频播放器，每个播放器都有唯一的ID，还有一个通用的CSS类。
Some of the code I tried didn't work well. Here's an example JS code snippet controlling one of the video HTML tags.
我试过的一些代码效果不佳。这是控制视频 HTML 标签之一的示例 JS 代码片段。
Example:
例子：
player1 = _V_('video-1');
player1.on("play",
function () {
this.requestFullScreen();
});
player1.on("ended",
function () {
this.cancelFullScreen();
});
The code generates this error:
该代码生成此错误：
Uncaught TypeError: Object [object Object] has no method 'requestFullScreen'
I am working with the latest version of Google Chrome.
我正在使用最新版本的 Google Chrome。
回答by brianchirls
There are a two problems to be solved here.
这里有两个问题需要解决。
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.
首先，您不能在“播放”事件处理程序中全屏显示。为了安全和良好的用户体验，浏览器只会让你在用户触发的事件中触发全屏，比如“点击”。您不能在访问每个网页时立即全屏显示，并且您可以使视频自动开始播放，这将违反该规则。因此，您需要将其移动到实际播放按钮上的“点击”处理程序。
The second is a big problem with Video.js 4.0.x, which is that it's minifiedusing 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, requestFullScreenis now player1.Pa(). And, as far as I can tell, cancelFullScreendoesn't exist at all.
第二个是 Video.js 4.0.x 的一个大问题，它是使用 Google Closure Compiler with Advanced Optimizations缩小的。许多公共属性和方法都被混淆了，使它们难以/无法使用。在这种情况下，是现在。而且，据我所知，根本不存在。requestFullScreenplayer1.Pa()cancelFullScreen
Here are some options for how to handle this:
以下是有关如何处理此问题的一些选项：
Use the obfuscated method name. I don't recommend this, because a) the name will change with every minor version upgrade (e.g. 4.0.5) and b) it will make your code unreadable, and c) you can't use
cancelFullScreen.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.
Use an older versionof video.js and wait until 4.x is ready for prime time.
Don't use video.js at all. Consider jPlayerand jwPlayeror roll your own.
使用混淆的方法名称。我不建议这样做，因为 a) 名称会随着每次次要版本升级（例如 4.0.5）而改变，并且 b) 它会使您的代码不可读，并且 c) 您不能使用
cancelFullScreen.获取未缩小的副本 video.js 并自己托管。（您可以使用 Uglify 或其他不会弄乱方法名称的压缩器。） Video.js 不提供此文件，因此您必须克隆 git 存储库并自己运行构建脚本。而且您无法获得免费使用 video.js 的 CDN 的优势。
使用旧版本的 video.js 并等待 4.x 准备好迎接黄金时段。
I recommend 2 or 3.
我推荐2或3。
Update:It looks like this particular issue has been fixed, but it has not made it into release yet.
更新：看起来这个特定问题已被修复，但尚未发布。
回答by Alain Tiemblo
I personally used a custom link that triggers both play and fullscreen.
我个人使用了触发播放和全屏的自定义链接。
<a class="enter-fullscreen" href="#">Play fullscreen</a>
And the js part:
和 js 部分：
<script type="text/javascript">
$('.enter-fullscreen').click(function(e) {
e.preventDefault();
$('.vjs-play-control').click();
$('.vjs-fullscreen-control').click();
});
</script>
This is improvable but simple and does the job.
这是可以改进的，但很简单并且可以完成工作。
回答by oldsea
One easy way to solve the problem:
解决问题的一种简单方法：
document.querySelector('.vjs-big-play-button').addEventListener('click', player.requestFullscreen)
Video goes full screen and the regular event of the play button causes it to start playing.
视频全屏显示，播放按钮的常规事件使其开始播放。
回答by Hamzeh Salhi
in video.js file go to this lines
在 video.js 文件中转到这一行
BigPlayButton.prototype.handleClick = function handleClick(event) {
var playPromise = this.player_.play();
and add
并添加
BigPlayButton.prototype.handleClick = function handleClick(event) {
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;
}
