gpt4 book ai didi

javascript - firefox 自定义视频 Controller 不显示

转载 作者:行者123 更新时间:2023-11-28 00:26:49 24 4
gpt4 key购买 nike

我的自定义视频 Controller 有问题。在 firefox 中打开视频时, Controller 不会以全屏模式显示。我尝试了与该主题相关的所有内容,但到目前为止还没有成功。这是 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 中,这将排除您在其上调用它的 元素 的所有非后代以全屏模式显示。

我很久以前就离开了全屏 API 的新闻,因为它一团糟,但当时规范并不清楚什么是正确的行为。

不过,对所有浏览器都适用的一件事是将您的视频和控件包装在一个容器中,并对该容器调用 requestFullscreen

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


jsfiddle因为 stacksnippets 不允许全屏显示。


听起来很简单?好吧,我忽略的是,直到今天,所有浏览器都没有这个 API 的稳定版本,你将不得不重复你的代码大约 5 次来处理特定于 vendor 的怪癖......

关于javascript - firefox 自定义视频 Controller 不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54604360/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com