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 = 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 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;

    };

</script>

</body>

</html>

巴特西

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

最新文章

热门文章