Android HTML5 Video in Fullscreen Mode

问题

I'm trying to get my video stream to work on android in fullscreen mode. For iOS I use a native <video> tag, which works perfectly.

I can play the video on my android, but I don't have a fullscreen button. I also tried to create a own template for the android devices and simply set the width and height of the player to the window size (Fake Fullscreen). The problem I have here is, that when I rotate the device, the resize doesn't work correctly, so that i can scroll over the video.

Heres what I tried:

$(document).ready(function() {
    $(window).on('resize orientationchange', function() {
         $('#myPlayer').width( $(window).width() ).height( $(window).height() );
    });
}

Can anyone help me to get this to work on Android?

I hope you can understand my question, my english isn't that good ...

回答1:

HTML5 video full screen on mobile browsers (android)

seems the same question.

The events you need are: webkitbeginfullscreen (enter fullscreen) and webkitendfullscreen (exit fullscreen)

var player = document.getElementsByTagName("video")[0];
player.addEventListener('webkitbeginfullscreen', onVideoBeginsFullScreen, false);
player.addEventListener('webkitendfullscreen', onVideoEndsFullScreen, false);

来源：https://stackoverflow.com/questions/19277827/android-html5-video-in-fullscreen-mode