html5 video tag to play full screen with Android

Question

I'm creating a mobile site where I have a video I'd like to play when someone clicks on a link:

<div id="player"></div>
<a href="#" onclick="DoNav('<?php echo $url; ?>');" title="Click to play video"> <?php echo $result_videos[$i]["camera_name"]; ?> </a>

<script type="text/javascript">
function DoNav(theUrl)
{

  // only add the player if it doesn't yet exist
  if($('#myfileplayer').length == 0) {
    var mydiv = $("#player");
    var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>");
    mydiv.append(myvideo);
  } else {
    $('#myfileplayer').attr("src",theUrl); 
  }

} 
</script>

With the iPhone, this works great, I click on video and it goes full screen. Android works as well but it requires you to click the video to play then click on the full screen. Is it possible to get to the full screen like iPhone just when you hit play?

Once you hit play it stays the size of the player that I specify with the height/width parameters (which I need so you can go back to the same video). You can click again to go full screen from the controls but I'm hoping to just get to full screen right away like iPhone. — Tom, Jul 10 '12 at 19:10
The browser security model will not allow you to go fullscreen on the events "play" or "playing". You must use "click". However, not all click events result in the playing of video. So, in the click handler you want to check for video_tag.paused===false and call video_tag.webkitRequestFullScreen() — Bruno Bronosky, Oct 31 '14 at 16:21

score 6 · Answer 1 · answered Jun 25 '14 at 08:17

This should work, with plain Javascript:

var myVideo = document.getElementById('myVideoTag');

myVideo.play();
if (typeof(myVideo.webkitEnterFullscreen) != "undefined") {
    // This is for Android Stock.
    myVideo.webkitEnterFullscreen();
} else if (typeof(myVideo.webkitRequestFullscreen)  != "undefined") {
    // This is for Chrome.
    myVideo.webkitRequestFullscreen();
} else if (typeof(myVideo.mozRequestFullScreen)  != "undefined") {
    myVideo.mozRequestFullScreen();
}

You have to trigger play() before the fullscreen instruction, otherwise in Android Browser it will just go fullscreen but it will not start playing. Tested with the latest version of Android Browser, Chrome, Safari.

score 2 · Accepted Answer · answered Aug 04 '12 at 19:41

2

I've given up on this. My conclusion is that the html5 video tag on Android devices blows chunks. It works in some devices but not on others. And there is no common criteria like 3.x or 4.x, it just seems to be random. I hope this gets better sometime soon especially since flash support is not longer existent.

Oddly sticking with a simple href seems to be the most consistent. You lose some controls but way better than the video tag...at least so far.

answered Aug 04 '12 at 19:41

Tom

2,584
9
54
95

This post supports your conclusion: http://stackoverflow.com/questions/15768837/playing-html5-video-on-fullscreen-in-android-webview – Nilzor Aug 13 '14 at 06:32

Grinn · Answer 3 · 2012-07-10T19:29:03.083

1

Have you checked out mediaelement.js?

edited Jul 10 '12 at 19:29

answered Jul 10 '12 at 19:08

Grinn

5,083
33
48

I've checked it and it does not work even on Android Kitkat 4.4 – Behrouz.M Feb 11 '16 at 09:39

score 0 · Answer 4 · answered Jul 10 '12 at 19:36

Try something along the lines of:

document.getElementById('myfileplayer').addEventListener('play', function (e) { this.mozRequestFullScreen ? this.mozRequestFullScreen() : this.webkitRequestFullScreen ? this.webkitRequestFullScreen() : null; }, false);

Either that or maybe something along the lines of:

document.getElementById('myfileplayer').addEventListener('play', function (e) { this.webkitEnterFullscreen(); }, false);

webkitEnterFullscreen is the fullscreen method of a VIDEO element that is currently working on iOS. I'm not sure about support on Android devices.

mozRequestFullScreen and webkitRequestFullScreen are implementations of Mozilla and Google's FullScreen API which is used to activate full screen mode on practically any DOM element.

Hopefully that gives you at least a starting point to work from...

thanks. This looks like something to start from. I did a quick try with what you posted but it didn't work, looks like I've got some research to do. — Tom, Jul 11 '12 at 17:53

score 0 · Answer 5 · answered Mar 26 '14 at 00:20

Most vendors require user interaction to go full screen, which is why natalee's answer doesn't work. For Andriod, you can call webkitEnterFullScreen() inside your anchor's click handler since it's a valid user interaction:

    myvideo[0].webkitEnterFullScreen();
    myvideo[0].play();

or

    $('#myfileplayer')[0].webkitEnterFullScreen();
    $('#myfileplayer')[0].play();

Note how I'm stripping jQuery's wrapper with [0]. It doesn't work otherwise.

html5 video tag to play full screen with Android

5 Answers5

Linked