video移动端视频播放器

原创 ShanaFang 随笔 基础知识 154阅读 2018-07-20 14:45:26 举报

1.填坑的缘由

移动端的播放器真的是很蛋疼,android和ios完全是两种风格,产品看了不满意,设计看了更是不用说了,自己设计的图那么漂亮,怎么一到你这就成了这样呢?(设计还是全面屏android,和我的小iphone比起来,效果可以说是天差地别)宝宝我委屈呀,这是系统自带的呀,我能怎么办~产品在禅道就指了一个bug给我,简简单单几个字: 自己写!

EXM?!你他妈是在逗我吗?好吧好吧,你是领导,你牛逼,自己写就自己写吧...

2.开始准备

1).要不写写ui吧

先上样式

pug 布局(因为比较懒,写pug能够少写好多字符,哈哈)

确实是像是那么一回事儿,不过,最大的坑准备到来啦!!!

2). 对应的vue编码实现

用浏览器模拟播放,我靠,那么棒,流畅且漂亮,感觉要爱上自己了!感觉到手机里面看看效果!

3.手机填坑

1).自动播放是不可能的了,android在oncanplay里面我也添加了play,可是并无卵用,只能通过click或tap点击事件,才能进行播放。
2).为了想让视频加载时显示菊花,iphon的oncanplay压根不执行,iphone想用oncanplay是不可能的。也试过用durationchange,ios也没有效果。所以我用了另一种极端方法,android用canplay没问题,ios的话,可以在onplay事件里将播放按钮变成菊花,然后在onplaying事件中再将菊花隐藏,这样就可以有加载中的效果啦~
3).进度条拖拉偶尔会失效,至今我还是搞不明白是怎么回事,难道是网速问题,导致没反应过来?这个我还真不知道。
4). 最最坑的来了,android机播放以后自动全屏播放。如果用canvas渲染,那真的是卡爆了,大神们求指点呀。
5). 全屏会变为系统自带的播放器,自定义的bar和一系列的事件都没用了。我在想可不可以不用原生的全屏,而是自己写方法实现。在点击全屏的时候,将视频旋转,填充屏幕,实现模拟全屏,这样的兼容性会不会好一点?

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复