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;

自定义视频播放器

放图

 
 
 
     
     
    


    
    

        
        
        
        

            
            

            
            

                

                

                
                

                
                

                    

                
            
            
            

                00:00
                 - 
                4:30