这几天在写公司的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>