2019-05-16 HTML5的自定义视频播放器

播放暂停键的控制

播放和暂停是一个div的不一样的class

通过点击然后改变class名来显示暂停还是播放。
有两种方式改变class名
HTML

<!--video元素 -->
<video class='videoNode' src='data/imooc.mp4' poster="data/poster.jpg"></video>
<!-- 控制播放暂停的按钮 -->
<div class='playNode'></div>

css

//播放按钮
.playNode{
    float: left;width: 15px;height: 17px;margin: 6px 0 0 14px;
    background: url(images/playNode.png) no-repeat;cursor: pointer;
}
//暂停按钮
.pauseNode{
    float: left;width: 15px;height: 17px;margin: 6px 0 0 14px;
    background: url(images/pause.png) no-repeat;cursor: pointer;
}

播放按钮playNode.png
暂停按钮pause.png

方法一：

js

var PlayNode = document.getElementsByClassName('playNode')[0],
        VideoNode = document.getElementsByClassName('videoNode')[0];
PlayNode.onclick = function(){
  //可以使用classList.toggle方法来切换
  this.classList.toggle('pauseNode');
}

方法二：

利用传统模式进行修改
js

var PlayNode = document.getElementsByClassName('playNode')[0],
        VideoNode = document.getElementsByClassName('videoNode')[0],
        PlayBln = true;
PlayNode.onclick = function(){
  PlayBln = !PlayBln;
        if(PlayBln == false){
            this.className = 'pauseNode';
            VideoNode.play();
                        
        }
        else{
            this.className = 'playNode';
            VideoNode.pause();
        }
}

全屏事件

针对不同的浏览器

HTML

<!-- 全屏的按钮 -->
<div class='fullNode'></div>

js

var VideoNode = document.getElementsByClassName('videoNode')[0],
    FullNode = document.querySelector('.fullNode');
    //获取HTML中第一个class为fullNode的元素
FullNode.onclick = function(){
        if(VideoNode.webkitRequestFullscreen){
            VideoNode.webkitRequestFullscreen();
        }
        else if(VideoNode.mozRequestFullScreen){
            VideoNode.mozRequestFullScreen();
        }
        else{
            VideoNode.requestFullscreen();
        }
    };

播放时间事件

进度条的时间的变化，起始时间与总时间

HTML

<!-- video元素 -->
    <video class='videoNode' src='data/imooc.mp4' poster="data/poster.jpg"></video>
    <!-- 控制器的元素 -->
    <div class='controlsNode'>
<!-- video的进度条 -->
      <div class='loadNode'>
            <div class='loadLeft'></div>
            <div class='loadRight'></div>
            <!-- 拖动进度条的按钮 -->
            <div class='crlNode'></div>
            <!-- 真正的进度条 -->
            <div class='lineNode'>
                <div class='lineRight'></div>
            </div>
      </div>
     <!-- 时间的元素 -->
      <div class='timeNode'>
            <span class='now'>00:00</span>
            <span> - </span>
            <span class='all'>4:30</span>
      </div>    
    </div>

js

var VideoNode = document.getElementsByClassName('videoNode')[0],
    nowNode = document.querySelector('.now'),
    allNode = document.querySelector('.all'),
    LineNode = document.querySelector('.lineNode'),
    CrlNode = document.querySelector('.crlNode');

//解决了 上来时间的NAN的问题，addEventListener是给HTML元素添加触发事件，返回总时间
    VideoNode.addEventListener('canplay',function(){
        //duration 属性返回当前音频/视频的长度，以秒计
        var needTime = parseInt(VideoNode.duration);
        var  s = needTime%60;//几秒
        var  m = parseInt(needTime / 60);//几分
        var timeNum = toDou(m)+':'+toDou(s);
        allNode.innerHTML = timeNum;
    },false);
//解决 时间不足10 的一个问题，不足10数前补0
    function toDou(time){
        return time<10?'0'+time:time;
    }
//当视频播放的时候 需要当前的时间动起来
    //timeupdate该属性返回音频/视频（audio/video）的播放位置（以秒计）
    VideoNode.addEventListener('timeupdate',function(){
        //看一眼目前的 百分比进度
        //console.log(VideoNode.currentTime/VideoNode.duration*100);
        LineNode.style.width = VideoNode.currentTime/VideoNode.duration*100+'%';

        //console.log(LineNode.offsetWidth)
        CrlNode.style.left = LineNode.offsetWidth - 8.5 + 'px'

        var needTime = parseInt(VideoNode.currentTime);
        var  s = needTime%60;
        var  m = parseInt(needTime / 60);
        var timeNum = toDou(m)+':'+toDou(s);
        nowNode.innerHTML = timeNum;
    },false);

进度条拉拽事件

拉拽进度按钮，视频进度随之改变，并且保持暂停或播放。时间也随之改变

js

    //拖拽进度条按钮
    CrlNode.onmousedown = function(e){
        var ev = e || event;
        var l = ev.clientX - this.offsetLeft;
        VideoNode.pause();

        document.onmousemove = function(e){
            var ev = e || event;
            var needX = ev.clientX - l;
            var maxX = LoadNode.offsetWidth - 8.5;

            needX = needX < -8.5 ? -8.5 : needX;
            needX = needX > maxX ? maxX : needX;
            CrlNode.style.left = needX + 'px';
            LineNode.style.width = (CrlNode.offsetLeft+9)/LoadNode.offsetWidth*100 + '%';


        };
        document.onmouseup = function(){
            document.onmousemove = document.onmouseup = null;

            VideoNode.currentTime = VideoNode.duration * (CrlNode.offsetLeft+9)/LoadNode.offsetWidth;
            //console.log((CrlNode.offsetLeft+9)/LoadNode.offsetWidth);
            //console.log()
            
            //VideoNode.play();
            //PlayBln = false;
            //className = 'pauseNode';
            if(PlayBln == false){
                //console.log(1);
                PlayNode.className = 'pauseNode';
                VideoNode.play();
            }
            else{
                //console.log(2);
                PlayNode.className = 'playNode';
                VideoNode.pause();
            }
        };
        return false;
    };