CODEWITHSUNDEEP
androidhtmlhtml5-videofullscreen
matewka
matewka

Reputation: 10148

HTML5 video full screen on mobile browsers (android)

After a huge research I didn't find any answer to my question yet. I wanted to achieve my goal with FullScreenAPI but it is not supported in any mobile browser (except Firefox 19 and Blackberry browser - but I need a cross-browser solution). Here's the source. I also tested FullScreenAPI on native android browser and mobile Chrome with appropriately prefixed fullscreen functions. Each function was of type undefined.

Another approach was the rtsp protocol which is usually handled by an outer player. Here is the guy who assumes that m.youtube.com uses that solution - I think it is not true (maybe the answer is outdated). Youtube uses native video's fullscreen. On mobile Chrome when you tap the play button, the movie instantly goes fullscreen.

Although, every source I googled tells me that native fullscreen is not possible on android browsers, still HTML5 video element with its native controls gives us a fullscreen button which works perfectly out there.

Since I don't want the native controls, can anyone share any ingenious solution to How to trigger HTML5 video fullscreen button'sevent?

Upvotes: 7

Views: 18504

Answers (5)

Mudit Sharma
Mudit Sharma

Reputation: 65

Most people facing this issue is because the HTML5 video is implemented inside <iframe>.

Add the three attributes in iframe to enable fullscreen in adroid chrome <iframe allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">

Upvotes: 0

MikeC
MikeC

Reputation: 49

Here's what I use that should pretty much work 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);
  }
}

Upvotes: -1

user2875402
user2875402

Reputation:

all you need to work on "webkitbeginfullscreen" and "webkitendfullscreen" events for mobile devices, i think.it will 

<!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>

Upvotes: 1

OOO
OOO

Reputation: 324

Try video.webkitEnterFullscreen() in a user interactive event handler(ex: click)

Upvotes: 0

Alex Pereira
Alex Pereira

Reputation: 966

You can make a popup at 100% width/height with a close button on absolute on it playing your HTML5 video.

Old, simple and dirty trick... But works

Upvotes: 2

Related Questions