本文说明了阿里云Web端播放器SDK,Flash和H5两种播放模式的支持格式、适配情况、适配问题并提供了对应的示例代码。
支持格式
阿里云Web端播放器SDK,同时支持Flash和H5两种播放技术。
- Flash 模式(已停止更新):
- 视频格式:MP4、FLV、M3U8、RTMP
- 视频编码:H.264
- 音频编码:AAC、MP3
- 音频格式:MP3
- H5 模式:
- 视频格式:MP4、FLV、M3U8
- 视频编码:H.264
- 音频编码:AAC
- 音频格式:MP3
适配情况
- Flash模式,适配情况如下:
浏览器 MP4 FLV M3U8 RTMP MP3 Chrome √ √ √ √ √ Firefox √ √ √ √ √ IE IE 8及以上版本 IE 8及以上版本 IE 8及以上版本 IE 8及以上版本 IE 8及以上版本 Edge √ √ √ √ √ Opera √ √ √ √ √ Safari √ √ √ √ √ 说明 移动端(iOS、Android)不支持Flash播放器。https://g.alicdn.com/de/prismplayer/2.9.3/json/json.min.js
- H5模式,适配情况如下:
播放器 MP4 FLV M3U8 RTMP MP3 Chrome √ 34及以上版本 34及以上版本 × √ Firefox √ 49及以上版本 49及以上版本 × √ IE IE 9及以上版本 - IE 11及以上版本
- Windows 8.1及以上版本
- IE 11及以上版本
- Windows 8.1及以上版本
× IE9及以上版本 Edge √ √ √ × √ Opera √ √ √ × √ Safari √ 8及以上版本 8及以上版本 × √ 说明- 播放FLV、M3U8视频,PC端支持的浏览器,需要启用允许跨域访问。
- PC端Chrome浏览器在移动模拟器下,播放M3U8需要安装Native HLS Playback ChromeNative HLS Playback Chrome插件。
- FLV的直播流,在win8 及以上系统的IE 11浏览器下无法播放,因为flv.js在IE 11浏览器下的mseLiveFlvPlayback为false,所以不支持播放。
移动端 MP4 FLV M3U8 RTMP MP3 iOS √ × √ × √ Android √ × 4.0及以上版本 × √ 说明 H5播放器在移动端不支持FLV和RTMP的播放。 - H5阿里云HLS加密播放,适配情况如下:
加密 iOS Android PC 标准加密 √ √ - Chrome
- FireFox
- Safar
- iEdge
- IE 11及以上版本
- Windows 8.1及以上版本
私有加密 × Chrome for Android - Chrome
- FireFox
- Safar
- iEdge
- IE 11及以上版本
- Windows 8.1及以上版本
说明 阿里云私有加密推荐使用Chrome浏览器播放。 - 启用私有加密的防调式
通过引入aliiplayer-vod-anti-min.js文件开启防调试模式,考虑到在开发过程中的调式, 您可以在发布的产品中引入,Javascript文件的地址示例如下:
<script src="https://g.alicdn.com/de/prismplayer/2.9.3/hls/aliplayer-vod-anti-min.js"></script>
注意 如果关闭开发者工具页面还是无法刷新出来,需要在新的tab里重新打开页面。
H5适配问题
- 移动端浏览器视频会默认全屏播放,针对不同的情况需要不同的设置:
- iOS App:App实现内联播放需要设置Aliplayer提供的
playsinline
属性为true
,同时WebView需要设置allowsInlineMediaPlayback
,设置后页面在App里打开时视频就能以非全屏模式(即内联的方式)播放。 - Android:Android系统会有不同的定制版本,每个版本对H5 video标签的实现都有差别,所以在Android系统上播放视频所展现的一致性,相比iOS系统要差很多,也可以设置
playsinline
属性为true
,只需要终端浏览器支持内联播放,对于X5内核浏览器(微信,QQ浏览器)可以启用同层播放,达到类内联播放的目的。 - Safari浏览器:iOS10以下版本的Safari浏览器是无法禁止视频自动全屏播放的。
- iOS App:App实现内联播放需要设置Aliplayer提供的
- 设置
autolay
属性为true
是无效的,不会触发自动播放:- 移动端浏览器:H5Video自动播放视频只有两个办法,通过设置
autoplay
属性或者调用play()
方法,但是现实是在移动端中视频自动播放一直是被禁止的,目前通用的办法是通过用户手动触发播放(例如:监听用户的点击事件并调用play()
方法。说明 不排出一些特性的浏览器和webview允许自动播放器,特别是在Android系统上。 - Safari浏览器:MacOS High Sierra Safari 11以上的浏览器限制自动播放。
- Chrome浏览器:Chrome 55浏览器以上版本也限制自动播放。
- 移动端浏览器:H5Video自动播放视频只有两个办法,通过设置
- 音量调节功能(
getVolume
和setVolume
)在iOS系统和部分Android系统会失效。 - 倍速播放功能,部分移动端浏览器不支持设置倍速,功能会失效,比如Android系统的微信。
- 截图功能在移动端部分机型由于安全问题,会截图失败。比如Android4.4.1系统或者浏览器本身问题,截的图片是全黑的,可以通过截图检测工具验证浏览器的支持情况。
导入引用文件
不依赖于任何的前端js库,只需要在页面中引用如下js文件,就可以进行播放器的初始化。示例如下:
引用的js文件同时包含了Flash和H5跨终端自适应的逻辑。如果您只是想使用其中一种播放技术,也可以只引用对应技术的js文件,从而获得更小的文件体积:
https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js
说明 如果出现文本乱码,可以在
<script></script>
标签中添加charset="utf-8"
属性。
- Flash版本,示例如下:
https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-flash-min.js
- H5版本,示例如下:
https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-h5-min.js
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js"></script>
</head>
</html>
SDK使用
Aliplayer SDK除了直接支持Source播放方式外,还支持通过阿里云视频云服务的video方式播放:
示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>用户测试用例</title>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js"></script>
</head>
<body>
<div class="prism-player" id="J_prismPlayer"></div>
<script>
var player = new Aliplayer({
id: 'J_prismPlayer',
width: '100%',
autoplay: true,
//支持播放地址播放,此播放优先级最高
source : '播放url',
//播放方式二:点播用户推荐
vid : '1e067a2831b641db90d570b6480fbc40',
playauth : 'ddd',
cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
encryptType:1, //当播放私有加密流时需要设置。
//播放方式三:仅MPS用户使用
vid : '1e067a2831b641db90d570b6480fbc40',
accId: 'dd',
accSecret: 'dd',
stsToken: 'dd',
domainRegion: 'dd',
authInfo: 'dd',
//播放方式四:使用STS方式播放
vid : '1e067a2831b641db90d570b6480fbc40',
accessKeyId: 'dd',
securityToken: 'dd',
accessKeySecret: 'dd',
region:'cn-shanghai',//eu-central-1,ap-southeast-1
},function(player){
console.log('播放器创建好了。')
});
</script>
</body>
</html>
您可以对播放器进行可视化的在线配置,请参见在线配置。
扫描体验
使用钉钉扫描以下二维码体验阿里云播放器Demo。

在文档使用中是否遇到以下问题
更多建议
匿名提交