Go Fullscreen with HTML5 Video on iPad/iPhone
Question
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
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?
2 answers
solution1
5 2012-08-21 06:40:19
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>
solution2
1 2015-09-28 10:56:36
I used this and it worked for me
- (void) makeHTML5VideoFullscreen {
if(webView) {
[webView stringByEvaluatingJavaScriptFromString: @"document.querySelector('video').webkitEnterFullscreen();"];
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.