如何在micorostf edge（全屏模式）中隐藏html视频控件

Question

I'm writing an angular directive for a video player. I'd like to have custom controls that should override the native one.
In normal mode all works fine while in fullscreen mode no.

Actually the problems occurs in IE11 and Microsoft Edge.

• In IE11: both the native bar (ok) and the custom one (ko) are
  hidden. I can't show my bar.
• In Edge: I can't hide the native controls bar and I can't show my bar

To hide the bar I tried with

video::-webkit-media-controls {
  display:none !important;
}

video::-webkit-media-controls-enclosure {
  display:none !important;
}

but seems that in microsoft browser doesn't work.

I already read and follow this post about almost the same problem change html5 video controls layout when fullscreen

The problem has nothing to do with angular, but I can't figure out where put my hands to get things works: in the css or do I have to use javascript (how?) to handle the show/hide behaviour of the native control bar?

This is a plunk http://plnkr.co/edit/zGlMN0Qys2yHdWgGXefk?p=preview where you can find my javascript pure code.

I really appreciate any help to get things work!

Luca

Answer 1

The solution resides in the way the requestFullscreen is called. Before I called that method on the video element

$scope.videoElement.requestFullscreen();        

Instead the requestFullscreen method have to be called on container element in order to ensure that the element's children, eg the custom controls, go fullscreen also

$scope.videoContainer.requestFullscreen();