javascript - 如何在 Microsoft Edge 中隐藏 html 视频控件(全屏模式)

Question

我正在为视频播放器编写 Angular Directive(指令)。 我想要自定义控件来覆盖 native 控件。
在正常模式下一切正常，而在全屏模式下没有。

实际上问题出现在IE11和Microsoft Edge中。

• 在 IE11 中:原生栏 (ok) 和自定义栏 (ko) 都是
  隐。我不能显示我的酒吧。
• 在 Edge 中:我无法隐藏 native 控件栏，也无法显示我的 酒吧

隐藏我试过的栏

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

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

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

我已经阅读并关注了这篇关于几乎相同问题的帖子 change html5 video controls layout when fullscreen

这个问题与 Angular 无关，但我无法弄清楚我的手在哪里工作:在 css 中还是我必须使用 javascript(如何？)来处理的显示/隐藏行为 native 控制栏？

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

我非常感谢任何帮助让事情顺利进行!

卢卡

Answer 1

解决方案在于调用 requestFullscreen 的方式。 在我对视频元素调用该方法之前

$scope.videoElement.requestFullscreen();        

相反，必须在容器元素上调用 requestFullscreen 方法，以确保元素的子元素，例如自定义控件，也可以全屏显示

$scope.videoContainer.requestFullscreen();