王者地带
王者地带
  • 发布:2017-12-04 11:48
  • 更新:1 天前
  • 阅读:21740

分享一个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

74 关注 分享
nearwmy@gmail.com 诗小柒 兰刃 梦如人生 DCloud_heavensoft DCloud_UNI_Trust 9000547@qq.com 314779559@qq.com 无色无花 洛上千栀 Warn mlm8368 猪小怪 老哥教教我 水灵退散 地表荣耀 420652869@qq.com 244934256@qq.com 爱编程的鑫 songjinmiao0509@126.com 不能没有 1846732228@qq.com qq820805144 醉里挑灯砍屎 1018583828@qq.com 794694123@qq.com 1411228@qq.com lucky1603@126.com 982586131@qq.com 大苏 1145957876@qq.com itxiaoxiao 374857922@qq.com joey_lee 562216629@qq.com 慌慌张张 ccen 1966018877@qq.com 37797427@qq.com 736391311@qq.com 1553420481@qq.com 陈锐 1440163948@qq.com 237486359@qq.com businessman 波 woody1 fx4399 lhyh 深圳大力

要回复文章请先登录注册

1500832272@qq.com

1500832272@qq.com

大佬,可不可以记忆播放
1 天前
1091271822@qq.com

1091271822@qq.com

回复 sacrg793@aliyun.com: 大佬 替换你这段代码之后是可以横屏了,但是推出横屏的时候,整个页面都是横屏模式的。。
2019-03-13 14:57
云化雨

云化雨

王者大神,视频播放的全屏切换怎么柔化啊,我老板的手机超级卡,全屏切换的感觉好差,可以让全屏切换的时候优化一下吗 ? 就是那种淡入淡出的切换模式 , 我想改但不知道从哪里改T_T
2019-03-05 17:03
sacrg793@aliyun.com

sacrg793@aliyun.com

2019.2.16
发现在某些机型:比如华为10plus,三星某些机子上无法全屏。小米和苹果上是可以的,所以对代码进行了一个补充。请大家在源码的基础上进行修改。在587行处:
mui_quanping.addEventListener("tap", function()
{

isfull("");
if(fullScreenFlag){
plus.screen.lockOrientation("landscape");
}else{
plus.screen.lockOrientation("portrait");
}

});
用这段代码来代替。
2019-02-16 18:22
61370048@qq.com

61370048@qq.com

回复 王者地带: 页面是预加载的,我去掉看看,谢谢您!
2019-02-14 11:30
王者地带

王者地带 (作者)

回复 61370048@qq.com: 没有缓存,可能你的页面是预加载的,或者播放的视频链接没有更改到,先检查下
2019-02-05 00:02
61370048@qq.com

61370048@qq.com

王者,新年好,视频的缓存怎么去掉?
每次从详情页返回后,在进去另外一个详情页后,播放的还是之前的视频。
2019-02-04 12:30
wtta1812@163.com

wtta1812@163.com

竖屏视频全屏 还是横屏
2019-01-23 22:52
sacrg793@aliyun.com

sacrg793@aliyun.com

不能全屏,微信里是可以的。
2019-01-23 21:53
王者地带

王者地带 (作者)

回复 夜蕴: 设备, isFull:false ,是不会一播放就全屏的
2018-12-29 00:00
夜蕴

夜蕴

微信端环境不管设不设置全屏播放,都会默认全屏播放,而且标题等元素也会失效。请问如何在微信端环境设置不全屏播放。百度好像是在video标签加x5-video-player-type="h5" playsinline,但你这个不一样,求解如何设置微信不全屏播放问题。
2018-12-28 20:33
BeMySignora

BeMySignora

回复 BeMySignora: 已经解决了
2018-12-20 15:14
BeMySignora

BeMySignora

大佬,SewisePlayer.playerReady is not a function报这个错是因为什么呢
2018-12-20 12:34
270068451@qq.com

270068451@qq.com

大佬,请问下,为什么在双web情况下,视屏不能全屏呢?
2018-12-19 09:32
王者地带

王者地带 (作者)

回复 menghuan: manifest.json 文件是每个APP必不可少的配置文件, 每个工程都包含这个,你如果不知道,说明你没使用过,它在工程的根目录上,你找下,文章已经说明了,为了开启硬件加速而已
2018-12-14 12:42
menghuan

menghuan

回复 王者地带: manifest.json 这个文件是在哪加载,跟播放有关系嘛
2018-12-14 10:51
王者地带

王者地带 (作者)

回复 menghuan: 没有见过这种错误,不知道你是怎么造成的
2018-12-13 20:30
menghuan

menghuan

回复 王者地带: AbortError: The fetching process for the media resource was aborted by the user agent at the user's request
会出现这种错误,不知道能讲解下嘛
2018-12-13 14:08
王者地带

王者地带 (作者)

回复 menghuan: url 就是普通的视频后缀的链接,例如:http://ask.dcloud.net.cn/1234.mp4
2018-12-13 12:35
menghuan

menghuan

请问下播放不了是什么原因。进去加载失败,也不能返回 可以快进后退,点击下一个视频就好了
还有一个问题是url格式什么样的,项目下的路径 控制台会报编译错误
2018-12-13 12:06
15165310761@163.com

15165310761@163.com

我有个我问题,demo里的本地视频和切换的视频都可以快进。换成我服务器的地址视频或者本地项目的地址视频就不能快进,一快进就就从头播放。。。
2018-12-01 11:31
王者地带

王者地带 (作者)

回复 wangsongbai1231@163.com: 不能,uniapp 不支持DOM 操作
2018-11-30 22:01
wangsongbai1231@163.com

wangsongbai1231@163.com

uniapp能用吗?
2018-11-30 20:30
553333678@qq.com

553333678@qq.com

123
2018-11-30 10:51
videoplayer

videoplayer

回复 王者地带: 感谢回答
2018-11-29 18:15
王者地带

王者地带 (作者)

回复 videoplayer: http://ask.dcloud.net.cn/article/13397 ,这个类似抖音HTML5的, 抖音是原生开发的,目前HTML5+目前没办法开发出抖音这种流畅的播放效果
2018-11-24 01:29
videoplayer

videoplayer

请问如何实现抖音视频类似的播放功能,或者有相关的解决方法吗
2018-11-23 18:34
970124888@qq.com

970124888@qq.com

回复 王者地带: 好的,我试试,谢谢大神回复。
2018-11-21 19:07
王者地带

王者地带 (作者)

回复 970124888@qq.com: 以下代码可以监听播放结束,
document.querySelector("video").addEventListener("ended", function()
{
//播放下一个视频
htmlvideo.getplayUrl({url:" ",img:" ",title:" "});

});
2018-11-21 19:05
970124888@qq.com

970124888@qq.com

大神,我想在视频页面监听当前视频播放结束后切换另一个视频,后端一枚,不太会处理,能不能赐教一下?
2018-11-21 18:39
1024882783@qq.com

1024882783@qq.com

可以快进 但是不能调音量和亮度
2018-11-14 11:36
282471092@qq.com

282471092@qq.com

回复 王者地带: 没有回复错,我真机调试的全屏不了。安卓
打包后可以了,不过左滑右滑没有用
2018-11-05 10:53
1145957876@qq.com

1145957876@qq.com

原因找到了 可以加一下qq吗? 我把包发给你看看? 有没有方法解决
2018-10-30 11:30
1145957876@qq.com

1145957876@qq.com

回复 1145957876@qq.com: 还要其他原因正在查看。。
2018-10-29 17:51
1145957876@qq.com

1145957876@qq.com

之前那个全屏返回,bug原因找到了 原因是不能使用JavaScript文件 我用了JavaScript2.1 导致全屏返回出现返回上一页,视频还在播放
2018-10-29 17:42
王者地带

王者地带 (作者)

回复 603893819@qq.com: 如果只有一个video ,可以这样获得当前视频播放的时间,
document.querySelector("video").currentTime;
2018-10-28 10:35
603893819@qq.com

603893819@qq.com

请问大神,如何获取到视频观看了多少分钟呢?
2018-10-27 23:21
546714871@qq.com

546714871@qq.com

The element has no supported sources 报这个错是什么原因啊
2018-10-18 12:34
546714871@qq.com

546714871@qq.com

为什么加载好慢啊
2018-10-18 12:28
符号

符号

回复 王者地带: 我看了你的源码,你的一些事件必须是真实dom,动态创建的dom不适用
2018-10-03 15:14
王者地带

王者地带 (作者)

回复 符号: 不知道是不是和vue有冲突,具体看下有没有报错什么
2018-09-30 18:01
符号

符号

我在项目中引用了vue,就失效了
2018-09-30 17:38
王者地带

王者地带 (作者)

回复 萱之蝶恋花华: m3u8 格式IOS不能播放,我试过是可以的,或者你换个小点的视频试下,方便的话,可以把你的m3u8就视频链接私信发给我测下
2018-09-13 12:24
萱之蝶恋花华

萱之蝶恋花华

回复 王者地带: 视频是m3u8格式的,可以正常在安卓手机上和浏览器的模拟机上打开,一放在iPhone的模拟机上和iphone手机上就不行了,一直打圈圈,求指教。
2018-09-13 09:17
王者地带

王者地带 (作者)

回复 萱之蝶恋花华: 检查下你的视频链接是否可以正常打开,是不是MP4格式
2018-09-13 00:49
萱之蝶恋花华

萱之蝶恋花华

你好,我发现这个视频插件为什么放置视频监控的视频在iPhone 上加载不出来,老是在转圈圈,求解答,很急。谢谢
2018-09-12 18:15
laohouer

laohouer

高人啊,我认真学习了,感谢你的贡献
2018-08-23 20:45
1145957876@qq.com

1145957876@qq.com

出现一个问题 帮忙解决一下 安卓 视频播放手机调试正常 打包之后 视频退去全屏的时候 页面不见了! 找不到原因 视频的声音还在 重新打开一个新页面之后页面有出现在新页面的后面
2018-08-22 21:20
1023255844@qq.com

1023255844@qq.com

回复 1553420481@qq.com: 你好,请问你说的配置横屏是怎么弄的?"allowsInlineMediaPlayback": true这段需要添加吗?
2018-08-13 13:31
1440163948@qq.com

1440163948@qq.com

回复 1440163948@qq.com: 问题已解决,是视频格式问题。
2018-08-12 15:37
1440163948@qq.com

1440163948@qq.com

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

785228252@qq.com

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

1553420481@qq.com

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

1553420481@qq.com

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

474286892@qq.com

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

474286892@qq.com

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

793129680@qq.com

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

1553420481@qq.com

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

1553420481@qq.com

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

慌慌张张

谢谢
2018-07-06 14:28
1145957876@qq.com

1145957876@qq.com

大神 有一个安卓的问题 我手机横屏播放以后 安卓在按返回键 mui监控不
2018-07-03 19:59
454609449@qq.com

454609449@qq.com

无法播放,IOS真机运行和Hbuilder边改边看模式也不能播放,在谷歌浏览器中可以
2018-06-28 16:41
itxiaoxiao

itxiaoxiao

回复 王者地带: 嗯,这个问题好了,就是我一开始那个进度条问题还存在,我的操作步骤是这样的点击视频让进度条出来,再点击切换视频,那个进度条圆点会在中间出现并且闪一下就消失,希望切换时圆点能回到最初的位置00:00旁边
2018-06-22 11:18
王者地带

王者地带 (作者)

回复 itxiaoxiao: 你说有不灵,确实存在,那全屏按键被挡住了,已经上传最新的了,可以再下载体验下
2018-06-21 19:04
itxiaoxiao

itxiaoxiao

回复 itxiaoxiao: 全屏切换小屏点不了
2018-06-21 17:54
itxiaoxiao

itxiaoxiao

回复 itxiaoxiao: 还有全屏按钮点击不灵敏,我的是安卓手机
2018-06-21 17:52
itxiaoxiao

itxiaoxiao

回复 王者地带: 嗯,大神,切换视频有个问题,就是切换的瞬间进度条位置不对,在中间了,虽然只是一闪就消失了,希望修正下
2018-06-21 17:49
王者地带

王者地带 (作者)

新的工程包:支持同一个页面切换视频的方法,新增可以禁止拖动调节,音量和亮度,是否显示全屏按钮, IOS支持强制全屏播放
2018-06-21 13:40
王者地带

王者地带 (作者)

回复 itxiaoxiao: 新工程包,已经可以支持,同一页面,切换播放
2018-06-21 13:39
王者地带

王者地带 (作者)

回复 可能是个新手: 新工程包,可以支持IOS全屏播放了
2018-06-21 13:38
itxiaoxiao

itxiaoxiao

回复 大苏: 同样希望能同一个页面切换视频
2018-06-13 17:37
itxiaoxiao

itxiaoxiao

怎么切换视频路径啊
2018-06-13 15:55
王者地带

王者地带 (作者)

回复 1145957876@qq.com: 视频只在一个页面,如果被父页面挡着,就看不到了
2018-06-12 16:32
1145957876@qq.com

1145957876@qq.com

楼主 问一个 问题 如果父页面 遮住了 视频有没有可能吧 视频的显示优先级提高啊?
2018-06-12 16:12
可能是个新手

可能是个新手

并不能全屏呀,全屏只是悬浮层播放的
2018-06-06 11:42
大苏

大苏

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系统是否采用苹果系统自带播放器, 可以在浏览器或微信中,全屏观看视频
prompt:function(video) //当开启isMobile时,这里可以写提示用户的内容,h5+环境才有效
{
mui.confirm('你当前处于移动手机网络将会消耗手机流量,是否继续播放?', '提示',["取消","确定"], function(e)
{
if(e.index == 1)
{
video.play();
}
},"div");

}
});
这个每写一次就会插入一个video
怎么让他不插入而是替换之前的video
2018-06-06 01:22
大苏

大苏

手势很难控制
2018-06-05 12:53
1064774938@qq.com

1064774938@qq.com

期待楼主对于 m3u8 播放优化下
2018-05-20 13:11
王者地带

王者地带 (作者)

回复 12727497@qq.com: 已经可以支持,浏览器播放和微信上播放,可以重新下载工程案例
2018-05-17 22:48
gaga2

gaga2

怎么默认播放就是最大化?
2018-05-17 17:25
飞跃梦想

飞跃梦想

回复 飞跃梦想: iphone6 测试的,本地MP4一切正常 m3u8卡在加载
2018-05-11 18:12
飞跃梦想

飞跃梦想

IPHONE 上无法播放m3u8,可以播放本地MP4,小米5s上测试完美,
2018-05-11 15:51
fate_23409@hotmail.com

fate_23409@hotmail.com

mark
2018-05-03 15:18
1018583828@qq.com

1018583828@qq.com

写的真不错,期待继续更新
2018-05-03 11:09
上官萧晨

上官萧晨

你好 我测试了下 有的手机可以全屏,有的不能全屏,这个怎么适配,我的vivo手机全屏不管用怎么调下,还有就是有时候视频显示出来,离顶部比较远,怎么设置下让适应手机全屏
2018-05-02 21:31
12727497@qq.com

12727497@qq.com

回复 王者地带: 能帮改下 支持浏览器的吗?
2018-04-23 11:14
移动大人

移动大人

img 视频封面在哪里获取设置呢?急求
2018-04-23 10:24
移动大人

移动大人

回复 下拉刷新啊: 你的解决了没,我现在也需要同样的需求
2018-04-23 09:41
移动大人

移动大人

如果我要做成一个视频列表,怎么处理呢?直接使用你的这个可以吗?
2018-04-23 00:10
mojito

mojito

请教个问题。我给您这块dom包上上拉加载,在IOS全屏就无法正常显示。调了好2天,实在是没招了~
2018-04-18 17:15
上官萧晨

上官萧晨

回复 zhangyu196: 你好,这个白屏的问题你解决了吗? 怎么解决的,告诉下小弟吧
2018-04-14 16:30
133130193@qq.com

133130193@qq.com

回复 王者地带: 你好 如何在一个页面创建多个视频窗口呢 我测试了一下不能达到目的啊
2018-04-11 17:26
chengbo_0717@126.com

chengbo_0717@126.com

全屏播放 视频源格式 不是标准尺寸 全屏导致显示不完整如何解决
2018-04-11 12:16
qq820805144

qq820805144

回复 王者地带: IOS没有声音是什么原因呢
2018-03-31 13:51
215756562@qq.com

215756562@qq.com

回复 31772760@qq.com: 你的系统版本是ios多少?我这边是一直卡在加载界面
2018-03-28 15:01
215756562@qq.com

215756562@qq.com

回复 chendong86@163.com: 你解决了吗?我这边一直是卡在加载界面
2018-03-28 15:00
songjinmiao0509@126.com

songjinmiao0509@126.com

回复 songjinmiao0509@126.com: 我在video上加了个ID。然后写个mui.back = function () {
var mui_video = document.getElementById('videoID');
mui_video.pause();
mui_video.ended;
mui.currentWebview.close();
old_back();
} 还是关闭不了,不知道错哪了
2018-03-18 19:08
songjinmiao0509@126.com

songjinmiao0509@126.com

回复 王者地带: 我在Android8手机上可以运行(后退好用),但是在Android4.4设备上点击子HTML的后退按键返回父HTML,发现视频还在播放,我想知道如何写后退按键监听(我用的就是MUI自带的),还有如何控制视频播放停止
2018-03-18 18:15
songjinmiao0509@126.com

songjinmiao0509@126.com

回复 王者地带: 明白了,谢谢
2018-03-18 15:15
王者地带

王者地带 (作者)

回复 songjinmiao0509@126.com: 目前这个只能在H5+ APP 里运行, 不支持浏览器
2018-03-18 15:00