分享一个Html5+video 基于mui 5+的视频播放器
https://ask.dcloud.net.cn/article/12949
- 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:" "});
});
html5video_dome_20180913.zip