集成文档 - 视频点播

支持格式

阿里云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播放器。

当使用flash播放器要支持IE8浏览器时，需要在页面添加json.min.js的引用。示例如下：

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及以上版本

加密播放：

视频点播请参见VOD视频加密。
媒体处理请参见MPS视频加密。

说明阿里云私有加密推荐使用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浏览器是无法禁止视频自动全屏播放的。
设置autolay属性为true是无效的，不会触发自动播放：
- 移动端浏览器：H5Video自动播放视频只有两个办法，通过设置autoplay属性或者调用play()方法，但是现实是在移动端中视频自动播放一直是被禁止的，目前通用的办法是通过用户手动触发播放（例如：监听用户的点击事件并调用play()方法。
  
  说明不排出一些特性的浏览器和webview允许自动播放器，特别是在Android系统上。
- Safari浏览器：MacOS High Sierra Safari 11以上的浏览器限制自动播放。
- Chrome浏览器：Chrome 55浏览器以上版本也限制自动播放。
音量调节功能（getVolume和setVolume）在iOS系统和部分Android系统会失效。
倍速播放功能，部分移动端浏览器不支持设置倍速，功能会失效，比如Android系统的微信。
截图功能在移动端部分机型由于安全问题，会截图失败。比如Android4.4.1系统或者浏览器本身问题，截的图片是全黑的，可以通过截图检测工具验证浏览器的支持情况。

导入引用文件

不依赖于任何的前端js库，只需要在页面中引用如下js文件，就可以进行播放器的初始化。示例如下：

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

说明如果出现文本乱码，可以在<script></script>标签中添加charset="utf-8"属性。

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

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

如果您的使用场景需要用到H5播放器，请额外引用css文件。示例如下：

<!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>

您可以对播放器进行可视化的在线配置，请参见在线配置。

说明

播放直播流时需要将isLive设置为true。
媒体处理播放的参数说明请参见视频播放。
视频点播更多接口请参见属性和接口说明。

扫描体验

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