一个基于html5的video视频播放器

Posted 2020-07-26

html5的video标签使得加载视频方便了许多，上午无事，做了一个小demo，包含了一些很基本的功能。播放，进度这些。主要是了解一下相关api。

html:

                <!-- 视频 1  -->
                <div class="vsb-container" containerID="1" columns="1">
                    <div class="vsb-space sec_side_10 mb15 fluid clear" columns="1">
                        <div class="sec_23">
                            <div class="sec_23_video mb15">
                                <!-- <img src="images/videobg_03.jpg"/> -->
                                <video width=‘100%‘ height="100%" preload="auto" poster="images/videobg_03.jpg">
                                    <source src="video/12143.mp4" type="video/mp4">
                                </video>
                            </div>
                            <div class="sec_23_progress psr ml25 mb10">
                                <img class="progress" src="images/ico/sec_side_10_1_03.jpg"/>
                                <img class="progress_btn" style="left: 0;" src="images/ico/sec_side_10_07.jpg"/>                                
                            </div>
                            <div class="sec_23_control">
                                <img class="img1" src="images/ico/sec_side_10_11.jpg"/>
                                <img class="img2" src="images/ico/sec_side_10_17.jpg"/>
                                <img class="img3" src="images/ico/sec_side_10_14.jpg"/>
                                <img class="img4" src="images/ico/sec_side_10_20.jpg"/>
                                <img class="img5" src="images/ico/sec_side_10_22.jpg"/>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 视频 1  end -->
<style>
.sec_23_video{width: 180px;height: 108px;overflow: hidden;}
.sec_23_progress{width: 131px;height: 8px;}
.sec_23_progress .progress_btn{position: absolute;top: 0;}
.sec_23_control img{float: left;cursor: pointer;}
.sec_23_control .img1{margin: 0 18px 0 23px;}
.sec_23_control .img2{margin-right: 16px;margin-top: 7px;}
.sec_23_control .img3{margin-right: 15px;margin-top: 2px;cursor: default;}
.sec_23_control .img4{margin-right: 10px;margin-top: 8px;}
.sec_23_control .img5{margin-top: 7px;}
</style>
<script>

var oSec=$(‘.sec_23‘);//大的区块
var video=oSec.find(‘video‘)[0];//视频文件
var oBtn=oSec.find(‘.sec_23_control img‘);//controls按钮
var oProgress=oSec.find(‘.progress‘);//进度条
var oProgressBtn=oSec.find(‘.progress_btn‘);//进度条的块
videodemo(video,oBtn.eq(0)[0],oBtn.eq(1)[0],oBtn.eq(3)[0],oProgress[0],oProgressBtn[0]);
//参数依次为:视频文件,播放按钮，停止按钮，快退按钮，进度条背景，进度条按钮
function videodemo(video,btnplay,btnrestart,btnrewind,progress,btnprogress){
    var iNowTime=0;//当前视频播放的事件，从0秒开始播放
    var iScale=(progress.offsetWidth-btnprogress.offsetWidth)/video.duration//进度条长度与视频长度的比例
    btnplay.onclick=function(){
        if(video.paused){
            video.play();                   
        }else{
            video.pause();
        }
    }
    btnrestart.onclick=function(){
        video.currentTime=0;
        video.pause();
    }
    btnrewind.onclick=function(){
        iNowTime=video.currentTime-10;
        video.currentTime=iNowTime;
    }
    bind(video,‘timeupdate‘,function(){
         btnprogress.style.left=Math.floor(video.currentTime*iScale)+‘px‘;
    });
    drag(btnprogress,{
        l:0,
        r:progress.offsetWidth-btnprogress.offsetWidth,
        t:0,
        b:0
    },function(site){
        btnprogress.style.left=site.left+‘px‘;
        iNowTime=parseInt(btnprogress.style.left);
        video.currentTime=iNowTime;
    });
}

function bind(obj, ev, fn) { 
    if (obj.addEventListener) {
        obj.addEventListener(ev, fn, false);
    } else {
        obj.attachEvent(‘on‘ + ev, function() {
            fn.call(obj);
        });
    }
}

</script>

//ps：本函数用到的一些参数如下：
//video对象相关属性：
//currentTime 属性设置或返回音频/视频播放的当前位置（以秒计），当设置该属性时，播放会跳跃到指定的位置。
//duration 属性返回当前音频/视频的长度，以秒计。
//video对象相关方法：
//play() 播放
//pause() 暂停
// video对象的事件(video对象的事件众多，这里只用到了一个，根据js权威指南 21.2.4节,这些事件只可以addEventListener()方法注册处理函数，未测试ie下是否有效);
// timeupdate 视频播放过程中，每秒触发4~60次，这里用来刷新播放事件更改进度条

好像不能上传附件。图片就不上传了。css样式改一下即可