有时我们使用html5自带的video标签播放视频的话，在有的手机浏览器下会显示样式不一致的问题，作者在帮客户制作网站的时候，就遇到过这种问题，解决的方法是使用video.js插件，可以完美解决这个问题，下面说下简单的使用流程
1、自己定义段html代码
<div class="ws-video"> <div class="js-video"> <img src="images/taiyoubangabout.jpg" alt=""> <video class="js-media" poster="images/taiyoubangabout.jpg"> <source src="images/taiyoubangabout.mp4" type="video/mp4" /> <p>你的浏览器不支持 HTML5 Video。</p> </video> <i data-playPause class="playPause fa fa-play ui-icon"><span></span></i> <div class="ui"> <div> <span class="timeDisplay"><i data-currentTime>0:00</i></span> </div> <div> <div data-progress class="progress"> <div data-buffer class="progress-buffer"></div> <div data-time class="progress-time"></div> </div><!-- progress --> </div> <div> <span class="timeDisplay"><i data-duration>0:00</i></span> </div> <div> <i data-mute class="fa-volume-up ui-icon"></i> </div> <div> <i data-fullscreen="" class="fa-full ui-icon"></i> </div> </div><!-- ui --> </div><!-- js-video --> </div> <link href="css/video.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/video.js"></script>
2、video.css文件写上自定义样式
.ws-video {position: relative;}.ws-video img {width: 100%;height: auto;position: relative;z-index: 8;}
.js-video{position:relative;width:100%;margin:0 auto;}
video{position: absolute;top: 0;left: 0; width:100%;height:100%;background-size:cover;background-position:center center;background-color: #000;z-index: 9;}
.js-video button{-moz-appearance:none;-webkit-appearance:none}
.js-video .playPause.ui-icon{position:absolute;top:0;left:0;right:0;display:block;width:auto;bottom:0;z-index: 9;}
.js-video .playPause.ui-icon:after{position:absolute;top:50%;left:50%;content:'';width:70px;height:70px;margin:-35px 0 0 -35px;}
.js-video .playPause.ui-icon:before{content:'';position:absolute;left: 0;top: 0;width:100%;height: 100%;background: rgba(27,27,27,0);-webkit-transition:all ease-out 0.4s;transition:all ease-out 0.4s;}
.js-video .playPause.fa-play:after{background:url(../images/play.png);}
.js-video .playPause.fa-pause:after{background:url(../images/pause.png);}
.js-video .playPause.fa-undo:after{background:url(../images/undo.png);}
.js-video .playPause.fa-play:before{background: rgba(0,0,0,.2);}
.js-video .playPause.ui-icon.fa-pause{opacity:0;-webkit-transition:all ease-out 0.3s;transition:all ease-out 0.3s;}
.js-video .playPause.ui-icon.fa-pause:hover{opacity: 1;}
.js-video .ui{position:absolute;width: 100%;font-style:normal;left:0;bottom:10px;display:block;padding:10px 1vw;font-size:0;z-index: 9;display: -webkit-flex;display: flex;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
.js-video .ui-icon{font-size:20px;vertical-align:middle;width:20px;cursor:pointer}
.js-video .progress{background:rgba(229,229,229,.5);width:100%;position:relative;height:3px;cursor:pointer;overflow:hidden;border-radius:2px;border:0;margin-bottom: 0;}
.js-video .progress>*{position:absolute;top:0;left:0;height:100%}
.js-video .progress-time{background-color:#fff}
.js-video .anim{-moz-transition:width 1s linear;-o-transition:width 1s linear;-webkit-transition:width 1s linear;transition:width 1s linear}
.js-video .progress-buffer{background-color:rgba(0,0,0,.4);-moz-transition:width 250ms linear;-o-transition:width 250ms linear;-webkit-transition:width 250ms linear;transition:width 250ms linear}
.js-video .ui > div:nth-of-type(1) {-webkit-flex: 1 0 20px;flex: 1 0 20px;font-size: 12px;text-align: center;line-height: 20px;}
.js-video .ui > div:nth-of-type(2) {-webkit-flex: 30 30 1px;flex: 30 30 1px;padding-top: 8px;}
.js-video .ui > div:nth-of-type(3) {-webkit-flex: 1 0 20px;flex: 1 0 20px;font-size: 12px;margin-right: 10px;text-align: center;line-height: 20px;}
.js-video .ui > div:nth-of-type(4) {-webkit-flex: 0 0 20px;flex: 0 0 20px;margin-right: 20px;}
.js-video .ui > div:nth-of-type(5) {-webkit-flex: 0 0 20px;flex: 0 0 20px;}
.timeDisplay {white-space: nowrap;}
.timeDisplay i {font-style: normal;color: #fff;}
.js-video .ui .fa-volume-up {background: url(../images/volup.png) no-repeat center center;width: 20px;height: 20px;display: inline-block;}
.js-video .ui .fa-volume-off {background: url(../images/voloff.png) no-repeat center center;width: 20px;height: 20px;display: inline-block;}
.js-video .ui .fa-full {background: url(../images/full.png) no-repeat center center;width: 20px;height: 20px;display: inline-block;}
3、然后引入jquery.min.js和 vedio.js 插件即可
作者发布的这个，样式上做了些自定义，比网上的美观点，感兴趣的朋友，可以下载测试体验下，下载后把里面的封面图taiyoubangabout.jpg和视频taiyoubangabout.mp4换成自己的即可
点击下载video.js插件：
