我想更改videojs v5控件布局,以便在vjs-control-bar
区域的顶部创建一个全宽度进度条,类似于v5之前的播放器皮肤。
我该怎么办?是否有必要修改ProgressControl
组件中的component structure tree,还是仅使用CSS,使用现有的ProgressControl
组件进行修改?
我注意到我可以将vjs-progress-control
display
CSS属性从flex
更改为block
,initial
或{{1}但我无法将宽度设置为100%(仍然考虑其他ProgressControl组件宽度)。我认为这是因为inline
仍然在容器的flex流中。
修改
我取得了一些进展。我可以使用以下CSS实现所需的效果:
vjs-progress-control
除非你们中的一个找到改善方法,否则我会在允许的情况下将此编辑发布为已接受的答案。
答案 0 :(得分:5)
.vjs-fluid {
overflow: hidden;
}
.vjs-control-bar {
display: block;
}
.vjs-control {
position: absolute;
}
.vjs-progress-control {
bottom: 28px; left: 0;
height: 10px;
width: 100%;
}
.vjs-progress-holder {
position: absolute;
left: 0; margin: 0;
height: 8px; width: 100%;
}
.vjs-play-progress,
.vjs-load-progress {
height: 8px;
}
.vjs-play-progress:before {
font-size: 12px; top: -2px;
text-shadow: 0 0 2px black
}
.vjs-current-time {
display: block;
left: 35px;
}
.vjs-time-divider {
position: absolute;
display: block;
left: 70px;
}
.vjs-remaining-time {
display: none;
}
.vjs-duration {
display: block;
left: 70px;
}
.vjs-volume-menu-button {
position: absolute;
bottom: 0; right: 55px;
}
.vjs-playback-rate {
position: absolute;
bottom: 0; right: 28px;
}
.vjs-fullscreen-control {
position: absolute;
bottom: 0; right: 0;
}
仍然需要设置字幕,字幕和章节按钮的样式
答案 1 :(得分:4)
.video-js .vjs-progress-control {
position:absolute;
width: 100%;
top:-.3em;
height:3px;
/* deal with resulting gap between progress control and control bar that
is the result of the attempt to keep things "clickable" on the controls */
background-color: #2B333F;
background-color: rgba(43, 51, 63, 0.7);
}
.video-js .vjs-progress-holder {
position:absolute;
margin:0px;
top:0%;
width:100%;
}
这似乎摆脱了我在其他浏览器中使用从video.js继承的:hover
样式所遇到的问题。更多精通css
开发人员可能能够使扩展成为自下而上的扩展,从而无需围绕进度控制和颜色的位置进行花哨的步法。
答案 2 :(得分:0)
这是一个最小的自定义皮肤(在scss中),在其余控件上方显示全宽进度条。这适用于video.js 5.19.2
.video-js.vjs-custom-skin {
.vjs-custom-control-spacer {
display: flex;
flex: 1 1 auto;
}
.vjs-time-divider {
display: inherit;
}
.vjs-current-time {
margin-left: 1em;
}
.vjs-current-time, .vjs-duration {
display: inherit;
padding: 0;
}
.vjs-remaining-time {
display: none;
}
.vjs-play-progress:before {
display: none;
}
.vjs-progress-control {
position: absolute;
left: 0;
right: 0;
width: 100%;
height: .5em;
top: -.5em;
&:hover {
height: 1.5em;
top: -1.5em;
}
}
.vjs-progress-holder {
margin: 0;
height: 100%;
}
}