html5+js制作自己的视频控件(实现弹幕效果，拖动进度条，播放时间) 一

制作自己的视频控件

今天我们自己制作网页视频播放控件。效果图如下：

video标签

在h5中新添的视频标签video，设置了controls属性后，会出现默认的控件。而我们希望给这个控件添加更多的效果和样式，所以controls属性我们不设置，通过js来制作自己的播放器。

css样式我会在最后贴出，我们的目标是实现控件的功能

html结构

<div class="father">
        <!-- 视频 -->
        <video src="./1.mp4" class="video"></video>
        <!-- 控件 -->
        <div class="mycontrols">
            <!-- 开始按钮与暂停 -->
            <div class="play">播放</div>
            <!-- 时间 -->
            <div class="timer">00:00/00:00</div>
            <!-- 弹幕 -->
            <div class="danmufa">
                <input type="text" placeholder="发条友善的弹幕吧" class="danmu_inp">
                <button class="danmu_btn">发射</button>
            </div>
            <!-- 倍数播放 -->
            <div class="mu-normal">倍速</div>
            <div class="multi">  

                <div>2x</div>
                <div>1.5x</div>
                <div>1.25x</div>
                <div>1x</div>
                <div>0.5x</div>
            </div>
            <!-- 音量 -->
            <div class="sound-fa">音量</div>
            <!-- <div>
                
            </div> -->
            <!-- 全屏 -->
            <div class="screen">全屏</div>
            <!-- 进度条 -->
            <div class="loadfather">
                <div class="loading"></div>
                <div class="load_i"></div>
            </div>
        </div>
    </div>

播放和暂停

所用到的知识点：
play()方法让视频播放
pause()方法让视频暂停
paused属性 判断当前视频是否是暂停
给播放按钮添加点击事件，通过paused判断当前视频的状态。
代码如下

var video=document.getElementsByClassName("video")[0];
var play=document.getElementsByClassName("play")[0];
// 播放按钮
play.οnclick=function(){
    // 判断视频是否暂停
    if(video.paused){
        video.play();
        play.innerHTML="暂停";
    }else{
        video.pause();
        play.innerHTML="播放";
    }
}

视频当前播放时间和总时间

所用到的知识点：
currentTime属性 获取当前视频播放时间
duration属性 获取当前视频的总时长
然后我们在控制台使用计时器打印这两个属性看一下：

我们希望时间以00:00/00:00的格式显示出来，要怎么办呢？
我们先看当前时间，00:00，一分60秒那么当前的分钟数应该是 （当前的时间/60）
如果当前分钟数小于10那么我就在他的前面拼一个0（就是为了让格式好看！）

//因为有小数所以使用parseInt取整，使用模板字符串拼接
var nowMinute=parseInt(nowTime/60)>10?`${parseInt(nowTime/60)}:`:`0${parseInt(nowTime/60)}:`

然后当前的秒数应该是 （当前的时间%60）

var nowSecond=parseInt(nowTime%60)>10?`${parseInt(nowTime%60)}`:`0${parseInt(nowTime%60)}`

那么总时长和当前时长一个模式就可以了
最后看看这个计时器内部所有的代码：

var vidtime=document.getElementsByClassName("timer")[0];
var timer=setInterval(function () {
    // 当前时长，以及总时长
    var nowTime=video.currentTime;
    var allTime=video.duration;
    // 当前准确的时间速
    var nowMinute=parseInt(nowTime/60)>10?`${parseInt(nowTime/60)}:`:`0${parseInt(nowTime/60)}:`
    var nowSecond=parseInt(nowTime%60)>10?`${parseInt(nowTime%60)}/`:`0${parseInt(nowTime%60)}/`
    //总时长解析后的时间
    var allMinute=parseInt(allTime/60)>10?`${parseInt(allTime/60)}:`:`0${parseInt(allTime/60)}:`
    var allSecond=parseInt(allTime%60)>10?`${parseInt(allTime%60)}`:`0${parseInt(allTime%60)}`
    console.log(nowMinute,nowSecond,allMinute,allSecond);
    vidtime.innerHTML=`${nowMinute}${nowSecond}${allMinute}${allSecond}`
}, 1000)

效果如图：

播放进度条

进度条并没有用到什么其他的属性
我们实现的进度条的思路是:
一个大的div来表示总的进度条，然后当前进度条在播放的时候改变进度条的宽度，让他慢慢铺满总的进度条。
当前进度条的宽度=当前时间/总时间*总宽度；

var loadfather=document.getElementsByClassName("loadfather")[0];
下面代码写在上面的计时器里
// 获取总进度条的长度
    var loadWidth=loadfather.offsetWidth;
    // 计算当前进度条的宽度
    var second_width=nowTime/allTime*loadWidth;
    // 改变进度条的位置
    loadfather.children[0].style.width = second_width + 'px';
    loadfather.children[1].style.left = second_width + 'px';

效果如下：

点击进度条进行跳转

我们在点击到进度条上时，通过事件对象获取当前鼠标点击位置的x轴位置。

// 点击进度条进行修改视频当前时间
    loadfather.onclick = function(e){
        loadfather.children[0].style.width = e.offsetX + 'px';
        loadfather.children[1].style.left = e.offsetX + 'px';
        // 对应的播放时间
        // 当前点击位置 / 进度条的总宽度 * 总时长
        video.currentTime = e.offsetX/loadfather.clientWidth *video.duration;
    }

上面我们说了当前进度条的宽度=当前时间/总时间*总宽度；
那么鼠标点击进度条时的x轴宽度就是当前进度条的宽度
反过来推当前时间=当前点击位置 / 进度条的总宽度 * 总时长，
然后我们改变当前播放的时间 （也就是.currentTime属性），在计时器又一次运行时，视频的进度就会被修改。

下一篇我们把后面得功能实现！

（（如果这篇文章有什么问题请及时联系我！））