Question

I’m using video tag to stream hls in both iPad and Android devices.
I have a problem in Android that after going to fullscreen, the video is stretching to fill the device’s screen, and that breaks the original aspect ratio.

It goes the right way after rotating though.

Here is an example code I’m using, though it’s hls, i believe the same problem exists with normal video files too.

<video id="main-video" src="my_hls_link.m3u8" style="width:100%; height:270px;">
</video> 

And javascript:

var player = document.getElementById("main-video");
player.addEventListener('webkitbeginfullscreen', function(){
            this.load();
            this.play();
          }, false);

Tested using chrome in Nexus 7 Android 4.1 and kindlefire Android 4.0

Answer 1

I can just do a work around with this:

//fixing the bug in android that stretch video on load
      function fix_stretch_video(){
        var check_interval = setInterval(function(){
          $('.pl-loading-btn').css('display', 'block');
          if (player.videoWidth != 0) {
            $('.pl-loading-btn').css('display', 'none');
            $('video').css('width', '99%');
            $('video').css('width', '100%');
            clearInterval(check_interval);
          }
        },100);
      }

not working in some device (or android version) thou. At least it’s work on my nexus 7