Video.js 强制 Flash 控制显示

Posted 2023-03-07

【中文标题】Video.js 强制 Flash 控制显示

【英文标题】：Video.js Force Flash Controls Display

【发布时间】：2014-07-25 14:43:05

【问题描述】：

我开始认为没有办法解决我的 video.js Flash 后备问题。我只是希望控件在桌面上始终可见。我有一个 CSS（下面的代码）可以为 html5 视频播放器处理这个问题。但是，在 Flash 后备中，该栏保持不变，但所有控件、播放、音量等仍然淡出。请谁能告诉我如何让控件在 Flash 播放器上始终可见。

添加评论，这是在 IE8 仅 Flash 后备中发生的。

    .video-js .vjs-control-bar  bottom: -30px; 
    .video-js .vjs-control-bar,.vjs-fade-in,.vjs-fade-out 
        visibility: visible !important;
        opacity: 1 !important;
        transition-duration: 0s !important;
        display: block !important;
    

【参考方案1】：

我认为您还有其他事情要做，因为您发布的 CSS 确实似乎使控件保持可见，即使在回退到 Flash 播放器时也是如此。我创建了一个 jsfiddle 来测试：

http://jsfiddle.net/kaliatech/y3VaK/

我使用techOrder 选项强制使用 Flash 播放器并在 IE、Firefox 和 Chrome 中查看。在所有这些中，右键单击都显示正在使用 Flash，然后即使将鼠标移出，控制栏和控件也不会消失。

因此，您的 CSS 选择器可能由于您页面上的其他竞争 CSS 而关闭，或者您正在以其他方式嵌入播放器来改变这一点，或者您使用的版本可能与我在 jsfiddle 中链接的版本不同。您必须提供更多信息才能获得帮助。

JSFiddle 内容：

HTML

<div class="container">
<video id="example_video_1" class="video-js vjs-default-skin"
  controls preload="auto"  
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='"techOrder": ["flash"]'>
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
 <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
 <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
 <p class="vjs-no-js">To view this video please enable javascript, and 
                      consider upgrading to a web browser that 
                      <a href="http://videojs.com/html5-video-support/" target="_blank">
                      supports HTML5 video</a></p>
</video>
</div>

CSS

.video-js .vjs-control-bar  bottom: -30px; 
.video-js .vjs-control-bar,.vjs-fade-in,.vjs-fade-out 
    visibility: visible !important;
    opacity: 1 !important;
    transition-duration: 0s !important;
    display: block !important;

外部文件

http://vjs.zencdn.net/c/video-js.css http://vjs.zencdn.net/c/video.js

【讨论】：

我正在使用标准演示 HTML 页面，因此通过标准方法处理嵌入。此外，我在页面上拥有的唯一 CSS 是标准 video.js CSS 和我上面的样式。我可能应该在关于 IE8 Flash 后备的帖子中指出这一点（是的，我坚持支持 IE 8 :)