CODEWITHSUNDEEP
javascriptangularjshtmlcsshtml5-video
Luca Rasconi
Luca Rasconi

Reputation: 1105

how to hide html video controls in micorostf edge (fullscreen mode)

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.


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

Upvotes: 0

Views: 2237

Answers (1)

Luca Rasconi
Luca Rasconi

Reputation: 1105

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, e.g. the custom controls, go fullscreen also

$scope.videoContainer.requestFullscreen();

Upvotes: 2

Related Questions