javascript - Video.js 控件显示奇怪,为什么?
问题描述
我的 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"
width=""
height=""
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 %}
我怎样才能让这些奇怪的控件消失,而只有正常的视频控件,如播放、暂停、静音、音量增大/减小。
解决方案
添加上面提到的 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-progress{display: inline-block; background: PaleGreen; height: 8px; width:100%; }
.video-js .vjs-play-progress{display: 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-spinner{display: block;}
#.video-js .vjs-progress-holder .vjs-play-progress { display: none; }
</style>
Hope these help...
推荐阅读
- angular - Angular - 如何更快地构建 72 个生产包
- opencv - ORB+BFMatcher 是否适合识别重复图像(有细微的变化?)
- c# - 从c#调用ruby脚本,进程不退出
- sorting - SELECT DISTINCT 仅用于 Google 表格查询中的一列
- c# - 为什么我的 OpenProcess(..) 调用总是返回 0?
- html - 带有图像损坏对齐的引导下拉菜单
- selenium - Linux / chromium 上的 selenium TimeoutException
- node.js - 通过 Google 操作的帐户链接过程(通过 google 操作的令牌生成过程)
- vue.js - 一些 .vue(和 .ts)文件的 Webpack 源映射不再包含原始代码(sourcesContent)
- javascript - 无法调用 beforeDestory 挂钩中定义的回调