踩了阿里云播放器的一个坑
来源:互联网 发布:织带打版软件 编辑:程序博客网 时间:2024/05/22 17:17
偶然在多个页面使用了阿里云提供的播放器的系统里发现个 BUG
在 PC/MAC 端的 Chrome 浏览器中
1. 一部分页面加载播放器时报错且没有任何提示
2. 而另一部分页面加载播放器时,Chrome 会弹出“是否允许该页面使用 Flash Player”的提示,点击”允许“,则视频正常播放
3. 在可正常播放视频的页面中,点击了“允许”后,再回到有问题的页面,刷新,发现此时这类页面的播放器也可以正常工作了
BUG 分析
简单对两类页面进行人肉 diff 操作发现
1. 表现不正常的页面引用的 js 路径为 http://g.alicdn.com/de/prismplayer/1.5.2/prism-min.js
2. 而可以正常工作的页面引用 js 路径为 http://g.alicdn.com/de/prismplayer/1.4.7/prism-min.js
因官方宣称这个播放器会自适应 H5 和 Flash 两种模式,从出错的表象来看,猜测是 1.5.2 版本的自适应逻辑有一些问题。一开始想简单解决,猜测最新版本的播放器应该已经解决了这个 BUG,于是直接换用最新版本(1.5.7),测试后发现问题依旧,只是最新版本在播放器中多了一行文字提示,大意是播放类型不支持
为了定位问题,下载了两个链接对应的源 prism.js
(去除后缀 -min,一般带 -min 的 js 都是经过压缩、混淆,用于正式环境加载使用)文件
分析对比两个版本,发现与此问题相关的核心代码如下
v1.4.7
return tag['player'] || (UA.IS_MOBILE ? new Player(tag, option) : new FlashPlayer(tag, option));
v1.5.7
return tag['player'] || (UA.IS_H5 ? new Player(tag, option) : new FlashPlayer(tag, option));
可以从代码中看出该播放器自适应的逻辑,在 v1.4.7 中依据 UA.IS_MOBILE
来判断是否是移动端,是则创建 H5 播放器对象,否则 创建 Flash 播放器对象;而在 v1.5.7 中,依据UA.IS_H5
来判断,如果该变量为逻辑真,则使用 H5 播放器,否则为 Flash 播放器
所以在 PC/MAC 平台,且使用了 v1.4.7 版本的页面上,IS_MOBILE
值一定为逻辑假,所以无论如何,都会直接创建 Flash 播放器对象,从而触发向 Chrome 申请 Flash Player 使用权限的逻辑,看上去没有什么问题
而在使用了 v1.5.7 版本的页面上,IS_H5
值为逻辑真,于是创建 H5 播放器对象。那么问题来了,为什么这种情况下会出错。在重新仔细阅读了一遍官方文档后,看到文档中有这样一段内容
Flash 模式:
* 视频格式: mp4、flv、m3u8、rtmp、mp3
* 视频编码: H.264
* 音频编码: AAC、MP3HTML5 模式:
* 视频格式: mp4、m3u8
* 视频编码: H.264
* 音频编码: AAC
m3u8格式播放依赖调用端浏览器支持情况:iOS全系列支持,Android 4.0及以上版本支持。
根据播放类型不支持的错误提示,对照这段内容,想到业务所需播放的视频类型为 m3u8 格式,正好对上了上述内容最后一句话
m3u8格式播放依赖调用端浏览器支持情况:iOS全系列支持,Android 4.0及以上版本支持。
看来问题是出在 PC/MAC 端的 Chrome 目前并不支持 HTML5 播放器播放 m3u8 格式的视频流
到这里,问题已经原因基本已经明确了,但是还有个小问题,即前文提到的
在可正常播放视频的页面中,点击了“允许”后,再回到有问题的页面,刷新,发现此时这类页面的播放器也可以正常工作了
为什么会有这种情况,难道在使用 v1.4.7 播放器的页面点击了“允许该域名使用 Flash Player”后,使用 v1.5.* 播放器的页面中 UA.IS_H5
的值发生了变化,从而变成了 Flash 模式?
为了验证这个疑问,修改 v1.5.7 版本 prism.js 的内容,加一行 console.log(UA.IS_H5)
接下来进行验证
1. 清空 Chrome 中的 Flash Player 使用权限白名单,保证该域名如需使用 Flash Player,需先向用户请求权限
2. 在使用 v1.5.7 版本播放器的页面中,在控制台看到 UA.IS_H5
值为 True
3. 在使用 v1.4.7 版本播放器的页面中,点击播放器视频,在浏览器弹出提示框点击“允许”。此时该域名将被添加到 Chrome 白名单,永久拥有了使用 Flash Player 的权限
4. 重新回到使用 v1.5.7 版本播放器的页面,刷新并发现此时 UA.IS_H5
值为 False
可以看出页面是否拥有 Flash Player 使用权限,确实影响到了 UA.IS_H5
的值,从而影响了页面自适应播放器模式
因 UA
对象是 prism.js 通过 require() 方式从其他 js 中得到,而阿里云限制了对该 js 的访问,所以 UA.IS_H5
究竟是如何获得值,也就不得而知了
到此,导致该问题的全部原因都清楚了
解决方案
- 将自适应版本替换为 Flash 版,强制使用 Flash。缺点是这样一来就相当于放弃了未来移动端扩展
- 将全部 v1.5.* 版本 js 替换为 v1.4.7。因业务需求较简单,所以规避该问题即可,1.4.7 已能满足用户需求
思考
从文档来看,阿里云的开发人员很清楚这个问题,但给出的兼容方案并不好,可以考虑优化,比如以下方案
- 最简单版本:播放器提示语除了表明“播放类型不支持”,最好再明确一下为什么不支持,即便在原提示语上加个可以点击跳转到官方文档的链接都好
- 自适应逻辑中,多加一层判断,当前浏览器内核是否支持 HTML5 模式下 m3u8 格式视频流的播放。如果不能且非移动端浏览器,转而执行 Flash 模式流程,而不是强行走 HTML5 流程,给用户一个莫名其妙的错误
- 踩了阿里云播放器的一个坑
- 阿里云播放器单击切换播放/暂停
- 修改了一个YUV/RGB播放器
- 我撸了一个视频播放器
- 一个音乐播放器的踩坑实践
- 阿里云播放器SDK的正确打开方式 | Aliplayer Web播放器介绍及功能实现(三)
- 阿里云点播录制,上传,播放使用说明及遇到的坑
- 阿里云播放器SDK的正确打开方式 | 功能、架构与应用(一)
- 阿里云播放器SDK的正确打开方式 | 功能、架构与应用
- Android开发阿里播放器
- 阿里prismplayer播放器文档
- 阿里云缓存服务器里面的一个坑
- 在 Fedora 5 Linux 下实现了一个基于 libmad 的 MP3 流媒体播放器
- 用gstreamer sdl做了一个简陋的mp3播放器
- 做了一个可以生成在线mp3 flash播放器的网站
- 耗了一个下午,实在搞不定了,希望能有做过音乐播放器的给予指导
- 一个阿里云的面试题
- 阿里云的一个安装脚本
- 朋友圈的设计及实现。
- 【Scikit-Learn 中文文档】使用 scikit-learn 介绍机器学习 | ApacheCN
- linux 文件系统构建之初步了解yaffs
- 自定义注解实现日志管理
- 面向对象
- 踩了阿里云播放器的一个坑
- 自定义滚的CustomScrollView
- JavaFX API详解之Window,Stage,PopupWindow
- JAVA深复制(深克隆)与浅复制(浅克隆)
- 加减器(自定义view)
- 【鸟哥的Linux私房菜】Linux的压缩与打包
- spring注解源码分析-解析和注入注解配置的资源
- Celery-4.1 用户指南: Monitoring and Management Guide
- 从日志到双十一大屏只要一步:LOG/SLS+DataV 打通