Video.js 强制 Flash 控件显示 [英] Video.js Force Flash Controls Display
问题描述
我开始认为没有办法解决我的 video.js Flash 回退问题.我只是希望控件在桌面上始终可见.我有一个 CSS(下面的代码)可以为 HTML5 视频播放器处理这个问题.但是，在 Flash 回退中，条形保持不变，但所有控件、播放、音量等仍然淡出.谁能告诉我如何让控件在 Flash 播放器上始终可见.
添加一条评论，这是在 IE8 仅 Flash 回退上发生的.
.video-js .vjs-control-bar { 底部:-30px;}.video-js .vjs-control-bar,.vjs-fade-in,.vjs-fade-out {可见性:可见！重要；不透明度:1！重要；转换持续时间:0s！重要；显示:阻止！重要；}我认为您还有其他事情要做，因为您发布的 CSS 似乎确实使控件保持可见，即使回退到 Flash 播放器也是如此.我创建了一个 jsfiddle 来测试:
我使用了 techOrder 选项来强制使用 Flash 播放器并在 IE、Firefox 和 Chrome 中查看.在所有这些中右键单击都显示正在使用Flash，然后即使将鼠标移出，控制栏和控件也没有消失.
因此，也许您的 CSS 选择器由于页面上的其他竞争 CSS 而关闭，或者您正在以其他方式嵌入播放器来改变这一点，或者您使用的版本与我在 jsfiddle 中链接的版本不同.您必须提供更多信息才能获得帮助.
JSFiddle 内容:
HTML
<video id="example_video_1" class="video-js vjs-default-skin"控制 preload="auto" width="640" height="264"海报="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">要观看此视频，请启用 JavaScript，并且考虑升级到一个网络浏览器<a href="http://videojs.com/html5-video-support/" target="_blank">支持 HTML5 视频</a></p></视频>CSS
.video-js .vjs-control-bar { 底部:-30px;}.video-js .vjs-control-bar,.vjs-fade-in,.vjs-fade-out {可见性:可见！重要；不透明度:1！重要；转换持续时间:0s！重要；显示:阻止！重要；}外部文件
I'm starting to think there is no way to solve my video.js Flash fallback issue. I simply want the controls to be visible at all times on the desk-top. I have a CSS (code below) which handles this for the HTML5 video player. However, on the Flash fallback the bar stays but all the controls, play, volume, etc. still fade out. Please can anyone tell me how to keep the controls visible at all times on the Flash player.
Adding a comment this is happening on IE8 only Flash fallback.
.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;
}
I think you have something else going on because the CSS you posted does appear to keep the controls visible even when falling back to Flash player. I created a jsfiddle to test:
I used the techOrder option to force flash player and viewed in IE, Firefox, and Chrome. In all of them right clicking showed Flash was in use, and then even after moving mouse out, the control bar and controls never faded out.
So perhaps your CSS selectors off due to other competing CSS on your page, or perhaps you are embedding player in some other way that changes this, or perhaps you are using different versions than what I have linked in jsfiddle. You'll have to provide more info to get assistance.
JSFiddle contents:
HTML
<div class="container">
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
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;
}
External Files
这篇关于Video.js 强制 Flash 控件显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
