集成阿里云视频播放器

1、视频播放器介绍

阿里云播放器SDK(ApsaraVideo Player SDK)是阿里视频服务的重要一环,除了支持点播和直播的基础播放功能外,深度融合视频云业务,如支持视频的加密播放、安全下载、清晰度切换、直播答题等业务场景,为用户提供简单、快速、安全、稳定的视频播放服务。

2、集成视频播放器

参考地址:https://help.aliyun.com/document_detail/125570.html

页面引入引入脚本文件和css文件

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

示例代码如下

<!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.17/skins/default/aliplayer-min.css" />
     <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.17/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>

1.播放地址播放

在Aliplayer的配置参数中添加如下属性
source : '你的视频播放地址',

2.播放凭证播放(推荐)
里云播放器支持通过播放凭证自动换取播放地址进行播放,接入方式更为简单,且安全性更高。播放凭证默认时效为100秒(最大为3000秒),只能用于获取指定视频的播放地址,不能混用或重复使用。如果凭证过期则无法获取播放地址,需要重新获取凭证。凭证有有效时间取值范围:100~3000。

在Aliplayer的配置参数中添加如下属性
encryptType:'1',//如果播放加密视频,则需设置encryptType=1,非加密视频无需设置此项
vid : '视频id',
playauth : '视频授权码',

其他在线配置参考:http://player.alicdn.com/aliplayer/setting/setting.html
播放器属性参考地址:https://help.aliyun.com/document_detail/125572.htm?spm=a2c4g.11186623.0.0.131d5a36PPChOz#task-1997027
功能展示(播放组件):https://player.alicdn.com/aliplayer/presentation/index.html