全部产品
阿里云办公

集成文档

更新时间:2019-01-16 15:41:57

支持格式

阿里云Web播放器SDK,同时支持Flash和Html5两种播放技术。

  • Flash 模式:

    • 视频格式:mp4、flv、m3u8、rtmp
    • 视频编码:H.264
    • 音频编码:AAC、MP3
    • 音频格式:MP3
  • HTML5 模式:

    • 视频格式:mp4、m3u8、flv
    • 视频编码:H.264
    • 音频编码:AAC
    • 音频格式:mp3

适配情况

  • Flash 模式:
mp4 flv m3u8 rtmp mp3
iOS × × × × ×
Android × × × × ×
Chrome
Firefox
IE 8+ 8+ 8+ 8+ 8+
Edge
Opera
Safari

移动端不支持Flash播放器

使用flash播放器,当要支持IE8浏览器时,需要在页面添加json.min.js的引用。

  1. ```
  2. https://g.alicdn.com/de/prismplayer/2.8.0/json/json.min.js
  3. ```
  • HTML5 模式:
mp4 flv m3u8 rtmp mp3
iOS × ×
Android × 4.0+ ×
Chrome 34+ 34+ ×
Firefox 42+ 42+ ×
IE IE9+ 11+
for Windows 8.1+
11+
for Windows 8.1+
× IE9+
Edge ×
Opera ×
Safari 8+ 8+ ×

h5播放器在移动端不支持flv和rtmp的播放

播放flv、m3u8视频,PC端支持的浏览器,需要启用允许跨域访问

PC端chrome浏览器在移动模拟器下,播放m3u8需要安装Native HLS Playback Chrome插件

  • H5阿里云HLS加密播放
iOS Android PC
标准加密 Chrome
FireFox
Safari
Edge
IE 11+for Windows 8.1+
私有加密 × Chrome for Android Chrome
FireFox
Safari
Edge
IE 11+for Windows 8.1+

阿里云私有加密推荐使用Chrome浏览器播放

加密播放点播用户参见 点播加密说明,MPS用户参见MPS播放说明

  • 启用私有加密的防调式

    通过引入aliiplayer-vod-anti-min.js文件开启防调试模式,考虑到在开发过程 中的调式, 用户可以在发布的产品中才引入,Javascript文件的地址:

  1. <script src="https://g.alicdn.com/de/prismplayer/2.8.0/hls/aliplayer-vod-anti-min.js"></script>

注意:关闭开发者工具页面还是刷新不出来的,需要在新的tab里重新打开页面

H5适配问题

  • 移动端浏览器视频会默认全屏播放

    移动端浏览器默认是会弹出全屏播放,针对不同的情况需要不同的设置:

    1. iOS App: App内实现内联播放需要设置Aliplayer提供的playsinline 属性为true,同时WebView需要设置allowsInlineMediaPlayback,这样页面在 App里打开时视频就能以非全屏模式(即内联的方式)播放
    2. Safari: iOS10以下版本的Safari是无法禁止视频自动全屏播放的
    3. Android: Android系统会有不同的定制版本,每个版本对H5 video标签的实现都有差别,所以在Android上播放视频所展现的一致性,相比iOS要差很多,也可以设置playsinline属性为true,只需要终端浏览器支持内联播放,对于X5内核浏览器(微信,QQ浏览器)可以启用同层播放,达到类内联播放的目的。
  • 设置autolay=true无效,不会自动播放

    1. 移动端浏览器:H5Video自动播放视频只有两个办法,通过设置autoplay属性或者调用play()方法,但是现实是在移动端中视频自动播放一直是被禁止的,目前通用的办法是通过用户手动触发播放(例如 监听用户的点击事件并调用 play()方法,但是不排出一些特性的浏览器和webview允许自动播放器,特别是在Android上。
    2. Safari:MacOS High Sierra Safari 11以上的浏览器限制自动播放
    3. Chrome:Chrome 55以上版本也限制自动播放
  • 音量调节功能(getVolumn和setVolumn)iOS和部分Android会失效

  • 倍速播放功能,部分移动端浏览器不支持设置倍速,功能会失效,比如android微信

  • 截图功能在移动端部分机型由于安全问题,会截图失败,比如Android4.4.1,或者浏览器本身问题,截的图片是全黑的, 可以通过截图检测工具验证浏览器的支持情况。

如何导入

不依赖于任何的前端js库,只需要在页面中引用如下js文件,就可以进行播放器的初始化,如果出现文本乱码,可以添加script引用标签添加charset属性,值为”utf-8”比如:charset=”utf-8”:

  1. https://g.alicdn.com/de/prismplayer/2.8.0/aliplayer-min.js

这个文件同时包含了Flash和Html5跨终端自适应的逻辑。如果您只是想使用其中一种播放技术,也可以只引用对应技术的js文件,从而获得更小的文件体积:

Flash版本:

  1. https://g.alicdn.com/de/prismplayer/2.8.0/aliplayer-flash-min.js

Html5版本:

  1. https://g.alicdn.com/de/prismplayer/2.8.0/aliplayer-h5-min.js

如果您的使用场景需要用到html5播放器,请额外引用css文件:

  1. https://g.alicdn.com/de/prismplayer/2.8.0/skins/default/aliplayer-min.css

示例代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.0/skins/default/aliplayer-min.css" />
  5. <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.0/aliplayer-min.js"></script>
  6. </head>
  7. </html>

SDK使用

播放器简单使用说明

Aliplayer除了直接支持Source播放方式外,还支持通过阿里云视频云服务的video方式播放:点播服务:参考获取播放凭证媒体处理:参考MPS播放说明

示例代码如下,可视化的在线配置请参考:在线配置

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
  6. <title>用户测试用例</title>
  7. <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.0/skins/default/aliplayer-min.css" />
  8. <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.0/aliplayer-min.js"></script>
  9. </head>
  10. <body>
  11. <div class="prism-player" id="J_prismPlayer"></div>
  12. <script>
  13. var player = new Aliplayer({
  14. id: 'J_prismPlayer',
  15. width: '100%',
  16. autoplay: true,
  17. //支持播放地址播放,此播放优先级最高
  18. source : '播放url',
  19. //播放方式二:点播用户推荐
  20. vid : '1e067a2831b641db90d570b6480fbc40',
  21. playauth : 'ddd',
  22. cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
  23. //播放方式三:仅MPS用户使用
  24. vid : '1e067a2831b641db90d570b6480fbc40',
  25. accId: 'dd',
  26. accSecret: 'dd',
  27. stsToken: 'dd',
  28. domainRegion: 'dd',
  29. authInfo: 'dd',
  30. //播放方式四:使用STS方式播放
  31. vid : '1e067a2831b641db90d570b6480fbc40',
  32. accessKeyId: 'dd',
  33. securityToken: 'dd',
  34. accessKeySecret: 'dd'
  35. region:'cn-shanghai',//eu-central-1,ap-southeast-1
  36. },function(player){
  37. console.log('播放器创建好了。')
  38. });
  39. </script>
  40. </body>
  41. </html>

播放直播流时需要将isLive设置为true

MPS播放的参数说明参见 MPS播放说明

更多接口参见 属性和接口文档

扫描体验

扫描以下二维码体验阿里云播放器Demo。

image | left

>