javascript 在 iPad/iPhone 上使用 HTML5 视频全屏显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5316533/
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
Go Fullscreen with HTML5 Video on iPad/iPhone
提问by eculver
I'm trying to play and go fullscreen for an HTML5 video element on an iPad/iPhone via JavaScript, but when I try videoElement.webkitEnterFullScreen(), I see an INVALID_STATE_ERR: Dom Exception 11.
我正在尝试通过 JavaScript 在 iPad/iPhone 上播放和全屏播放 HTML5 视频元素，但是当我尝试 videoElement.webkitEnterFullScreen() 时，我看到一个 INVALID_STATE_ERR: Dom Exception 11。
My Code
我的代码
For Example
对于示例
Now, it looks like specific support for this behaviorwas added here:
现在，似乎在此处添加了对此行为的特定支持：
which specifically prevents going fullscreen without a user gesture.
这特别可以防止在没有用户手势的情况下全屏显示。
My question:
我的问题：
Is there a workaround for this?
有解决方法吗？
I see that Vimeo's HTML5 video player is mimicking this behavior somehow as seen here(on iPad/iPhone)
我看到的Vimeo的HTML5视频播放器以某种方式模仿这种行为，因为看到这里（在iPad / iPhone）
So, it seems it is possible. Am I missing something?
所以，这似乎是可能的。我错过了什么吗？
回答by Ignacio Castro
Testing on iOS simulator Ipad
在 iOS 模拟器 Ipad 上测试
Hope I can help someone:
希望我可以帮助某人：
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
var vid;
function init() {
vid = document.getElementById("myVideo");
vid.addEventListener("loadedmetadata", goFullscreen, false);
}
function goFullscreen() {
vid.webkitEnterFullscreen();
}
$(document).ready(function(){
init();
$("#myVideo").bind('ended', function(){
$('#myVideo')[0].webkitExitFullScreen();
});
});
</script>
</head>
<body>
<h1>Fullscreen Video</h1>
<video src="movie.mp4" id="myVideo" autoplay controls >
</video>
</body>
</html>
回答by Vineet Ashtekar
I used this and it worked for me
我用过这个，它对我有用
- (void) makeHTML5VideoFullscreen {
if(webView) {
[webView stringByEvaluatingJavaScriptFromString: @"document.querySelector('video').webkitEnterFullscreen();"];
}
}
