如何在micorostf边缘隐藏html视频控件(全屏模式)

Question

我在为一个视频播放器写一个角度指令。我希望有应该覆盖本机控件的自定义控件。

在正常模式下，所有的工作方式都很好，而在全屏模式下，没有。

实际上，这些问题发生在IE11和Microsoft中。

• 在IE11中:本机条(ok)和自定义条(ko)都是 藏起来了。我不能展示我的酒吧。
• 在边缘:我无法隐藏本机控件栏，也无法显示我的栏

把我试过的酒吧藏起来

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

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

但似乎在微软浏览器中不起作用。

我已经阅读并跟踪了这篇关于几乎相同的change html5 video controls layout when fullscreen问题的文章

这个问题与角度无关，但我不知道把我的手放在哪里才能工作:在css中，还是我必须使用javascript (如何使用？)处理本机控制栏的显示/隐藏行为？

这是一个plunk http://plnkr.co/edit/zGlMN0Qys2yHdWgGXefk?p=preview，您可以在这里找到我的javascript纯代码。

我真的很感激你能帮我把事情办好！

卢卡

Answer 1

解决方案驻留在调用requestFullscreen的方式中。在我在视频元素上调用那个方法之前

$scope.videoElement.requestFullscreen();        

相反，必须在容器元素上调用requestFullscreen方法，以确保元素的子元素(例如自定义控件)也能全屏运行。

$scope.videoContainer.requestFullscreen();