HTML5视频自定义视频播放器源码

video对象

兼容情况：

safari浏览器不支持webm格式

Chrome浏览器支持webm格式

ie8以及以下不支持video标签,ie9支持video标签,但是支持mp4格式的

Firefox(火狐浏览器)支持ogv格式的视频

兼容性写法

    <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 = (){
            VideoNode.pause();
        };

播放play()

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

load 刷新播放器的事件

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

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

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

requestFullscreen 让video标签变成全屏
VideoNode.webkitRequestFullscreen();
VideoNode.mozRequestFullScreen();

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

volumechange 当音量更改时

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

声音随机更改

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

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

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

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

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

timeupdate监听视频播放的状态

        VideoNode.addEventListener('timeupdate',128,1)">// 总时长，以分钟：秒的形式显示
            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((){
            console.log(VideoNode.readyState);
        },500);

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

        console.log(VideoNode.playbackRate)

Rate设置倍速

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

loop的设置

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

src返回的数据

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

currentSrc返回的数据

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

监听ended事件

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

查看视频的网络状态

        console.log(VideoNode.networkState)

手动设置控件 controls

        VideoNode.controls = true;

手动设置静音 muted

        VideoNode.muted = true;

自定义视频播放器
放图

<!doctype html> 
<htmlhead> 
    meta charset="utf-8"title></style type="text/css">
*{margin: 0;paddinglist-style none} 
.outerNodewidth 540pxheight 332pxposition absoluteleft 50%top -166px 0 0 -270pxbox-shadow 0 0 4px #5b606d  
.outerNode .videoNode
    width 305pxfloat left
    background black;
     
.outerNode .controlsNode 27pxbackground url(images/ctrs_bg.gif) repeat-x

.outerNode .controlsNode .playNode
    float 15px 17px 6px 0 0 14px url(images/playNode.png) no-repeatcursor pointer
.outerNode .controlsNode .pauseNode url(images/pause.png) no-repeat


.outerNode .controlsNode .loadNode 267px 10px 9px 0 0 14px url(images/load_bg.png) repeat-x relative
.outerNode .controlsNode .loadNode .lineNode 0% 7px 1px url(images/line_bg.png) repeat-x;


.outerNode .controlsNode .loadNode .lineNode .lineRight 2px 100%right url(images/line_r_bg.png) no-repeat

.outerNode .controlsNode .loadNode .loadLeft
    height3px  url(images/left_bg.png) no-repeatz-index 4
.outerNode .controlsNode .loadNode .loadRight url(images/right_bg.png) no-repeat
.outerNode .controlsNode .loadNode .crlNode url(images/crl_bg.png) -8.5px -3.5px 5

.outerNode .controlsNode .timeNode 75px 9px 0 0 9px
.outerNode .controlsNode .timeNode spanfont-size10pxline-heightcolor white; 
.outerNode .controlsNode .volumeNode 16px 5px 0 0 6px url(images/volume_bg.png)
.outerNode .controlsNode .volumeLine 8px 61px 10px 0 0 4px url(images/volumeLine_bg.png) repeat-x; 

.outerNode .controlsNode .volumeLine .v_left 3px100% url(images/v_left.png) no-repeat
.outerNode .controlsNode .volumeLine .v_right url(images/v_right.png) no-repeat
.outerNode .controlsNode .volumeLine .v_DragNode 13px 58.5px url(images/vo_d.png) no-repeat
.outerNode .controlsNode .fullNode15px17px 6px 0 0 35px url(images/full_bg.png) no-repeat
    transition 0.7s
.outerNode .controlsNode .fullNode:hover url(images/full_hover_bg.png) no-repeat}

    </style>

>
body>
    <!-- 最外层的元素 -->
    div class='outerNode'>
         video元素 -->
        video ='videoNode' src='data/imooc.mp4' poster="data/poster.jpg"video 控制器的元素 ='controlsNode'>
             控制播放暂停的按钮 -->
            ='playNode'div video的进度条 ='loadNode'>
                ='loadLeft'='loadRight' 拖动进度条的按钮 -->
                ='crlNode' 真正的进度条 ='lineNode'>
                    ='lineRight' 时间的元素 ='timeNode'span ='now'>00:00span> - ='all'>4:30 声音的标志 ='volumeNode' 声音的条 ='volumeLine'='v_left'='v_right'='v_DragNode' 全屏的按钮 ='fullNode'script ="text/javascript">
    //播放暂停的控制
    PlayNode 播放器按钮
    VideoNode 播放器
    PlayBln 控制暂停播放的布尔值
    FullNode 全屏按钮
    nowNode 当前时间
    allNode 视频的全部时间
    LineNode 当前的进度条
    CrlNode 进度条按钮
    LoadNode 进度条外面的元素
    var PlayNode = document.getElementsByClassName('playNode)[0],VideoNode videoNode document.querySelector(.fullNode),nowNode .now.all.lineNode.crlNode.loadNode.v_DragNode= true;

    播放、暂停的事件
    PlayNode.onclick function(){
        传统的通过布尔值去改变classname的方法
        PlayBln !PlayBln;
        if(PlayBln == false){
            this.className pauseNode;
            VideoNode.play();

        }
        else{
            ;
            VideoNode.pause();
        }
    };

    全屏按钮的事件
    FullNode.onclick (VideoNode.webkitRequestFullscreen){
            VideoNode.webkitRequestFullscreen();
        }
        else (VideoNode.mozRequestFullScreen){
            VideoNode.mozRequestFullScreen();
        }
        {
            VideoNode.requestFullscreen();
        }
    };

    解决最开始时间的NAN的问题
    VideoNode.addEventListener(canplay, needTime  parseInt(VideoNode.duration);
          s  needTime%60;
          m  parseInt(needTime / );
         timeNum  toDou(m)+toDou(s);
        allNode.innerHTML  timeNum;
    },1)">);

    解决 时间不足10 的问题
     toDou(time){
        return time<10?time:time;
    }

    当视频播放的时候 需要当前的时间动起来
timeupdate目前的 百分比进度
        LineNode.style.width  VideoNode.currentTime/VideoNode.duration*100+'%';
        CrlNode.style.left  LineNode.offsetWidth - 8.5 + px'

         parseInt(VideoNode.currentTime);
        toDou(s);
        nowNode.innerHTML 声音的拖拽按钮
    VDragNode.onmousedown (e){
         ev  e || event;
         l  ev.clientX .offsetLeft;
        document.onmousemove (e){
             event;
             needX - l;
             maxX  VDragNode.parentNode.offsetWidth 2.5;

            needX < 2.5 ?  : needX;
            needX  maxX : needX;
            计算0 - 1
             lastVolume  (VDragNode.offsetLeft 2)  VDragNode.parentNode.offsetWidth ;
            VideoNode.volume 0  : lastVolume;

            VDragNode.style.left ;
        };
        document.onmouseup (e){
            document.onmousemove  document.onmouseup null;
        }
        return ;
    }
    拖拽进度条按钮
    CrlNode.onmousedown .offsetLeft;
        VideoNode.pause();

        document.onmousemove  LoadNode.offsetWidth 8.5 maxX : needX;
            CrlNode.style.left ;
            LineNode.style.width  (CrlNode.offsetLeft9)LoadNode.offsetWidth*100 + '%';


        };
        document.onmouseup (){
            document.onmousemove ;
            VideoNode.currentTime  VideoNode.duration *LoadNode.offsetWidth;
            ){
                console.log(1);
                PlayNode.className ;
                VideoNode.play();
            }
            {
                console.log(2);
;
                VideoNode.pause();
            }
        };
        ;
    };

script>

HTML5视频自定义视频播放器源码

相关推荐