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

【问题标题】：how to hide html video controls in micorostf edge (fullscreen mode)如何在 Microsoft Edge 中隐藏 html 视频控件（全屏模式）
【发布时间】：2015-10-26 16:19:42
【问题描述】：

我正在为视频播放器编写一个角度指令。我想拥有应该覆盖原生控件的自定义控件。
在正常模式下一切正常，而在全屏模式下没有。

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

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

隐藏我尝试过的栏

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 纯代码。

我非常感谢任何帮助以使事情顺利进行！

卢卡

【问题讨论】：

嗨 Luca，我还没有在 Edge 和 IE11 上测试我的解决方案，但你可以尝试在你的 head 标签中添加这个：<style> .mr-controls-bar{ display:none; } </style> 尽快我会试试这是否适用于那些浏览器。
嗨 Pierfrancesco，但我为什么要隐藏自定义栏？
我试过了，还是不行。

标签： javascript angularjs html css html5-video

【解决方案1】：

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

$scope.videoElement.requestFullscreen();

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

$scope.videoContainer.requestFullscreen();

【讨论】：