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

Question

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

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

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

隐藏我试过的栏

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

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

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

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

这个问题与 angular 无关，但我不知道该把我的手放在什么地方：在 css 还是我必须使用 [=45] =]（如何？）处理本机控制栏的 show/hide 行为？

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

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

卢卡

Answer 1

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

$scope.videoElement.requestFullscreen();        

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

$scope.videoContainer.requestFullscreen();