javascript 请求全屏 HTML5 视频 onPlay
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17106131/
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
Request Full Screen HTML5 Video onPlay
提问by Stefan Dunn
I'm using the following code to trigger fullscreen when a user clicks on the play button on a <video>element:
当用户单击<video>元素上的播放按钮时，我使用以下代码触发全屏：
var video = $("#video");
video.on('play', function(e){
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
}
});
But nothing happens when I click the play button.
但是当我点击播放按钮时没有任何反应。
Any idea's why?
知道为什么吗？
EDIT: Here's my HTML code:
编辑：这是我的 HTML 代码：
<video width="458" height="258" controls id='video' >
<source src='<?= bloginfo('template_directory'); ?>/inc/pilot.mp4' type="video/mp4">
<source src='<?= bloginfo('template_directory'); ?>/inc/pilot.ogv' type="video/ogg">
<source src='<?= bloginfo('template_directory'); ?>/inc/pilot.webm' type="video/webm">
</video>
回答by brianchirls
There are a couple things going on here:
这里发生了几件事：
First, in your code, videois a jQuery object, not the actual video element. For a jQuery object, you can reference it like this:
首先，在您的代码中，video是一个 jQuery 对象，而不是实际的视频元素。对于 jQuery 对象，您可以像这样引用它：
var actualVideo = video[0]; // (assuming '#video' actually exists)
Second, 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 an alternative solution would be to request fullscreen in a click event, like this:
因此，另一种解决方案是在单击事件中请求全屏，如下所示：
var video = $("#video");
video.on('click', function(e){
var vid = video[0];
vid.play();
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
});
Ideally, you'd probably want to build out a more complete player ui, but this should give you the general idea.
理想情况下，您可能想要构建一个更完整的播放器用户界面，但这应该可以为您提供总体思路。
回答by ccpizza
A less verbose way to toggle full screen combining answers from this and other questions.
一种不那么冗长的方式来切换全屏结合来自这个问题和其他问题的答案。
This should handle all browser flavours: chromium- and webkit-based, firefox, opera, and MS-based browsers.
这应该可以处理所有浏览器风格：基于chromium 和webkit、firefox、opera 和基于MS 的浏览器。
var p = document.querySelector('#videoplayer');
if (!window.isFs) {
window.isFs = true;
var fn_enter = p.requestFullscreen || p.webkitRequestFullscreen || p.mozRequestFullScreen || p.oRequestFullscreen || p.msRequestFullscreen;
fn_enter.call(p);
} else {
window.isFs = false;
var fn_exit = p.exitFullScreen || p.webkitExitFullScreen || p.mozExitFullScreen || p.oExitFullScreen || p.msExitFullScreen;
fn_exit.call(p);
}
prepresents the DOM object of the videoelement, and window.isFsis just a random variable for storing the current fullscreen state.
p表示video元素的 DOM 对象，window.isFs只是一个随机变量，用于存储当前全屏状态。
If your playeris a jQuery object then you can get the underlying DOM-element with var p = player.get(0).
如果您player是一个 jQuery 对象，那么您可以使用var p = player.get(0).
