小白级别继续,大咖绕路
这里只是在pc端搞里一下,不知道其他平台有什么问题,只是给大家个思路。
videojs的优缺点什么的,这里就不说了,百度一下,各位大咖,一大啪啦的讲解,研究了两天始终不知道怎么去自定义控件,videojs 有一个专门设计皮肤的网站(传送法阵:https://codepen.io/heff/pen/EarCt),但是搞了半天还是不懂怎么弄,最后在一篇文章中受到启发,其实很简单,暴力走起。
先搞一张图
好吧, 我承认,样式很low,这里就不吐槽设计了
ok,上代码
myPlayer = videojs('my-video', {
'controls': false, //关闭原来的,不然hover的时候总出来
'BigPlayButton': false,
'loop': true
},function(){
var ctrlBar = createEle(); // 创建一个div节点
this.el().appendChild(ctrlBar); // 添加进去,css设置好样式就可以了
// 初始化音量宽度
var vol = this.volume();
$('.vol-box .vol-on').width(vol * 100);
// 进度条自动前进
this.on('timeupdate', function(){
var curTime = this.currentTime();
var durTime = this.duration();
var w = (curTime/durTime * this.width()).toFixed(2);
$('.progress>p').width(w);
$('.progress>span').css('left', w + 'px');
});
// 播放
this.play();
});
function createEle (){
var _html = `
<div class="progress">
<P></p>
<span></span>
</div>
<div class="ctrls clearfix">
<div class="play-box fl">
<img class="play-img" src="assets/images/vjs-play.png"/>
</div>
<div class="vol-box fr">
<img src="assets/images/vjs-volumn.png"/>
<span class="vol-line"></span>
<span class="vol-on"></span>
<span class="vol-top-line"></span>
</div>
</div>
`;
var ctrlBar = document.createElement('div');
ctrlBar.className = 'vjs-mycontrol-bar';
ctrlBar.innerHTML = _html;
return ctrlBar;
}
好吧,貌似没什么难点,就是给大家一个思路,当然,官方推荐使用Component,这里就不去搞了,
想研究的同学,参考一下这个文章 https://www.cnblogs.com/a2502971/p/6691470.html 最后定制组件那节就可以了