分享一个Html5+video 基于mui 5+的视频播放器

一直没有找到一款合适在MUI上的播放器，网上好多都是基于JQ的播放，样式不漂亮，也难更改，不好用难于安卓和小米手机，

实在没办法，只能亲自操刀，自己写一个播放器了，给碰到我一样情况的朋友们，封装出来只直调用，大家可以自由设置

没有测试过，当网络迅速时，视频加载出现加载提示框，有见到难题的小伙伴，可以分享处理经验

新增：手势控制 左边上下滑动控制音量，右边上下滑动控制亮度， 左右滑动 控制前进后退， 可以播放m3u8格式视频

20180517：新增： 支持单击播放就全屏播放视频， 支持在浏览器和微信上播放视频，支持使用IOS系统自带的播放器，大家可以依据自己的需求修改

20180620：支持同一个页面切换视频的方式，新增可以允许缩放调节,音量和色温html5 mp4播放器源码，是否显示全屏按钮, IOS支持强制全屏播放

**20180913：修复IOS对.m3u8 视频的兼容性

运行环境： MUI 5+ 和浏览器或微信

微信扫一扫，可以浏览微信里视频播放举例

android， 要打开软件加速，manifest.json文件加 "hardwareAccelerated":true

"google": {       
   "hardwareAccelerated":true  
         ｝  

或者创建文件时加

// true表示进入Webview的软件加速，false表示关闭Webview的硬件加速

var webview = plus.webview.create( "url", "id",{hardwareAccelerated:true});

webview.show();

2. IOS iphone, 加 "allowsInlineMediaPlayback": true 禁止视频自动弹出播放，去掉原生播放控件  
```javascript  
"plus":{  
    "allowsInlineMediaPlayback": true  
}  

3.调用

//#video_Container 是视频区域DIV的ID  
       //初始化插件  
var htmlvideo=Html5video("#video_Container",  
{  
 title:"新坦结衣Gakki雪肌精广告", //视频标题，当全屏时会显示  
 url:"2017123101.mp4", //支持本地视频和网络视频，格式MP4  
 img:"img/002.jpg", //视频截图封面  
 time:"02:30", //视频总时间以分钟单位，当网络缓慢时，没办法及时加载出来，如已知可以填写，可不填。  
 autoplay:false, //是否自动播放视频  
 isMobile:false, //是否开启当处于移动网络时，提示用户是否继续播放视频。,不支持浏览器环境  
 isFull:true, //是否点击播放就全屏显示  
 iospay:false, //如果是IOS系统是否采用苹果系统自带播放器, 可以在浏览器或微信中，全屏观看视频  
 drag:true, //禁止拖动,调节,音量和亮度  
 isfull:true, //是否显示全屏按钮  
 prompt:function(video) //当开启isMobile时,这里可以写提示用户的内容,h5+环境才有效  
 {    
               mui.confirm('你当前处于移动手机网络将会消耗手机流量，是否继续播放？', '提示',["取消","确定"], function(e)  
               {  
                    if(e.index == 1)  
                    {  
                      video.play();   
                    }   
              },"div");         
 }  
});   

新增了，同一页面，可以切换视频播放

mui("body").on("tap","#openvideo",function()  
{  
//切换视频播放  
htmlvideo.getplayUrl({url:"  ",img:"  ",title:" "});  
});  

新版视频播放器

一直没有找到一款合适在MUI上的播放器，网上好多都是基于JQ的播放，样式不漂亮，也难更改，不好用难于安卓和小米手机， 实在没办法，只能亲自操刀，自己写一个播放器了，给碰到我一样情况的朋友们，封装出来只直调用，大家可以自由设置 没有测试过，当网络迅速时html5 mp4播放器源码，...

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-120598-1.html