Go Fullscreen with HTML5 Video on iPad/iPhone
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.
My Code
开发者_Go百科For Example
Now, it looks like specific support for this behavior was 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)
So, it seems it is possible. Am I missing something?
Testing on iOS simulator 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>
I used this and it worked for me
- (void) makeHTML5VideoFullscreen {
if(webView) {
[webView stringByEvaluatingJavaScriptFromString: @"document.querySelector('video').webkitEnterFullscreen();"];
}
}
加载中,请稍侯......
精彩评论