快速接入

更新时间: 2023-08-15 18:25:10

本文介绍如何快速接入Web播放器并完成基础的视频播放。

接入前须知

  • 阿里云Web播放器SDK支持HTML5和Flash两种播放模式,请您提前明确所需集成的播放器模式,并了解相关功能支持和浏览器适配情况。关于功能支持和浏览器的适配说明,详细内容请参见Web播放器简介

  • Web播放器SDK从2.14.0版本开始支持播放H.265编码协议的视频流,如需使用此功能,您需要先填写表单申请License授权。本文仅介绍播放H.264编码视频的相关配置,有关播放H.265编码视频的配置方法请参见播放H.265编码协议视频流

  • 本文以接入版本2.16.3的Web播放器SDK为例进行说明,如需接入其他版本,请参考Web播放器SDK获取对应版本号,并在下述示例代码中将2.16.3替换成目标版本号。Web播放器SDK在持续更新功能及优化性能,若无特殊情况,推荐您使用最新版本。

快速接入

  1. 引入Web播放器SDK。

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

    • 引入自适应模式的js文件

      该js文件同时包含了Flash和H5跨终端自适应的逻辑。引入该js文件后,播放器SDK会自行适配播放模式。在项目前端页面文件中的<head>标签处引入Web播放器SDK的JS文件和CSS文件,示例如下:

      <head>
        <link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/skins/default/aliplayer-min.css" />  //(可选)如果您的使用场景需要用到H5模式的播放器,则需引用此css文件。
        <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/aliplayer-min.js"></script>  //(必须)引入js文件。
      </head>
      说明

      引入自适应模式的js文件后,如需自定义播放模式,设置useFlashPrism=true表示Flash模式,设置useH5Prism=true表示H5模式。

    • 引入单模式的js文件

      如果您只是想使用其中一种播放技术,也可以只引用对应技术的js文件,从而获得更小的文件体积。

      • H5模式,在项目前端页面文件中的<head>标签处引入Web播放器SDK的JS文件和CSS文件,示例如下:

        <head>
          <link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/skins/default/aliplayer-min.css" />  //(必须)H5模式播放器,需引用此css文件。
          <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/aliplayer-h5-min.js"></script>  //(必须)引入H5模式的js文件。
        </head>
      • Flash模式,在项目前端页面文件中的<head>标签处引入Web播放器SDK的JS文件,示例如下:

        <head>
          <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/aliplayer-flash-min.js"></script>  //(必须)引入Flash模式的js文件。
        </head>

      在IE 8浏览器使用Flash模式的播放器时,需要在项目前端页面文件中的<head>标签处添加json.min.js的引用,示例如下:

      https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/json/json.min.js
      说明

      如需引入2.16.3及之后版本的Web播放器SDK,则引入路径可参见上述示例;如需引入2.16.3之前版本的Web播放器SDK,则需将上述路径中的/apsara-media-box/imp-web-player节点替换为/de/prismplayer,例如引入2.15.2版本自适应模式的js文件示例为:

      <head>
        <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/aliplayer-min.css" />  //(可选)如果您的使用场景需要用到H5模式的播放器,则需引用此css文件。
        <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-min.js"></script>  //(必须)引入js文件。
      </head>

  2. 提供挂载元素。

    在<body>标签处添加一个用以挂载播放界面的<div>节点,示例如下:

    <body>
      <div id="J_prismPlayer"></div>
    </body>
  3. 实例化播放器。

    在<script>标签中添加如下示例代码:

    点播视频播放

    点播URL播放

    使用URL播放方式播放点播视频,需要将播放器的source属性设置为播放地址。播放地址可以是第三方点播地址或阿里云点播服务中的播放地址。

    阿里云播放地址可以调用获取音视频播放地址接口获取。议您集成点播服务端SDK来获取音视频播放地址,免去自签名的麻烦。调用接口获取音视频播放地址的示例请参见开发者门户

    var player = new Aliplayer({
            id: 'J_prismPlayer',
            source: '<your play URL>',//播放地址,可以是第三方点播地址,或阿里云点播服务中的播放地址。
          },function(player){
            console.log('The player is created.')
         });

    VID+PlayAuth播放

    使用VID+PlayAuth播放方式播放点播视频,需要将播放器的vid属性设置为音视频ID,将playauth属性设置为音视频播放凭证。

    • 音视频ID可以在音视频上传完成后通过控制台(路径:媒资库>音/视频。)或服务端接口(SearchMedia)获取。

    • 音视频播放凭证可以调用获取音视频播放凭证接口获取。建议您集成点播服务端SDK来获取音视频播放凭证,免去自签名的麻烦。调用接口获取音视频播放凭证的示例请参见开发者门户

    推荐视频点播用户采用此播放方式。相比STS播放方式,PlayAuth播放方式在易用性和安全性上更有优势,对比详情请参见凭证方式与STS方式对比

    var player = new Aliplayer({
               id: 'J_prismPlayer',
               width: '100%',
               vid : '<your video ID>',//必选参数。音视频ID。示例:1e067a2831b641db90d570b6480f****。
               playauth : '<your PlayAuth>',//必选参数。音视频播放凭证。
             },function(player){
               console.log('The player is created.')
            });

    点播STS播放

    使用STS播放方式播放点播视频是指用STS临时凭证而非点播音视频播放凭证播放。STS临时凭证需要提前获取,需要调用STS服务的AssumeRole接口生成,生成方式请参见创建RAM角色并进行STS临时授权

    var player = new Aliplayer({
           id: 'J_prismPlayer',
           width: '100%',
           vid : '<your video ID>',//必选参数。音视频ID可以在音视频上传完成后通过控制台(路径:媒资库 > 音/视频。)或服务端接口(SearchMedia )获取。示例:1e067a2831b641db90d570b6480f****。
           accessKeyId: '<your AccessKey ID>',//必选参数。STS临时AK对的访问密钥ID,生成STS安全令牌时返回。
           securityToken: '<your STS token>',//必选参数。STS安全令牌,需要调用STS服务的AssumeRole接口生成。
           accessKeySecret: '<your AccessKey Secret>',//必选参数。STS临时AK对的访问密钥,生成STS安全令牌时返回。
           region: '<region of your video>', // 必选参数。媒体资源所在的地域标识。如cn-shanghai、eu-central-1, ap-southeast-1等。
         },function(player){
           console.log('The player is created.')
           });

    MPS播放

    MPS播放方式是播放器为媒体处理用户(MPS用户)提供的播放方式。MPS播放既需要提前获取以下信息:

    • vid:媒体处理系统中的媒资ID。

    • AccessKeyId和AccessKeySecret:随STS安全令牌下发的临时AK对。

    • SecurityToken:STS安全令牌,需要调用STS服务的AssumeRole接口生成,生成方式请参见创建RAM角色并进行STS临时授权

    • domainRegion:媒体资源所在的地域。

    • authInfo:授权信息。

    获取MPS媒体相关信息请参见视频播放

    var player = new Aliplayer({
           id: 'J_prismPlayer',
           width: '100%',
           vid : '<your media ID in MPS>',//必选参数。可以通过媒体处理控制台(媒体管理>媒体列表路径)查询。示例:1e067a2831b641db90d570b6480f****。
           accId: '<your AccessKey ID>',//必选参数。STS临时AK对的访问密钥ID,生成STS安全令牌时返回。
           accSecret: '<your AccessKey Secret>',//必选参数。STS临时AK对的访问密钥,生成STS安全令牌时返回。
           stsToken: '<your STS token>',//必选参数。STS安全令牌,需要调用STS服务的AssumeRole接口生成。
           domainRegion: '<your domain region>',//必选参数。媒体资源所在的区域(cn-shanghai,cn-hangzhou等)。
           authInfo: '<your auth info>',//必选参数。authInfo需要提前生成。
         },function(player){
           console.log('The player is created.')
        });

    点播加密播放

    点播视频支持阿里云私有加密和DRM加密。加密播放请参见播放加密视频

    直播视频播放

    直播URL播放

    使用URL播放方式播放直播视频,需要将播放器的source属性设置为直播拉流地址,同时将isLive属性设置为true。

    播放地址可以是第三方直播地址或阿里云直播服务中的拉流地址。阿里云直播拉流地址可以通过直播控制台的地址生成器生成。详情请参见直播地址生成器

    <script>
      var player = new Aliplayer({
        id: 'J_prismPlayer',
        source: '<your play URL>',//播放地址,可以是第三方直播地址,或阿里云直播服务中的拉流地址。
        isLive: true,//是否为直播播放。
        },function(player){
          console.log('The player is created.')
        });
    </script>

    直播DRM加密播放

    直播DRM加密播放请参见播放DRM加密视频

    超低延时直播(RTS)视频播放

    超低延时直播(RTS)使用URL方式播放,无需额外设置参数。

    • RTS拉流地址可以通过直播控制台的地址生成器生成,详情请参见直播地址生成器

    • 阿里云播放器通过集成RTS SDK实现RTS播放,默认集成最新版本的RTS SDK,您也可以通过参数指定RTS SDK版本,如:rtsVersion: '2.2.1'。

    • 支持RTS降级播放功能,通过设置RTS的降级地址(如HLS地址或FLV地址),当浏览器不兼容RTS或RTS拉流失败时,会自动降级到该地址播放,更多内容请参见使用阿里云播放器Aliplayer集成RTS

    <script>
    var player = new Aliplayer({
        id: 'J_prismPlayer',
        source: '<your play URL>',//播放地址,使用超低延时直播(RTS)地址,协议是artc://。
        rtsFallbackSource: '<your play URL>',//(可选)RTS的降级地址(如HLS地址或FLV地址)。
        isLive: true,//是否为直播播放。
        // rtsVersion: 'x.x.x', //可以手动指定RTS SDK的版本。
    },function(player){
        console.log('The player is created.')
    });
    //当RTS拉流成功时触发,通过订阅该事件,可以获取到RTS TraceId。 回调函数的参数中traceId为拉流的TraceId,source为当前RTS流的播放地址。
    player.on('rtsTraceId', function(event) {
        console.log('EVENT rtsTraceId', event.paramData);
    })
    //当RTS降级时触发,参数reason为降级的原因,fallbackUrl为降级到的地址。
    player.on('rtsFallback', function(event) {
        console.log(' EVENT rtsFallback', event.paramData);
    })
    </script>

    通用媒体管理服务视频播放

    说明

    Web播放器SDK需使用2.10.0及以上版本。

    基于通用媒体管理服务视频的mediaAuth方式的简单播放方案。

    mediaAuth可以登录通用媒体管理服务控制台获取(路径:媒资管理 > 视频管理 > 管理 > 基础配置)。

    <script>
      var player = new Aliplayer({
        id: 'J_prismPlayer',
        mediaAuth: '<your mediaAuth>',//视频的播放凭证,可以在通用媒体管理服务控制台获取。
        },function(player){
          console.log('The player is created.')
        });
    
      // 也可以使用replayByMediaAuth函数切换不同的mediaAuth播放(前提是已经使用mediaAuth初始化播放器)。
      // player.replayByMediaAuth('another mediaAuth');
    </script>

接入常见问题

如何在Vue项目中接入阿里云Web播放器SDK?

阿里云Web播放器SDK提供基于Vue的播放器Demo源码,您可以参考使用。Demo获取地址,请参见Vue Demo源码

相关文档

阿里云首页 视频点播 相关技术圈