Video.js 控件显示奇怪，为啥？
Posted
技术标签:
【中文标题】Video.js 控件显示奇怪，为啥？【英文标题】：Video.js controls showing wierdly, why?Video.js 控件显示奇怪，为什么？ 【发布时间】：2021-03-28 23:35:43 【问题描述】：我的 video.js 控件没有显示在视频中，而是在视频之外显示了许多不必要的选项，如下面的屏幕截图所示。
我的代码是这样的：
% block content%
<style>
#video-js
max-width:auto;
width:auto;
max-height:auto;
height:auto;
margin:auto;
padding:auto;
background-color: #343A40;
</style>
<video
id="video-js"
class="video-js vjs-custom-skin"
controls
preload="auto"
data-setup=""
autoplay
>
<source src="http://url.m3u8" type="application/x-mpegURL" />
<source src="http://url.flv" type="video/x-flv" />
<p class="vjs-no-js">
To view this video please enable javascript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<br>
<br>
<script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
<script src="https://unpkg.com/browse/@videojs/http-streaming@2.6.0/dist/videojs-http-streaming.js"></script>
% endblock %
我怎样才能让这些奇怪的控件消失，而让视频控件正常，例如播放、暂停、静音、音量增大/减小。
【问题讨论】：
样式应该进入<head>。
不幸的是它没有帮助解决问题
我无法重现您的问题。您是否有一些可能会覆盖视频样式的 CSS？你的 html 的其余部分是什么样的？
【参考方案1】：
您需要添加 Video.js 样式，https://vjs.zencdn.net/7.10.2/video-js.css
此外，虽然这不是问题的原因，但包括 http-streamimg 是多余的。它包含在 Video.js 7+ 中。
【讨论】：
【参考方案2】：添加上面提到的 Video.js 样式后，您 然后应该能够消除、重新排列控件和调整颜色， 通过添加这样的行：
<!-- Change ordering "current-time / duration" to appear on control-bar: -->
<!-- See: https://github.com/videojs/video.js/issues/2507 -->
<style>
.video-js .vjs-current-time display: block;
.video-js .vjs-time-divider display: block;
.video-js .vjs-duration display: block;
.video-js .vjs-remaining-time display: none;
.video-js .vjs-load-progressdisplay: inline-block; background: PaleGreen; height: 8px; width:100%;
.video-js .vjs-play-progressdisplay: inline-block; background: LightCoral; height: 8px; width:100%;
.video-js .vjs-picture-in-picture-control display: none;
# (These with leading "#" sign are 'commented-out'...are present here just so the NAMES of various entities are avail for experimenting.)
#.video-js .vjs-progress-holder margin-left: 0px; margin-right: 0px; background: Blue;
#.video-js .vjs-loading-spinnerdisplay: block;
#.video-js .vjs-progress-holder .vjs-play-progress display: none;
</style>
Hope these help...
【讨论】：
以上是关于Video.js 控件显示奇怪，为啥？的主要内容，如果未能解决你的问题，请参考以下文章
为啥在 WordPress 的 ajax ServerInterval 升级中交换 video.js 样式？