集成文档 - 视频点播

支持格式

阿里云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.16/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 Edge Mac Chrome Safari FireFox Opera Edge 说明建议浏览器使用较新的版本。

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

加密播放：

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

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

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.16/aliplayer-min.js

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

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

Flash版本，示例如下：

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

H5版本，示例如下：

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

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

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

集成SDK

阿里云Web端播放器SDK除了直接支持Source播放方式外，还支持通过阿里云视频云服务的video方式播放：

视频点播请参见通过播放凭证播放。
媒体处理请参见视频播放。

集成前，请仔细阅读适配说明及H5适配说明内容，按相关要求配置，以避免集成失败或播放失败。

示例代码如下所示：

<!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.16/skins/default/aliplayer-min.css" />
     <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.16/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,
            cover: '<your cover URL>',//可选公共参数。视频封面图片地址。用户自定义的可以被访问到的网络图片。本参数传入的URL优先级最高，会覆盖通过获取视频播放凭证接口获取的CoverURL。
            // 播放方式一、播放地址播放。此方式播放优先级最高。
            source : '<your play URL>',//播放方式一必选参数。可以是第三方直播或点播地址、阿里云直播服务中的播放地址，或阿里云点播服务中的播放地址。
            // 播放方式二：推荐点播用户使用
            vid : '<your video ID>',//播放方式二必选参数。可以通过点播控制台（媒资库>音/视频路径）查询。示例：1e067a2831b641db90d570b6480f****。
            playauth : '<your PlayAuth>',//播放方式二必选参数。参数值可通过调用GetVideoPlayAuth接口获取。
            encryptType: 1, //使用播放方式二，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
            // 播放方式三：仅MPS用户使用
            vid : '<your media ID in MPS>',//播放方式三必选参数。可以通过媒体处理控制台（媒体管理>媒体列表路径）查询。示例：1e067a2831b641db90d570b6480f****。
            accId: '<your AccessKey ID>',//播放方式三必选参数。可通过RAM控制台（AccessKey管理页面）创建AccessKey，或者查看已有AccessKey Id的AccessKey Secret。
            accSecret: '<your AccessKey Secret>',//播放方式三必选参数。
            stsToken: '<your STS token>',//播放方式三必选参数。视频播放的临时凭证。凭证需要提前生成。生成方式请参考视频播放。
            domainRegion: '<your domain region>',//播放方式三必选参数。媒体资源所在的区域（cn-shanghai，cn-hangzhou等）。
            authInfo: '<your auth info>',//播放方式三必选参数。authInfo需要提前生成。生成方式请参考视频播放。
            // 播放方式四：使用STS方式播放。点播用户可在播放方式二或播放方式四中选择一个使用。
            vid : '<your video ID>',//播放方式四必选参数。可以通过点播控制台（媒资库>音/视频路径）查询。示例：1e067a2831b641db90d570b6480f****。
            accessKeyId: '<your AccessKey ID>',//播放方式四必选参数。可通过RAM访问控制控制台的AccessKey管理页面创建AccessKey，或者查看已有AccessKey Id的AccessKey Secret。
            securityToken: '<your STS token>',//播放方式四必选参数。视频播放的临时凭证。凭证需要提前生成。生成方式请参考创建角色并进行STS临时授权。
            accessKeySecret: '<your AccessKey Secret>',//播放方式四必选参数。可通过RAM访问控制控制台的AccessKey管理页面创建AccessKey，或者查看已有AccessKey Id的AccessKey Secret。
            region: '<region of your video>', // 播放方式四必选参数。媒体资源所在的区域。如cn-shanghai、eu-central-1, ap-southeast-1等。
            // 播放方式五：使用DRM方式播放。只有DRM加密视频能使用。
            isDrm: true,
            vid: '<your video ID>',//播放方式五必选参数。可以通过点播控制台（媒资库>音/视频路径）查询。示例：1e067a2831b641db90d570b6480f****。
            accessKeyId: '<your AccessKey ID>',//播放方式五必选参数。可通过RAM访问控制控制台的AccessKey管理页面创建AccessKey，或者查看已有AccessKey Id的AccessKey Secret。
            securityToken: '<your STS token>',//播放方式五必选参数。视频播放的临时凭证。凭证需要提前生成。生成方式请参考创建角色并进行STS临时授权。
            accessKeySecret: '<your AccessKey Secret>',//播放方式五必选参数。可通过RAM访问控制控制台的AccessKey管理页面创建AccessKey，或者查看已有AccessKey Id的AccessKey Secret。
            region: '<region of your video>', // 播放方式五必选参数。媒体资源所在的区域。如cn-shanghai、eu-central-1, ap-southeast-1等。
            certId: '<your certificate ID>', // 仅苹果设备播放需要。用于请求苹果证书，可根据DRM加密的实现到视频点播或视频直播控制台获取。
            },function(player){
              console.log('The player is created.')
           });
        </script>
    </body>
</html>

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

说明

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

扫描体验

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