Geek Answers Handbook

Full HTML5 video on mobile browsers (Android)

After a huge study, I have not yet found the answer to my question. I wanted to achieve my goal with FullScreenAPI , but it is not supported in any mobile browser (except for Firefox 19 and Blackberry, but I need a cross-browser solution). Here is the source . I also tested FullScreenAPI on my own browser and mobile Chrome with properly prefixed full-screen features. Each function was of type undefined .

Another approach was the rtsp protocol, which is usually handled by an external player. Here is a guy who suggests that m.youtube.com is using this solution - I think this is not true (maybe the answer is outdated). Youtube uses its own full-screen video. On mobile Chrome, when you press the play button, the movie instantly enters full-screen mode.

Despite the fact that every source I searched on googled tells me that embedded full-screen mode is not possible in Android browsers, but the HTML5 element with its own controls gives us a full-screen button that works fine there.

Since I don't want built-in controls, can anyone share some ingenious solution with How to trigger HTML5 video fullscreen button's event ?

+6
source share
4 answers

You can create a pop-up window with a width and height of 100% using the close button at the absolute level in which HTML5 video is played.

An old, simple and dirty trick ... But it works

+2
source

Try video.webkitEnterFullscreen () in an interactive event handler (e.g. click)

0
source

all you need to work with the events "webkitbeginfullscreen" and "webkitendfullscreen" for mobile devices, I think that

 <!doctype html> <html> <head> <title>video</title> <script type="text/javascript"> function videoControl() { var myVideo = document.getElementById('myVideo'); myVideo.addEventListener("webkitbeginfullscreen", enteringFullscreen, false); myVideo.addEventListener("webkitendfullscreen", exitingFullscreen, false); } function enteringFullscreen() { alert("entering full-screen mode"); } function exitingFullscreen() { alert("exiting full-screen mode"); } </script> </head> <body onload="videoControl()"> <div id="videoContainer"> <video id="myVideo" src="myVideo.m4v" autoplay controls> </video> </div> </body> </html>
0
source

Here, what I use should work pretty much everywhere:

 function toggleFullScreen() { var doc = window.document; var elem = doc.body; //the element you want to make fullscreen var requestFullScreen = elem.requestFullscreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen || elem.msRequestFullscreen; var cancelFullScreen = doc.exitFullscreen || doc.webkitExitFullscreen || doc.mozCancelFullScreen|| doc.msExitFullscreen; if(!(doc.fullscreenElement || doc.mozFullScreenElement || doc.webkitFullscreenElement || doc.msFullscreenElement)) { requestFullScreen.call(doc.body); } else { cancelFullScreen.call(doc); } }
-1
source

More articles:


All Articles