四川盐亭网站制作公司

怎么在HTML5中自定义一个视频播放器

这期内容当中小编将会给大家带来有关怎么在HTML5中自定义一个视频播放器，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

创新互联公司是网站建设专家,致力于互联网品牌建设与网络营销，专业领域包括成都网站制作、网站设计、电商网站制作开发、小程序制作、微信营销、系统平台开发，与其他网站设计及系统开发公司不同，我们的整合解决方案结合了恒基网络品牌建设经验和互联网整合营销的理念，并将策略和执行紧密结合，且不断评估并优化我们的方案，为客户提供全方位的互联网品牌整合方案！

video对象

兼容性写法


        
        
        
        您的浏览器不支持，请升级您的浏览器
    

video 标签 width height autoplay muted

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

选中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;

自定义视频播放器

怎么在HTML5中自定义一个视频播放器

放图

 
 
 
     
     
    
*{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;
}
    


    
    
        
        
        
        
            
            
                                          
                
                                 
                                                                                                                               00:00                  -                  4:30                                                                                                                                                                              //播放暂停的控制     //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 time<10?'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;     };

上述就是小编为大家分享的怎么在HTML5中自定义一个视频播放器了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。


标题名称：怎么在HTML5中自定义一个视频播放器
网站网址：http://scyanting.com/article/ighehd.html

其他资讯