HTML5自定义视频播放器源码

video对象

兼容性写法

    video controls>
            source src="data/demo.ovg">
            source src="data/demo.mp4">
            source src="data/demo.webm">
            您的浏览器不支持，请升级您的浏览器    /video>
    

video 标签 width height autoplay muted

poster带有预览图（海报图片）的视频播放器

video src='data/demo.mp4' muted controls autoplay height='400' width="200" poster='data/poster.jpg'>
    /video>
    

选中video标签

    VAR VideoNode = document.getElementById('myVideo');
    

src控制视频的来源

VideoNode.src = 'data/demo.ogv';
    

手动设置控件 controls

VideoNode.controls = true;
    

设置视频音量

VideoNode.volume = 0.5;
    

currentTime当前播放时间

快进效果

gogogo.onclick = function(){
                VideoNode.currentTime = VideoNode.currentTime + 3;
        }
    ;
    

暂停 pause()

      stopNode.onclick = function(){
                VideoNode.pause();
        }
    ;
    

播放play()

     playNode.onclick = function(){
                VideoNode.play();
        }
    ;
    

load 刷新播放器的事件

      reloadNode.onclick = function(){
                VideoNode.src = 'data/demo.mp4';
                VideoNode.load();
        }
    ;
    

canplay 视频已经加载好 可以开始播放了

 VideoNode.addEventListener('canplay',function(){
                console.LOG('视频已经加载好 可以开始播放了');
        }
    );
    

requestFullscreen 让video标签变成全屏

VideoNode.webkitRequestFullscreen();
    VideoNode.mozRequestFullScreen();
        fullScreenNode.onclick = function(){
            if(VideoNode.webkITRequestFullscreen){
                    VideoNode.webkitRequestFullscreen();
            }
            else if(VideoNode.mozRequestFullScreen){
                    VideoNode.mozRequestFullScreen();
            }
        }
    ;
    

volumechange 当音量更改时

    VideoNode.onvolumechange = function(){
                console.log('volumechange');
        }
    ;
    

声音随机更改

        volumeNode.onclick = function(){
                VideoNode.volume = Math.random();
        }
    ;
    

seeking 当用户开始拖动进度条时 就会触发的事件

 var seekingNum = 0;
        VideoNode.onseeking = function(){
                console.log('seeking...');
                seekingNum++;
                seeking.innerHTML = seekingNum;
        }
    ;
    

seeked 当用户对视频的进度条并且已经完成操作时会触发的事件

   var seekedNum = 0;
        VideoNode.onseeked = function(){
                console.log('seeked...');
                seekedNum++;
                seeked.innerHTML = seekedNum;
        }
    ;
    

timeupdate监听视频播放的状态

       VideoNode.addEventListener('timeupdate',function(){
                // 总时长，以分钟：秒的形式显示            let allTime = parseInt(VideoNode.duration/60)+':'+parseInt(VideoNode.duration%60);
                // 当前时间，以分钟：秒的形式显示            let nowTime = parseInt(VideoNode.currentTime/60)+':'+parseInt(VideoNode.currentTime%60);
                timeNode.innerHTML = nowTime+'/'+allTime;
        }
    )

readystate 视频的准备信息

  console.log(VideoNode.readyState);
        setTimeout(function(){
                console.log(VideoNode.readyState);
        }
    ,500);
    

playbackRate 查看或设置视频的一个播放速度

 console.log(VideoNode.playbackRate)

Rate设置倍速

//Rate设置0.5倍速        RateNode.children[0].onclick = function(){
                VideoNode.playbackRate = 0.5;
        }
    ;
        //Rate设置1倍速        RateNode.children[1].onclick = function(){
                VideoNode.playbackRate = 1;
        }
    ;
        //Rate设置2倍速        RateNode.children[2].onclick = function(){
                VideoNode.playbackRate = 2;
        }
    ;
    

loop的设置

 loopNode.onclick = function(){
            if(VideoNode.loop == false){
                    this.innerHTML = '循环';
                    VideoNode.loop = true;
            }
            else{
                    this.innerHTML = '不循环';
                    VideoNode.loop = false;
            }
        }
    ;
    

src返回的数据

console.log('src='+VideoNode.src);

currentSrc返回的数据

console.log('currentSrc='+VideoNode.currentSrc);

监听ended事件

VideoNode.addEventListener('ended',function(){
                console.log('视频播放结束了');
                VideoNode.play();
        }
    )

查看视频的网络状态

console.log(VideoNode.networkState)

手动设置控件 controls

VideoNode.controls = true;

手动设置静音 muted

VideoNode.muted = true;

自定义视频播放器

放图

!doctyPE html>
     html>
     head>
         meta charset="utf-8">
         title>
    /title>
         style type="text/css">
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
 .outerNode{
    width: 540px;
    height: 332px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -166px 0 0 -270px;
    box-shadow: 0 0 4px #5b606d;
}
  .outerNode .videoNode{
        width: 540px;
    height: 305px;
    float: left;
        background: black;
}
     .outerNode .controlsNode{
        width: 540px;
    height: 27px;
    float: left;
    background: url(images/ctrs_bg.gif) repeat-x;
}
.outerNode .controlsNode .playNode{
        float: left;
    width: 15px;
    height: 17px;
    margin: 6px 0 0 14px;
        background: url(images/playNode.png) no-repeat;
    cursor: pointer;
}
.outerNode .controlsNode .pauseNode{
        float: left;
    width: 15px;
    height: 17px;
    margin: 6px 0 0 14px;
        background: url(images/pause.png) no-repeat;
    cursor: pointer;
}
.outerNode .controlsNode .loadNode{
    width: 267px;
    height: 10px;
    margin: 9px 0 0 14px;
    float: left;
    background: url(images/load_bg.png) repeat-x;
    position: relative;
}
.outerNode .controlsNode .loadNode .lineNode{
        width: 0%;
    height: 7px;
    position: absolute;
    left: 0;
    top: 1px;
        background: url(images/line_bg.png) repeat-x;
}
.outerNode .controlsNode .loadNode .lineNode .lineRight{
        width: 2px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
        background: url(images/line_r_bg.png) no-repeat;
}
.outerNode .controlsNode .loadNode .loadLeft{
        height: 100%;
    width:3px ;
    position: absolute;
    left: 0;
    top: 0;
        background: url(images/left_bg.png) no-repeat;
    z-index: 4;
}
.outerNode .controlsNode .loadNode .loadRight{
        height: 100%;
    width:3px ;
    position: absolute;
    right: 0;
    top: 0;
        background: url(images/right_bg.png) no-repeat;
}
.outerNode .controlsNode .loadNode .crlNode{
    width: 17px;
    height: 17px;
    background: url(images/crl_bg.png);
    position: absolute;
    left: -8.5px;
    top: -3.5px;
    cursor: pointer;
    z-index: 5;
}
.outerNode .controlsNode .timeNode{
        float: left;
    width: 75px;
    height: 10px;
    margin: 9px 0 0 9px;
}
.outerNode .controlsNode .timeNode span{
    font-Size:10px;
    float: left;
    line-height: 10px;
    color: white;
 }
.outerNode .controlsNode .volumeNode{
        width: 17px;
    height: 16px;
    float: left;
    margin: 5px 0 0 6px;
        background: url(images/volume_bg.png);
}
.outerNode .controlsNode .volumeLine{
        height: 8px;
    width: 61px;
    float: left;
    margin: 10px 0 0 4px;
        background: url(images/volumeLine_bg.png) repeat-x;
    position: relative;
 }
.outerNode .controlsNode .volumeLine .v_left{
        width: 3px;
    height:100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(images/v_left.png) no-repeat;
}
.outerNode .controlsNode .volumeLine .v_right{
        width: 3px;
    height:100%;
    position: absolute;
    right: 0;
    top: 0;
    background: url(images/v_right.png) no-repeat;
}
.outerNode .controlsNode .volumeLine .v_DragNode{
    width: 15px;
    height: 13px;
    position: absolute;
    left: 58.5px;
    top: -3.5px;
    background: url(images/vo_d.png) no-repeat;
    cursor: pointer;
}
.outerNode .controlsNode .fullNode{
        width:15px;
    height:17px;
    float: left;
    margin: 6px 0 0 35px;
        background: url(images/full_bg.png) no-repeat;
    cursor: pointer;
        transition: 0.7s;
}
.outerNode .controlsNode .fullNode:hover{
        background: url(images/full_hover_bg.png) no-repeat;
}
        /style>
    /head>
    body>
        !-- 最外层的元素 -->
        div class='outerNode'>
            !-- video元素 -->
            video class='videoNode' src='data/imooc.mp4' poster="data/poster.jpg">
    /video>
            !-- 控制器的元素 -->
            div class='controlsNode'>
                !-- 控制播放暂停的按钮 -->
                div class='playNode'>
    /div>
                !-- 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 class='volumeNode'>
    /div>
                !-- 声音的条 -->
                div class='volumeLine'>
                    div class='v_left'>
    /div>
                    div class='v_right'>
    /div>
                    div class='v_DragNode'>
    /div>
                /div>
                !-- 全屏的按钮 -->
                div class='fullNode'>
    /div>
            /div>
        /div>
    script type="text/javascript">
        //播放暂停的控制    //PlayNode 播放器按钮    //VideoNode 播放器    //PlayBln 控制暂停播放的布尔值    //FullNode 全屏按钮    //nowNode 当前时间    //allNode 视频的全部时间    //LineNode 当前的进度条    //CrlNode 进度条按钮    //LoadNode 进度条外面的元素    var PlayNode = document.getElementsByclassname('playNode')[0],        VideoNode = document.getElementsByClassName('videoNode')[0],        FullNode = document.querySelector('.fullNode'),        nowNode = document.querySelector('.now'),        allNode = document.querySelector('.all'),        LineNode = document.querySelector('.lineNode'),        CrlNode = document.querySelector('.crlNode'),        LoadNode = document.querySelector('.loadNode'),        VDragNode = document.querySelector('.v_DragNode'),        PlayBln = true;
    //播放、暂停的事件    PlayNode.onclick = function(){
            //传统的通过布尔值去改变classname的方法        PlayBln = !PlayBln;
        if(PlayBln == false){
                this.className = 'pauseNode';
                VideoNode.play();
        }
        else{
                this.className = 'playNode';
                VideoNode.pause();
        }
    }
    ;
    //全屏按钮的事件    FullNode.onclick = function(){
        if(VideoNode.webkitRequestFullscreen){
                VideoNode.webkitRequestFullscreen();
        }
        else if(VideoNode.mozRequestFullScreen){
                VideoNode.mozRequestFullScreen();
        }
        else{
                VideoNode.requestFullscreen();
        }
    }
    ;
    //解决最开始时间的NAN的问题    VideoNode.addEventListener('canplay',function(){
            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 的问题    function toDou(time){
            return time10?'0'+time:time;
    }
    //当视频播放的时候 需要当前的时间动起来    VideoNode.addEventListener('timeupdate',function(){
            //目前的 百分比进度        LineNode.style.width = VideoNode.currentTime/VideoNode.duration*100+'%';
            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);
    //声音的拖拽按钮    VDragNode.onmousedown = function(e){
            var ev = e || event;
            var l = ev.clientX - this.offsetLeft;
        document.onmouSEMove = function(e){
                var ev = e || event;
                var needX = ev.clientX - l;
                var maxX = VDragNode.parentNode.offsetWidth - 2.5;
                needX = needX  -2.5 ? - 2.5 : needX;
                needX = needX >
     maxX ? maxX : needX;
                //计算0 - 1            var lastVolume = (VDragNode.offsetLeft + 2) / VDragNode.parentNode.offsetWidth ;
                VideoNode.volume = lastVolume  0 ? 0 : lastVolume;
                VDragNode.style.left = needX + 'px';
        }
    ;
        document.onmouseup = function(e){
                document.onmousemove = document.onmouseup = null;
        }
            return false;
    }
    //拖拽进度条按钮    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;
            if(PlayBln == false){
                    //console.log(1);
                    PlayNode.className = 'pauseNode';
                    VideoNode.play();
            }
            else{
                    //console.log(2);
                    PlayNode.className = 'playNode';
                    VideoNode.pause();
            }
        }
    ;
            return false;
    }
    ;
    /script>
    /body>
    /html>
    

总结

以上所述是小编给大家介绍的HTML5自定义视频播放器源码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！