Javascript Web App - iPad webkitEnterFullscreen - 以编程方式播放全屏视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4685361/
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
Web App - iPad webkitEnterFullscreen - Programatically going full-screen video
提问by Rezen
http://sandbox.solutionsbydesign.com/i-screenplay/h5/
http://sandbox.solutionsbydesign.com/i-screenplay/h5/
Above is an example I downloaded from Apple where you can use controls for play and fullscreen mode. In Safara/iPad it works great. However what I want to do is have people click on a link and it loads a video and then goes into fullscreen mode. So for example on the link above if after the loading dots finish it went into fullscreen that would be perfect.
以上是我从 Apple 下载的示例，您可以在其中使用播放和全屏模式的控件。在 Safari/iPad 中，它运行良好。但是，我想要做的是让人们点击链接并加载视频，然后进入全屏模式。因此，例如在上面的链接上，如果加载点完成后进入全屏，那就完美了。
http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.htmlHas more information on this.
回答by Drew Baker
The best I have been able to come up with it this.
我能想到的最好的方法。
Setup your video tag and use CSS to position it off the screen someplace (it can't be set to display:none). I used absolute positioning to move it off the top left of the screen.
设置您的视频标签并使用 CSS 将其放置在屏幕之外的某个位置（它不能设置为 display:none）。我使用绝对定位将它从屏幕的左上角移开。
Then use this JS:
然后使用这个JS：
$('.popup.ipad a').click(function() {
var currentID = $(this).closest('.player').find('video').attr('id');
var videoContainer = document.getElementById(currentID);
var newSrc = $(this).attr('href');
videoContainer.src = newSrc;
videoContainer.webkitEnterFullscreen();
videoContainer.play();
});
It will play in Fullscreen great, but when the user clicks "done" to exit the video will continue to play off the screen (so you will hear the audio).
它将以全屏播放很棒，但是当用户单击“完成”退出视频时，视频将继续在屏幕外播放（因此您会听到音频）。
So, I need to figure out how to listen for an event that is fired when "Done" is touched (I'm not even sure there is an event for this). Or, use the method described hereand run it every second to see if Fullscreen mode is being used. But I haven't had much success, no matter what what I do I get errors.
因此，我需要弄清楚如何侦听在触摸“完成”时触发的事件（我什至不确定是否有此事件）。或者，使用此处描述的方法并每秒运行一次以查看是否正在使用全屏模式。但是我并没有取得太大的成功，无论我做什么都会出错。
Hopefully this helps you find some answers. If so, let me know!
希望这可以帮助您找到一些答案。如果是这样，请告诉我！
回答by kiddailey
The secret is that you cannot go into fullscreen mode until the video meta data has been loaded. The Apple docsstate:
秘诀是在加载视频元数据之前您无法进入全屏模式。Apple 文档指出：
This property [webkitSupportsFullscreen] is also false if the meta data is loaded or the loadedmetadata event has not fired, and if the files are audio-only."
如果元数据已加载或loadedmetadata 事件未触发，并且文件仅包含音频，则此属性[ webkitSupportsFullscreen] 也为false。”
So to trigger the fullscreen at the right time, simply create an event listener for the loadedmetadataevent:
因此，要在正确的时间触发全屏，只需为加载的元数据事件创建一个事件侦听器：
videoContainer.addEventListener('loadedmetadata', function() {
if (videoContainer.webkitEnterFullscreen) {
videoContainer.webkitEnterFullscreen();
}
});
Armed with that, you should be able to programmatically add and play fullscreen videos on iOS whether you're using the "off-screen" video container that Drew mentioned or via adding the video tags dynamically.
有了这个，您应该能够在 iOS 上以编程方式添加和播放全屏视频，无论您是使用 Drew 提到的“离屏”视频容器还是通过动态添加视频标签。
回答by johncblandii
I think your issue is in trying to force a non-user invoked fullscreen, which won't work. The user has to invoke the fullscreen request through a button click, etc. Waiting for the video to load then going fullscreen isn't the same thing.
我认为您的问题是试图强制非用户调用的全屏显示，这是行不通的。用户必须通过单击按钮等方式调用全屏请求。等待视频加载然后全屏显示不是一回事。
@Drew Baker Here is a post I did last night on doing fullscreen: http://johncblandii.com/2011/07/html5-video-fullscreen.html.
@Drew Baker 这是我昨晚做的关于全屏显示的帖子：http: //johncblandii.com/2011/07/html5-video-fullscreen.html。
回答by Peter Gardner
I've been working on this problem too. Trying to get the video to play in full screen mode from a button click.
我也一直在研究这个问题。尝试通过单击按钮以全屏模式播放视频。
I may be doing it wrong, but here is how I got it to work for me (on ipad air, iphone 5, galaxy 3, nexus 7... everything but the ipad 2, where the video wont go full screen yet, but it will play)
我可能做错了，但这里是我如何让它为我工作（在 ipad air、iphone 5、galaxy 3、nexus 7 上……除了 ipad 2，视频还不能全屏显示，但是会玩）
In order to play a video, you have to have the user directly click on something. Everytime I use JQUERY, it simply doesn't work on the iOS devices. I think iOS is very sensitive about getting away from direct clicks So, you put the onclick handler directly on the item you want them to click, like so:
为了播放视频，您必须让用户直接点击某些内容。每次我使用 JQUERY 时，它都无法在 iOS 设备上运行。我认为 iOS 对避免直接点击非常敏感，因此，您将 onclick 处理程序直接放在您希望他们点击的项目上，如下所示：
<div onclick='openAndPlay(event);' id='video_layover' ></div>
function openAndPlay(event) {
myvideo.play();
myvideo.webkitEnterFullscreen();
return false;
}
I have found the order to be important. First the play, then the full screen request. Try that out and see if it works for you. The return false might not be necessary.
我发现顺序很重要。首先播放，然后是全屏请求。试试看，看看它是否适合你。返回 false 可能不是必需的。
