王者地带
王者地带
  • 发布:2017-12-04 11:48
  • 更新:2022-07-14 22:12
  • 阅读:55941

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

分类:HTML5+

一直没有找到一款适合在MUI上的播放器,网上很多都是基于JQ的播放,样式不好看,也难修改,不好用难于兼职安卓和苹果手机,
实在没办法,只能亲自操刀,自己写一个播放器了,给遇到我一样情况的朋友们,封装起来只直调用,大家可以自由修改

没有测试过,当网络缓慢时,视频加载出现加载提示框,有遇到问题的小伙伴,可以分享处理经验

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

20180517:新增: 支持点击播放就全屏播放视频, 支持在浏览器和微信上播放视频,支持使用IOS系统自带的播放器,大家可以根据自己的需求设置

20180620:支持同一个页面切换视频的方法,新增可以禁止拖动调节,音量和亮度,是否显示全屏按钮, IOS支持强制全屏播放

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

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

微信扫一扫,可以浏览微信里视频播放例子

  1. 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:" "});  
});

新版视频播放器
http://www.html5-app.com/show/115

目前该版本播放器,不再维护了,如有任何问题,请自行修改源代码自行解决。

83 关注 分享
n***@gmail.com 诗小柒 兰刃 梦如人生 DCloud_heavensoft Trust 9***@qq.com 3***@qq.com 无色无花 洛上千栀 Warn mlm8368 猪小怪 老哥教教我 水灵退散 地表荣耀 4***@qq.com 2***@qq.com 爱编程的鑫 s***@126.com 不能没有 1***@qq.com [已删除] 醉里挑灯砍屎 1***@qq.com 7***@qq.com 1***@qq.com l***@126.com 9***@qq.com 大苏 1***@qq.com itxiaoxiao 3***@qq.com joey_lee 5***@qq.com 慌慌张张 ccen 1***@qq.com [已删除] 7***@qq.com 1***@qq.com 陈锐 1***@qq.com 2***@qq.com businessman Effyt woody1 fx4399 lhyh 暮雪骄阳

要回复文章请先登录注册

1***@qq.com

1***@qq.com

视频截图设置,出现覆盖视频问题怎么解决的朋友?
2018-08-12 11:24
7***@qq.com

7***@qq.com

我这里访问了后台的地址后视频播放不了了
(ios可以访问,安卓可以访问)url: "http://onehk-1251146759.cosgz.myqcloud.com/video_171129.mp4",
(这样写ios不能访问,安卓可以访问)url: app.serverFileKeyURL(data.infoVideo),
自己写的访问后台路径方法??
2018-08-06 15:15
1***@qq.com

1***@qq.com

回复 1***@qq.com :
到目前为止使用这个播放器已经没有任何问题了,在使用这个播放器的时候遇到了安卓切换全屏后再返回的时候会先显示下横屏的页面,如果想要取消这个的话,大家可以先锁住屏幕在进行退出全屏就好了,希望对大家有帮助
2018-08-03 14:35
1***@qq.com

1***@qq.com

大神,你这个播放器真的很不错什么都比较全面,不过提醒大家一下如果在苹果上想要全屏需要在配置文件里开启横屏,这是我遇到的一个问题,不过还有一个问题想跟楼主请教下 我开启横屏后苹果没问题了 但是安卓会卡顿一下才全屏 不知道这个是加了延时?还是?
2018-08-02 20:34
4***@qq.com

4***@qq.com

回复 4***@qq.com :
好吧。是我的公司网络有问题。换了其他地方就可以了见鬼了
2018-07-30 10:22
4***@qq.com

4***@qq.com

html5video_dome_20180621_01.zip 这个demo没办法下载。能不能查看下什么原因。下载下来的提示文件损坏。下了几次都是这样
2018-07-30 10:12
7***@qq.com

7***@qq.com

大神,你好,我想控制视频的宽高度,我给video设置成width:100%,height:100%后,在安卓微信上,视频被拉伸了,其他浏览器都是可以的,这个应该怎么解决呀?
2018-07-27 14:14
1***@qq.com

1***@qq.com

全屏点击后滑动快消失过快
2018-07-23 20:22
1***@qq.com

1***@qq.com

点击全屏按钮后,全屏按钮怎么消失了
2018-07-23 18:41
慌慌张张

慌慌张张

谢谢
2018-07-06 14:28