HTML5 video视频播放器开发教程

来源:程序思维浏览:1515次
现在网上的播放器插件很多,但是依然无法满足我们的需求,比如在微信里使用、WebAPP里使用、混合式APP里使用都是问题,那么最好自己开发一个专属video视频播放器,下面我来给大家说一下开发视频播放器的思路以及图文教程。

先介绍一下所需要的js库:

1、zepto.js (相当于移动版的jQuery)
2、TweenMax  (js动画库)
3、Hammer.js (触屏设备手势库)
4、hls.js (是Apple的动态码率自适应技术,用于播放m3u8格式的视频文件)

一、用html5+css3制作视频播放器的皮肤:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maxmum-scale=1.0,user-scaleable=no" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="video-wrap" class="video-wrap">
    <div id="video-screen" class="video-screen">
        <video id="video" poster="./images/1.jpeg" src="video/2/1.m3u8" playsinline -webkit-playsinline ></video>
        <div id="loading" class="loading hide"></div>
    </div>
    <div id="control" class="foot-pannel" data-show="1">
        <div id="oper-btn" class="oper-btn play"></div>
        <div class="drag-wrap">
            <div id="progress-bar" class="drag-line">
                <div id="drag-btn" class="drag-btn"></div>
                <div id="play-progress-bar" class="drag-line-bg"></div>
            </div>
            <div class="video-time"><span id="current-time">00:00</span>/<span id="duration">00:00</span></div>
        </div>
        <div id="full-btn" class="full-btn"></div>
    </div>
    <div id="screen-time-wrap" class="screen-time-wrap hide">
        <span id="screen-currenttime">00:00:00</span>/<span id="screen-duration">00:00:00</span>
    </div>
</div>
</body>
<script src="js/zepto.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/function.js"></script>
<script src="js/videoplay.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/hls.min.js"></script>
<script>
    var VP;
    $(function(){
       VP=new VideoPlay();
    });
</script>
</html>

二、style.css样式代码

html,body{margin:0px;padding:0px;}
@media screen and (min-width:400px) {
    html{font-size:21.3px;!important;}
}
@media screen and (min-width:414px) {
    html{font-size:22.08px;!important;}
}
@media screen and (min-width:480px) {
    html{font-size:25.6px;!important;}
}
.video-wrap{width:100%;height:10rem;position: relative;z-index:1;overflow:hidden;background:#000000;}
.video-wrap .video-screen{width:100%;height:100%;}
.video-wrap .video-screen .loading{width:2rem;height:2rem;position: absolute;z-index: 2147483648;left:50%;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);background-image:url("../images/load.gif");background-position:center;background-repeat:no-repeat;}
.video-wrap video{width:100%;height:100%;}
.video-wrap .foot-pannel{width:100%;height:2.5rem;background-color:rgba(0,0,0,0.7);position: absolute;z-index:2147483648;left:0px;bottom:0px;display:flex;display:-webkit-flex;justify-content: center;-webkit-justify-content: center;align-items:center;-webkit-align-items:center;}
.video-wrap .foot-pannel .oper-btn{width:1.5rem;height:1.5rem;}
.video-wrap .foot-pannel .pause{background-image:url("../images/pause.png");background-size: 100%;background-repeat:no-repeat;background-position: center;}
.video-wrap .foot-pannel .play{background-image:url("../images/start.png");background-size: 100%;background-repeat:no-repeat;background-position: center;}
.video-wrap .foot-pannel .drag-wrap{width:80%;height:100%;position: relative;z-index:1;}
.video-wrap .foot-pannel .drag-wrap .drag-line{width:95%;height:0.2rem;background:#ffffff;margin:0 auto;margin-top:0.9rem;border-radius: 1rem;position: relative;z-index:1;}
.video-wrap .foot-pannel .drag-wrap .drag-line .drag-btn{width:1rem;height:1rem;background: #FF0000;position: absolute;z-index:1;left:0px;top:-0.3rem;border-radius: 100%;}
.video-wrap .foot-pannel .drag-wrap .drag-line .drag-line-bg{width:0px;height:100%;position: absolute;z-index:1;left:0px;top:0px;background:#FF0000;}
.video-wrap .foot-pannel .full-btn{width:2rem;height:2rem;background-image:url("../images/full.png");background-size:100%;background-repeat: no-repeat;background-position: center;}
.video-wrap .foot-pannel .unfull-btn{width:2rem;height:2rem;background-image:url("../images/unfull.png");background-size:100%;background-repeat: no-repeat;background-position: center;}
.video-wrap .foot-pannel .video-time{width:auto;height:auto;position: absolute;z-index:1;right:0px;bottom:0px;font-size:0.6rem;color:#FFFFFF;}

.video-wrap .screen-time-wrap{width:7rem;height:2.5rem;background-color:rgba(0,0,0,0.7);border-radius: 5px;position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);font-size:0.7rem;color:#FFFFFF;text-align:center;line-height:2.5rem;}
.hide{display:none}

三、videoplay.js的代码

var VideoPlay=function(){
    this.oOPerBtn=$("#oper-btn");
    this.oVideo=$("#video");
    this.oCurrentTime=$("#current-time");
    this.oDuration=$("#duration");
    this.oControl=$("#control");
    this.oVideoScreen=$("#video-screen");
    this.oDragBtn=$("#drag-btn");
    this.oProgressBar=$("#progress-bar");
    this.oPlayProgressBar=$("#play-progress-bar");
    this.oScreenTimeWrap=$("#screen-time-wrap");
    this.oScreenCurrentTime=$("#screen-currenttime");
    this.oScreenDuration=$("#screen-duration");
    this.oFullBtn=$("#full-btn");
    this.oVideoWrap=$("#video-wrap");
    this.oLoading=$("#loading");
    this.iDuration=0;
    this.iCurrentTime=0;
    this.timer;
    this.fnTimer;
    this.oHls;
    this.bMoving=false;
    this.init();
};
VideoPlay.prototype={
    init:function(){
        var _this=this;
        _this.bindEvent();
        _this.eventVideo();
        _this.hideControl(1);
        _this.touchScreenTime();
        _this.oHls=new Hls();
        _this.oHls.loadSource(_this.oVideo.attr("src"));
        _this.oHls.attachMedia(_this.oVideo[0]);
    },
    bindEvent:function(){
        var _this=this;
        _this.oOPerBtn.on("click",function(){//点击暂停、开始按钮
            if($(this).hasClass("play")){
                _this.pauseStyle();
            }else{
                _this.startStyle();
            }
        });

        //点击屏幕
        _this.oVideoScreen.on("touchstart",function(){
            _this.showHideControl();
        });

        _this.setDragBtn();

        //点击全屏
        _this.oFullBtn.on("click",function(){
            if($(this).hasClass("full-btn")){
                _this.setFullScreen();
            }else{
                _this.setUnFullScreen();
            }
        });

        //监听屏幕方向
        $(window).on("orientationchange",function(){
            _this.orientation();
        });

    },
    orientation:function(){
        var _this=this;
        if(window.orientation==0 || window.orientation==180){//竖屏
            _this.setUnFullScreen();
        }else if(window.orientation==90 || window.orientation==-90){//横屏
            _this.setFullScreen();
        }
    },
    startStyle:function(){
        var _this=this;
        _this.oOPerBtn.removeClass("pause").addClass("play");
        _this.oVideo[0].pause();
    },
    pauseStyle:function(){
        var _this=this;
        _this.oOPerBtn.removeClass("play").addClass("pause");
        _this.oVideo[0].play();
    },
    getCurrentime:function(){
        var _this=this;
        _this.timer=setInterval(function(){
            _this.iCurrentTime=_this.oVideo[0].currentTime;
            _this.oCurrentTime.text(formatSeconds(_this.oVideo[0].currentTime));
            _this.iDuration=_this.oVideo[0].duration;
            setTimeout(function(){
                _this.oDuration.text(formatSeconds(_this.iDuration));
            },1000);
            if(!_this.bMoving) {
                _this.setProgress(_this.oVideo[0].currentTime);
            }
        },1000);
    },
    eventVideo:function(){
        var _this=this;
        //正在播放中
        _this.oVideo[0].addEventListener("playing",function(){
            _this.getCurrentime();
            _this.oLoading.addClass("hide");
        });

        //播放
        _this.oVideo[0].addEventListener("play",function(){
            _this.oLoading.addClass("hide");
        });

        //监听等待
        _this.oVideo[0].addEventListener("waiting",function(){
            _this.oLoading.removeClass("hide");
        });

        //播放结束
        _this.oVideo[0].addEventListener("ended",function(){
            _this.startStyle();
            _this.oLoading.addClass("hide");
        });


    },
    showHideControl:function(){//显示隐藏底部控制面板
        var _this=this;
        clearTimeout(_this.fnTimer);
        if(_this.oControl.attr("data-show")=='1'){
            _this.hideControl(0);
        }else{
            _this.showControl();
        }
    },
    hideControl:function(flag){
        var _this=this;
        if(flag==1){
            _this.fnTimer=setTimeout(function(){
                TweenMax.to(_this.oControl,0.3,{y:55,onComplete:function(){
                    _this.oControl.attr("data-show",'0');
                }});
            },5000);
        }else{
            TweenMax.to(_this.oControl,0.3,{y:55,onComplete:function(){
                _this.oControl.attr("data-show",'0');
            }});
        }

    },
    showControl:function(){
        var _this=this;
        TweenMax.to(_this.oControl,0.3,{y:0,onComplete:function(){
            _this.oControl.attr("data-show",'1');
            _this.hideControl(1);
        }});
    },
    setDragBtn:function(){//拖拽进度条
        var _this=this,startX,moveX,bMove=false;
        _this.oDragBtn.on("touchstart",function(e){
            var touchPros= e.touches[0];
            _this.bMoving=true;
            if(!bMove) {
                startX = touchPros.pageX - touchPros.target.parentNode.offsetLeft;
            }
        }).on("touchmove",function(e){
            bMove=true;
            _this.bMoving=true;
            var touchPros= e.touches[0];
            moveX=touchPros.pageX-startX;
            if(moveX<=0){
                moveX=0;
            }else if(moveX>=_this.oProgressBar.width()-$(this).width()){
                moveX=_this.oProgressBar.width()-$(this).width();
            }
            $(this).css("left",moveX+"px");
            _this.oPlayProgressBar.width(moveX+"px");
        }).on("touchend",function(){
            _this.bMoving=false;
            var fCurrentTime=moveX/(_this.oProgressBar.width()-$(this).width())*_this.iDuration;
            _this.seekTo(fCurrentTime);
        });
    },
    seekTo:function(pTime){
        var _this=this;
        _this.oVideo[0].currentTime=pTime;
    },
    setProgress:function(pTime){
        var _this=this;
        var iProgressWidth=pTime/_this.iDuration*(_this.oProgressBar.width()-_this.oDragBtn.width());
        _this.oPlayProgressBar.width(iProgressWidth+"px");
        _this.oDragBtn.css("left",iProgressWidth+"px");
    },
    touchScreenTime:function(){//触屏显示时间
        var oHammer,_this=this,iCurrentTime= 0,iDirection=0;
        oHammer=new Hammer(_this.oVideoScreen[0]);
        oHammer.on("panstart",function(e){
            iCurrentTime=_this.iCurrentTime;
        });
        oHammer.on("panmove",function(e){
            iDirection= e.direction;
            if(iDirection==2){//左
                iCurrentTime--;
                if(iCurrentTime<=0){
                    iCurrentTime=0;
                }
                _this.oScreenTimeWrap.removeClass("hide");
                _this.setScreenTime(iCurrentTime);
            }
            if(iDirection==4){//右
                iCurrentTime++;
                if(iCurrentTime>=_this.iDuration){
                    iCurrentTime=_this.iDuration;
                }
                _this.oScreenTimeWrap.removeClass("hide");
                _this.setScreenTime(iCurrentTime);
            }
        });
        oHammer.on("panend",function(){
            _this.seekTo(iCurrentTime);
            _this.oScreenTimeWrap.addClass("hide");
        });
    },
    setScreenTime:function(pTime){
        var _this=this;
        _this.oScreenCurrentTime.text(formatSeconds(pTime));
        _this.oScreenDuration.text(formatSeconds(_this.iDuration));
    },
    setFullScreen:function(){//全屏
        var _this=this;
        var iWindowHeight;
        setTimeout(function(){
            _this.oFullBtn.removeClass("full-btn").addClass("unfull-btn");
            iWindowHeight = $(window).height() + "px";
            _this.oVideoWrap.css({"width":"100%","height":iWindowHeight,"position":"absolute","left":"0","top":"0","z-index":99});
        },300);
    },
    setUnFullScreen:function(){//取消全屏
        var _this=this;
        _this.oFullBtn.removeClass("unfull-btn").addClass("full-btn");
        _this.oVideoWrap.css({"width":"100%","height":"10rem","position":"relative","z-index":1});
    }
};

四、function.js的代码转换时间戳

function formatSeconds(value) {
    var theTime = parseInt(value);// 秒
    var theTime1 = 0;// 分
    var theTime2 = 0;// 小时
    if(theTime > 60) {
        theTime1 = parseInt(theTime/60);
        theTime = parseInt(theTime%60);
        if(theTime1 > 60) {
            theTime2 = parseInt(theTime1/60);
            theTime1 = parseInt(theTime1%60);
        }
        var result = ""+prefixInteger(parseInt(theTime),2)+"";
    }else{
        var result = "00:"+prefixInteger(parseInt(theTime),2)+"";
    }

    if(theTime1 > 0) {
        result = ""+prefixInteger(parseInt(theTime1),2)+":"+result;
    }
    if(theTime2 > 0) {
        result = ""+prefixInteger(parseInt(theTime2),2)+":"+result;
    }
    return result;
}

function prefixInteger(num, n) {
    return (Array(n).join(0) + num).slice(-n);
}

好了已上就是video视频播放器的核心代码,可以支持移动端网站,微信网站,APP,PC端不支持,但是思路都是一样的,只是PC端的全屏模式有些特殊,PC端的解决方案,在《HTML5视频播放器video开发教程》里有详细的讲解。
精品好课
HTML5视频播放器video开发教程
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器,利用mp4转成m3u8格式的视频,并在移动端和PC端进行播放支持m3u8直播格式,兼容...
VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)
VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE+ES6并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就...
jQuery视频教程从入门到精通
jquery视频教程从入门到精通,课程主要包含:jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
最新完整React视频教程从入门到精通纯干货纯实战
React是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习React高薪就...
Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程,本课程教你如何快速学会VUE和uni-app并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己...
最新完整React+VUE视频教程从入门到精,企业级实战项目
React和VUE是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React和VUE并应用到实战,教你如何解决内存泄漏,常用库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习Re...
React实战视频教程仿京东移动端电商
React是前端最火的框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。
HTML5基础入门视频教程易学必会
HTML5基础入门视频教程,教学思路清晰,简单易学必会。适合人群:创业者,只要会打字,对互联网编程感兴趣都可以学。课程概述:该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
收藏
扫一扫关注我们