Firefox 自定义视频控制器不显示

我的自定义视频控制器遇到问题。 在 Firefox 中打开视频时，控制器不会以全屏模式显示。 我尝试了与该主题相关的所有内容，但到目前为止还没有运气。 这是 HTML：

<div id="contentContainer" class="border">
<div id="videoStreamed">    
    <video autoplay="" name="media" src="blob:https://****/f3213f7c-2955-46f6-94d5-e737dc8d619e" title="Customer Centricity" width="100%" height="100%">
        Your browser does not support the video tag.
    </video>
</div>
<div id="videoController">
    <div id="videoProgress">
        <div class="progress-bar">
            <div id="progress-fill-video" style="width: 7.77856%;">
            </div>
        </div>
    </div>
    <div id="playOrPause" class="controllerTabs"><i class="activeController icon-pause"></i></div>
    <div id="volume" class="controllerTabs"><i class="activeController icon-mute"></i></div>
    <div id="subs" class="controllerTabs"><i class="icon-sub inactiveController"></i></div>
    <div id="duration">
        <span id="minutes">00</span>:<span id="seconds">12</span>
        <span id="total">/ 02:39</span>
    </div>
    <div id="download" class="controllerTabs"><i class=" icon-download inactiveController"></i></div>
    <div id="trascript" class="controllerTabs"><i class=" icon-transcript inactiveController"></i></div>
    <div id="fullScreen" class="controllerTabs"><i class=" icon-fullscreen activeController"></i></div>
</div>
</div>

这是CSS：

#videoStreamed {
    position: relative;
    height: 90%;
    width: 100%;
    z-index: 1 !important;}

视频本身具有相同的 z-index；

#videoController {
    z-index: 2147483647;
    position: fixed;
    bottom: 0;
    width: 100%;
}

这是一个疯狂的猜测，因为你没有显示任何 js，但我假设你调用了Element.requestFullscreen()在你的视频上。

虽然它适用于其他浏览器，但在 FF 中，这将排除所有非后代浏览器element您在其中调用它以全屏模式显示。

我很久以前就离开了全屏 API 的新闻，因为它很混乱，但此时规范还不清楚什么应该是正确的行为。

然而，适用于每个浏览器的一件事是将视频和控件包装在一个容器中并调用requestFullscreen在这个容器上。

然后，您需要在全屏模式下相应地设置所有元素的样式:fullscreen伪类。

jsfiddle因为 stacksnippets 不允许全屏。

听起来很容易吗？好吧，我忽略的是，直到今天，所有浏览器都没有这个 API 的稳定版本，你将不得不重复你的代码 5 次来处理特定于供应商的怪癖......