firefox自定义视频控制器不显示 [英] firefox custom video controllers do not show

问题描述

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

I`m having an issue with my custom video controller. When the video is opened in firefox the controllers do not show in fullscreen mode. I tried everything i found in regards to the topic, but no luck so far. Here is the 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；

the video itself has the same z-index;

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

推荐答案

这是一个很疯狂的猜测，因为您没有显示任何js，但是我假设您叫

That's a wild guess since you didn't shown any js, but I will assume you called Element.requestFullscreen() on your video.

虽然它可以在其他浏览器中运行，但在FF中，它将以全屏模式显示您调用它的element的所有非子代.

While it works in other browsers, in FF, this will exclude all non descendants of the element on which you called it from being displayed in the fullscreen mode.

很久以前，我离开了全屏API的消息，因为那是一团糟，但是目前尚无关于正确行为的规范.

I left taking news of the fullscreen API a long time ago, since it was a mess, but at this time specs weren't clear on what should be the correct behavior.

尽管如此，一种适用于每种浏览器的方法是将视频和控件都包装在一个容器中，并在该容器上调用requestFullscreen.

Nevertheless, one thing that works for every browser is to wrap both your video and your controls inside a single container and call requestFullscreen on this container.

然后，您需要使用 :fullscreen 伪类.

Then you will need to style all your elements accordingly in the fullscreen mode with the :fullscreen pseudo-class.

jsfiddle ，因为堆栈片段不允许全屏显示.

jsfiddle since stacksnippets don't allow fullscreen.

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

Sounds easy said like that? Well what I omitted is that still today, all browsers don't have a stable version of this API and that you will have to repeat your code like 5 times to deal with vendor-specifics quirks...

这篇关于firefox自定义视频控制器不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！