如何制作全宽videojs v5进度条？

我想更改videojs v5控件布局，以便在vjs-control-bar区域顶部制作一个全宽度进度条，类似于v5以前的播放器皮肤。如何制作全宽videojs v5进度条？

这里是V5皮肤：

这里是V5前的皮肤。请注意全宽进度条：

我应该如何继续？是否有必要修改ProgressControl组件中的component structure tree，还是只能使用CSS来完成，现有的ProgressControl组件？

我注意到，我可以把它放在上面，通过改变从flex的vjs-progress-controldisplay CSS属性block，initial或inline但我不能将宽度设置为100％（其他ProgressControl组件宽度仍在考虑）。我认为这是因为vjs-progress-control仍处于容器的弹性流动中。

编辑

我取得了一些进展。我可以用下面的CSS达到预期的效果：

.vjs-progress-control { 
    position: absolute; 
    bottom: 26px; /* The height of the ControlBar minus 4px. */ 
    left: 0; 
    right: 0; 
    width: 100%; 
    height: 10px; /* the height must be reduced from 30 to 10px in order to allow the buttons below (e.g. play) to be pushed */ 
} 
.vjs-progress-holder {/* needed to have a real 100% width display. */ 
    margin-left: 0px; 
    margin-right: 0px; 
}

除非你们其中一个人找到一种方法，使其更好，我将在此编辑为接受的答案时，将被允许。

来源

2015-10-20 Billybobbonnet

我喜欢你的解决方案比接受的答案更好 - 少代码，它运作良好。其余的只是绒毛。 – Thomas

在课程名称前面缺少'.'。 – tmm1

@ tmm1我的坏！我只是修复它。 – Billybobbonnet

DEMO

.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; 
    }

仍然有需要的款式字幕，标题和章节按钮

来源

2015-10-20 12:16:58 rafaelcastrocouto

这不适用于Chrome之外。其他浏览器显示控制栏和进度栏之间的重叠。以及OP的解决方案也是如此。我不知道重叠的解决方案是什么，但认为我会提及它。虽然，你的答案+1。 – Thomas

.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%; 
}

这似乎摆脱我在其他浏览器中有来自继承了:hover造型的问题的Video.js。更有成熟的开发人员可能能够使扩展成为自下而上的扩展，从而无需围绕进度控制和颜色位置进行花式步法。

来源

2015-12-03 22:00:44 Thomas

这是一个最小的自定义皮肤（在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%; 
    } 
}

来源

2017-05-03 18:51:01 tmm1

如何制作全宽videojs v5进度条？

回答

相关问题