HTML5 video controls disappear in full-screen mode on android devices

Question

I'm developing a cross platform app using cordova with an angular material front end.

I use HTML5 video tags in a list of md-cards to play videos with external urls. When inline the videos play correctly, and display the native controls as expected.

    <video class="project-video" video-directive item="$ctrl.project" ng-src="{{$ctrl.project.videoUrl | trustUrl}}" preload="auto"
      controls poster="{{$ctrl.project.video.thumbnail_url}}">
      Your browser does not support the video tag.
    </video>

However when I click the "toggle full-screen" button the video does go to full-screen, but the default controls disappear. I cannot get back to the app after this - the native android back button does not close the full screen - instead it closes the whole app.

The solution I am looking for will make the controls always appear even in full screen mode; this works out the box running the same code on iOS.

Therefore I do not want to spend time developing my own custom video controls just for android, if I can help it! So please do not post answers about how to do that (plenty already available on SO and elsewhere).

I am using a Meizu m2 note android device.

Thanks!

EDIT:

The controls are still there but are showing up in the shadow DOM tree in css as being of size 0 x 0px. Even when I change their size in chrome dev tools using the !important flag, they do not show up.

Any ideas?

Answer 1

This is an issue with Flyme OS which is used by Meizu devices. Since the controls are available and not visible, this should be resolved by ugrading the Flyme OS.

Please update Flyme OS to resolve this as the older versions of Flyme seems to have quiet some problems with fullscreen video mode. Hope it helps. Cheers

Answer 2

set the values which then allow to exit fullscreen.

var videoElement = document.getElementById("myvideo");

 function toggleFullScreen() {
if (!document.mozFullScreen && !document.webkitFullScreen) {
  if (videoElement.mozRequestFullScreen) {
    videoElement.mozRequestFullScreen();
  } else {
    videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
  }
  document.mozFullScreen = true;
  document.webkitFullScreen = true;
} else {
  if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else {
    document.webkitCancelFullScreen();
   }
 }
 }

document.addEventListener("keydown", function(e) {
if (e.keyCode == 13) {
  toggleFullScreen();
}
}, false);

add these two lines ..

document.mozFullScreen = true;

document.webkitFullScreen = true;

if you want something better

 fullScreenButton.addEventListener("click", function() {
 if (!document.fullscreenElement &&    // alternative standard method
  !document.mozFullScreenElement && !document.webkitFullscreenElement &&      !document.msFullscreenElement ) {  // current working methods
 if (video.requestFullscreen) {
  video.requestFullscreen();
 } else if (video.msRequestFullscreen) {
  video.msRequestFullscreen();
 } else if (video.mozRequestFullScreen) {
  video.mozRequestFullScreen();
 } else if (video.webkitRequestFullscreen) {
  video.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
 }
} else {
 if (document.exitFullscreen) {
  document.exitFullscreen();
 } else if (document.msExitFullscreen) {
  document.msExitFullscreen();
 } else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
 } else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
 }
}
  });

Answer 3

How about this in your code your not mentioned controls attribute fully may be that could cause the problem

<video id="myvideo">
  <source src="path/to/movie.mp4" />
</video>

<p onclick="toggleControls();">Toggle</p>

<script>
var video = document.getElementById("myvideo");

function toggleControls() {
  if (video.hasAttribute("controls")) {
     video.removeAttribute("controls")   
  } else {
     video.setAttribute("controls","controls")   
  }
}
</script>