集成文档 - 视频点播

支持格式

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

在IE 8浏览器使用Flash播放器时，需要在页面添加json.min.js的引用。示例如下：

https://g.alicdn.com/de/prismplayer/2.9.7/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及以上版本	×	IE 9及以上版本
Edge	√	√	√	×	√
Opera	√	√	√	×	√
Safari	√	8及以上版本	8及以上版本	×	√

说明

播放FLV、M3U8视频，需要使用PC端支持的浏览器，并且启用跨域访问。
PC端Chrome浏览器在移动模拟器下，播放M3U8需要安装Native HLS Playback Chrome插件。
由于flv.js在IE 11浏览器下的mseLiveFlvPlayback属性为false，FLV的直播流在Windows 8及以上系统的IE 11浏览器下无法播放。


移动端	MP4	FLV	M3U8	RTMP	MP3
iOS	√	×	√	×	√
Android	√	×	4.0及以上版本	×	√

说明 H5播放器在移动端不支持FLV和RTMP的播放。

H5阿里云HLS加密播放，适配情况如下：


加密	iOS	Android	PC
标准加密	√	√	Chrome FireFox Safari iEdge IE 11及以上版本、Windows 8.1及以上版本
私有加密	×	Chrome for Android	Chrome FireFox Safari iEdge IE 11及以上版本、Windows 8.1及以上版本
DRM加密说明如果使用FairPlay，需要配置certId证书。	Safari Chrome	Android 10及以上的Chrome Edge 说明部分Android手机不支持。	Windows Chrome Opera FireFox IE 11及以上版本、Windows 10及以上版本 Mac Chrome Safari FireFox Opera 说明建议浏览器使用较新的版本。

注意 Android和iOS的微信浏览器不支持直播DRM加密。

加密播放：

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

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

启用私有加密的防调试
通过引入aliiplayer-vod-anti-min.js文件开启防调试模式，考虑到在开发过程中的调试，您可以在发布的产品中引入，JavaScript文件的地址示例如下：
```
<script src="https://g.alicdn.com/de/prismplayer/2.9.7/hls/aliplayer-vod-anti-min.js"></script>
```
注意如果关闭开发者工具页面还是无法刷新出来，需要在新的标签页里重新打开页面。

H5适配说明

全屏播放说明

移动端浏览器：视频默认全屏播放，针对不同的情况需要不同的设置。
- iOS App：如需实现内联播放，将Web播放器提供的playsinline属性设置为true，WebView设置为allowsInlineMediaPlayback即可。设置成功后在App里打开页面时视频就能以非全屏模式（即内联的方式）播放。
- Android：Android系统会有不同的定制版本，每个版本对H5 video标签的实现都有差别，所以在Android系统上播放视频所展现的一致性，相比iOS系统要差很多，也可以设置playsinline属性为true，只需要终端浏览器支持内联播放，对于X5内核浏览器（微信，QQ浏览器）可以启用同层播放，达到类内联播放的目的。
Safari浏览器：iOS 10以下版本的Safari浏览器是无法禁止视频自动全屏播放。

自动播放说明

自动播放的限制来自于浏览器，并非是播放器的限制，所以在Web播放器中设置autolay属性为true是无效的，不会触发自动播放。

移动端浏览器：由于移动端浏览器一直都是禁止自动播放，所以无法通过设置autoplay属性或者调用play()方法实现自动播放。如果想在移动端实现自动播放，可以通过用户手动触发播放（例如：监听用户的点击事件并调用play()方法）。

说明不排除部分浏览器和WebView允许自动播放，Android系统中较为常见。
Safari浏览器：macOS High Sierra Safari 11及以上版本限制自动播放。
Chrome浏览器：Chrome 55及以上版本限制自动播放。

部分功能说明

注意如果播放器被劫持，播放器内的方法、功能等都会失效。

音量调节功能：getVolume和setVolume方法在iOS系统和部分Android系统会失效。
倍速播放功能：部分移动端浏览器不支持设置倍速，比如Android系统的微信。
截图功能：由于安全问题或浏览器本身问题，部分移动端设备无法正常使用截图功能，截图为全黑，例如使用Android 4.4.1系统的设备。可以通过截图检测工具验证浏览器的支持情况。

导入引用文件

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

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

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

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

Flash版本，示例如下：

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

H5版本，示例如下：

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

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

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

集成SDK

阿里云Web端播放器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.7/skins/default/aliplayer-min.css" />
     <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.7/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,
            //播放方式五：使用DRM方式播放
            isDrm:true,
            vid:'34ecdedd081c426383cd66782de6656d',
            accessKeyId:'dd',
            securityToken:'dd',
            accessKeySecret:'dd'
            region:'cn-shanghai',//eu-central-1,ap-southeast-1,
            certId:'dd',//用于请求苹果证书
            },function(player){
                console.log('播放器创建好了。')
           });
        </script>
    </body>
</html>

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

说明

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

扫描体验

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