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?

Refund

Are you using fastclick or testing in mozilla browser in device by any chance? – Forfeiture

Neither. I'm running the app by using the terminal command – Refund

cordova run android --device – Refund

Any error trace in device console while switching to fullscreen? Any other 3rd party libraries you are using in the app? – Forfeiture

Checked using a example app and I do see controls in full screen. Can you remove everything and use a very simple video tag like this <video width="400" controls> <source src=techslides.com/demos/sample-videos/small.mp4 type=video/mp4> </video> – Hanley

Can't help much with the absent controls issue, but FYI, you can override the back button behavior (and shrink video if in fullscreen). – Spickandspan

I suggest changing the height and width manually to the size of the device by calculating it Programmatically or there may be another issue that when u do full screen the control attribute set to false – Brindle

Thanks manishag, same behaviour with this video. I think this is a device specific issue. – Refund

Update: the controls appear to still be there but set to 0px times 0px size. However setting their size manually in chrome dev tools whilst remote debugging doesn't do anything, even if I use the !important selector. Very weird! – Refund

@AdamDiment Are you using flyme stock video player to play the video? Could you check whether it is happening in all video player app? I suspect it could be a bug with the flyme stock video player app may be. Also see if you could update the flyme version and check as older versions seems to have some sort of problems in full screen mode – Forfeiture

@Forfeiture thanks - I will check later. – Refund

@AdamDiment Please keep us updated. Thanks – Forfeiture

@Forfeiture controls during full screen were restored when I updated the flyme software, thanks for the suggestion. If you post it as an answer I will upvote it and mark it as accepted which should allow you to still get half of the bounty. Cheers! – Refund

@AdamDiment Hi, Thanks for the update. Have posted the answer. But not sure about getting bounty as the bounty period including the grace period is over i guess :( If you could give a bounty that would be great. – Forfeiture

@Forfeiture if it gets 2 or more upvotes it will get half the bounty – Refund

@AdamDiment That happens during the bounty period. But i guess its over. A big miss for me i guess :( – Forfeiture

@Forfeiture not true. see the answer here meta.stackexchange.com/questions/16065/… Otherwise, the bounty is awarded to the highest-scored answer out of those which... ...were posted after the bounty was started ...have a score of at least +2 ...were not written by the bounty starter So it just needs to be upvoted at least twice. – Refund

@AdamDiment Check this out - meta.stackexchange.com/questions/147576/… There is no bounty notice i could see on your question now. – Forfeiture

Let us continue this discussion in chat. – Refund

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

Forfeiture

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();
 }
}
  });

Cane

Thanks but this doesn't answer the question. I want the controls to appear, not to have programmatic access to fullscreen functions – Refund

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>

Keijo

Tried this answer - 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 – Refund