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

一直没有找到一款适合在MUI上的播放器,网上很多都是基于JQ的播放,样式不好看,也难修改,不好用难于兼职安卓和苹果手机,

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

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

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

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

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

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

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

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

57a37043eb5792bf7ee9f13576623572.png

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

});

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值