阿里播放器踩坑记录 进度条重构 video loadByUrl失效解决方案

如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人。谢谢大家!❤

如果解决不了,可以在文末进群交流。

文档地址:https://player.alicdn.com/aliplayer/index.html

阿里播放器接口丰富,功能强大,并且官方提供了直接生成的代码。你只需要按照个人需求,定制功能即可。用起来非常简单。但是其中也有不少的坑。而且还提供了源码,如果功能不够项目扩展,可以自行修改源码,进行定制。

阿里播放器踩坑记录 进度条重构 video loadByUrl失效解决方案_第1张图片

阿里播放器踩坑记录 进度条重构 video loadByUrl失效解决方案_第2张图片

我在项目中碰到的坑主要有以下几点:

1.项目中的视频是由多段视频剪辑而成,所以需要重新自制进度条。

2.点击进度条的时候,不痛的媒体文件会有不同的效果很影响用户体验诸如:进度条来回调动,寻求时间不成功。

3.全屏情况下,不同的机型,也会有不同的效果。比如安卓和苹果,iphone在全屏情况下是覆盖了DOM元素的,所以是看不到自制的进度条。

注意事项:

1.在开始使用之前,先确定好到底要播放哪种媒体流.m3u8还是MP4。因为不同的文件,效果会不一样。

2.接口中的player.loadByUrl()方法有时候不起作用。可以尝试先loadByUrl,然后在canplay方法中再通过player.seek()方法去跳帧时间。

3.canplay方法可能会在多处用到,此时需要一定注意的是,player.on('canplay',function(){});这个接口是全局使用的。凡是视频能够开始播放音频/视频时,都会多次触发调用这个接口,所以这个函数里面需要加个标识进行判断,到底要不要执行这个函数里面的一些逻辑代码。

4.iphone手机,由于内核不一样,所以是不需使用(fullscreenService.requestFullScreen)全屏接口的。这时候需要使用视频自有的webkitEnterFullScreen来进行全屏事件。

效果图:

 

以下,贴上项目中的部分代码,供大家参考,不懂地方可以进入微信技术交流群,如果过期可加我微信:mengyilingjian。

阿里播放器踩坑记录 进度条重构 video loadByUrl失效解决方案_第3张图片 阿里播放器踩坑记录 进度条重构 video loadByUrl失效解决方案_第4张图片

HTML部分:

00:00
00:00

JS部分:

注: 实际项目我更改了阿里 aliplayer_components.js,满足了全部需求。以下代码仅供参考。直接copy使用的话,可能会导致部分报错。




 

你可能感兴趣的:(阿里播放器踩坑记录 进度条重构 video loadByUrl失效解决方案)