• 自定义视频<video>播放条样式


    这几天在写公司的h5视频播放页面,收获了不少东西。

    首先,我需要支持flv和mp4格式的视频。本来想用开源插件flv.js把flv的转换成手机浏览器mp4格式视频,结果不幸的是,两月以前各大手机浏览器更新了内核,不支持flv.js这个插件了(除了chrome浏览器)。但PC端还是可用的。

    下面说重点,怎么自定义播放条样式。

    首先放出成品图:

    html代码:

    <video  data-icon="0" src="" data-state="a" style="100%;height:13.1875rem;" id="videoBox" webkit-playsinline playsinline></video>//video标签
    <div class="btnPlay"><img class="left" src="images/playBagin.png" alt="" data-icon="0"><p class="progressTime left">0:00</p></div>//开始按钮div
    <div class="progressBox" id="progressBox_special">
    <div class="progressBar"></div>//蓝条进度条div
    <div class="imgBox"><img id="progressImg" src="images/progressPointer.png" alt=""></div></div>//进度条拖拉图片divBox
    <div class="biggerBtn" data-icon="0"><img class="right" src="images/allBigger.png" alt=""><p class="allTime right"></p></div></div>//全屏div

    注:<video>标签之所以加上webkit-playsinline,playsinline两个属性,就是为了保证不同浏览器支持视频在h5页面中播放,不用手机浏览器自动托管视频

    css一些问题:

    由于<video>标签默认层级最高,可设置播放条div的z-index在最上面。

    用的是jQuery库,下面放js代码:

    <video>标签的API还是很全面的,不过需要通过dom本身调用。

    把时间秒转换成分钟:

    //分割时间函数        
    function timeStamp( second_time ){  
      var time1 = ((parseInt(second_time)/100)).toString();
      var time2 = time1.split(".")[1]? (time1.split(".")[1].length == 1 ? time1.split(".")[1]+'0' : time1.split(".")[1]) :'00';       
      var time =00 + ':' + time2;  
      if( parseInt(second_time )>= 60){
        var second = ((parseInt(second_time) % 60)/100).toString();  
        var min = (parseInt(second_time / 60)/100).toString();
        var time3 = second.split(".")[1]? (second.split(".")[1].length == 1 ? second.split(".")[1]+'0' : second.split(".")[1]) :'00'; 
        var time4 = min.split(".")[1]? (min.split(".")[1].length == 1 ? min.split(".")[1]+'0' : min.split(".")[1]) :'00'; 
        time = time4 + ":" + time3;       
    }  
    return time;          
    } 

    视频总时间和播放的时间:

    var  video  =  document.getElementById("video");
    var video2 = $("#video");
    video.load();//一开始进入页面video不是白屏
    //视频总时间 video2.on('loadedmetadata', function() { var time = video.duration; var allTime = timeStamp(time); $('.allTime').text(allTime); }); //视频进度时间 video2.on('timeupdate', function() { var time = video.currentTime,alltime = video.duration; var percentage = 100 *(time / alltime); $('.progressTime').text(timeStamp(time)); $('.progressBar').css({'width':percentage + '%'}); $('.stateBox .progressBox .imgBox img').css({'margin-left':percentage +'%'}); if(time == alltime){ $('.btnPlay img').attr('src','images/playBagin.png'); //如果播放时间到总时间播放按钮图片换成停止图片 } });

    点击播放按钮:

    //视频开始按钮事件
    $('.btnPlay img').on('touchend',function(){
            if(video.paused) {
            video.play();
            $(this).attr('src','images/pause_btn.png');
            }else {
            video.pause();
            $(this).attr('src','images/playBagin.png');
            }
            return false;
            }) 

    拖拉进度条:

    //拖拉函数
    function changeBar(item){
       var progress = $('.progressBox');
       var maxduration = video.duration; //视频总时间
       var barIcon = $('.nav .biggerBtn').attr('data-icon'),position,percentage;
       if(barIcon == 0){
            position = item - progress.offset().left; //横屏模式
       }else{
            position = item - progress.offset().top; //全屏竖屏模式
       }
       percentage = 100 * (position / progress.width());
       if(percentage > 100) {
          percentage = 100;
       }
       if(percentage < 0) {
          percentage = 0;
       }
       $('.progressBar').css('width', percentage+'%');
       $('.stateBox .progressBox .imgBox img').css({'margin-left':percentage +'%'});
       video.currentTime = maxduration * (percentage / 100);//视频进度时间传给当前时间
       video.play();
       $('.btnPlay img').attr('src','images/pause_btn.png'); 
    }
    //视频拖拉按钮事件
    var progressBox = document.getElementById('progressBox_special');
    progressBox.addEventListener('touchstart', progressBox_item, false);
    function progressBox_item(e){
             var barIcon = $('.nav .biggerBtn').attr('data-icon');
             var point = fristPoint(e);
             if(barIcon == 0){
                changeBar(point.pageX);
             }else{
                  changeBar(point.pageY);     
             }
    };
    //拖拉按钮
    var statePic = document.getElementById('progressImg'); statePic.addEventListener('touchmove', itemMove, false);//发现h5的touchmove行为要通过addEventListener注册 function itemMove(e){ e.stopPropagation();//阻止默认行为 var barIcon = $('.nav .biggerBtn').attr('data-icon'); var point = fristPoint(e); if(barIcon == 0){ changeBar(point.pageX);//横屏 }else{ changeBar(point.pageY); //全屏竖屏 } }; //第一个手指为准 function fristPoint(e){ return e.touches ? e.touches[0] : e; }

    点击全屏:

     //点击全屏
    var itemHeight = document.documentElement.clientHeight;//获取手机高度
    var itemWidth = document.documentElement.clientWidth;//手机宽度
    $('.biggerBtn img').on('touchend',function(event){
            event.stopPropagation();
            var dataIcon = $(this).parent().attr('data-icon');
            if(dataIcon == 0){
                            $('.nav').css({'-webkit-transform':'rotate(90deg)'});//直接把视频旋转90°,给video高度宽度重新赋值。
                            $('.nav video').css({'width':itemHeight,'height':itemWidth});
                            $('.stateBox').css({'width':itemHeight});
                            $('.biggerBtn').attr('data-icon','1');
                            $('.nav video').attr('data-icon','1');
                    }else{
                            $('.nav').css({'-webkit-transform':'rotate(0deg)'});
                            $('.nav video').css({'width':itemWidth,'height':'13.1875rem'});
                            $('.stateBox').css({'width':itemWidth});
                            $('.biggerBtn').attr('data-icon','0');
                            $('.nav video').attr('data-icon','0');
                    }
    });

    注:可用video.js和videojs-contrib-hls.js插件,覆盖video-js.min.css的原生样式也可以。(但点击放大就是原生的,不可以自定义旋转横放了)

    补充一点关于手机端ios系统video标签自动播放的小知识:

    app里的html5页面,让ios开发同学在app里加:

    self.wView.allowsInlineMediaPlayback = YES;self.wView.mediaPlaybackRequiresUserAction = NO;

    除了safari10+支持无声自动播放(video标签加muted属性:默认视频为无声),其余非app内的浏览器自身不能设置自动播放,只支持手动点击事件

    app内的浏览器自动播放需要自己的bridge桥梁,比如微信内打开,可用微信的WeiixinJSBridgeReady()

    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>  
    <script>
    document.addEventListener('WeixinJSBridgeReady',function(){  
        $('#video').play(); },false); 
    </script>
  • 相关阅读:
    精选的一些《编程之美》相关资料
    使用SftpDrive+SourceInsight阅读开源代码
    malloc()参数为0的情况
    《编程之美》4.5磁带文件存放优化:最优解是怎样炼成的
    从《编程之美》买票找零问题说起,娓娓道来卡特兰数——兼爬坑指南
    《编程之美》3.6判断链表是否相交之扩展:链表找环方法证明
    解答《编程之美》1.18问题1:给所有未标识方块标注有地雷概率
    C语言中 Float 数据结构的存储计算
    C#之内存分配
    unity----------------3D模型讲解
  • 原文地址:https://www.cnblogs.com/xiaoxiao666/p/7133402.html
Copyright © 2020-2023  润新知