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

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

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

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

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

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

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。

 

HTML部分：

	





	
	

		00:00
	
	

		

			

				

				
			
		
	
	

		00:00
	
	



	

JS部分：

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