快速接入Web播放器

本文介绍如何在Web应用中接入播放器SDK并完成基础的视频播放配置。

接入前须知

  • 本文以接入版本2.25.1Web播放器SDK为例进行说明,推荐您使用最新版本,最新版本Web播放器SDK请参见播放器SDK下载

  • Web播放器SDK2.14.0版本开始支持播放H.265编码协议的视频流,从2.20.2版本开始支持播放H.266编码协议的视频流。本文仅介绍播放H.264编码视频的相关配置,有关播放H.265/H.266编码视频的配置方法请参见播放H.265/H.266编码协议视频流

准备工作

  • 已获取Web网站绑定的域名及License Key,详情参考管理License

快速接入Web播放器

以下步骤演示如何在一个简单的Web项目中接入和配置Web播放器SDK,若您使用了React、Vue等前端框架,请获取源码Demo后,参考示例代码进行集成,详情参见在线体验及Demo源码

1、引入Web播放器SDK

NPM包方式引入

  1. 在项目中添加aliyun-aliplayer依赖。

    npm install aliyun-aliplayer --save
  2. 代码中引入代码包及样式文件。

    import Aliplayer from 'aliyun-aliplayer';
    import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css';

script 标签引入

说明

2.16.3版本开始,Web播放器SDKJS/CSS资源引入启用新路径。

由原来的:

CSS:https://g.alicdn.com/de/prismplayer/版本号/skins/default/aliplayer-min.css

JS:https://g.alicdn.com/de/prismplayer/版本号/aliplayer-min.js

变更为:

CSS:https://g.alicdn.com/apsara-media-box/imp-web-player/版本号/skins/default/aliplayer-min.css

JS:https://g.alicdn.com/apsara-media-box/imp-web-player/版本号/aliplayer-min.js

<!--本文以接入版本2.25.1的Web播放器SDK为例进行说明,如需接入其他版本,请参考Web播放器SDK获取对应版本号,并在下述示例代码中将2.25.1替换成目标版本号-->
<head>
  <link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/skins/default/aliplayer-min.css" />  //(必须)引用此css文件。
  <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/aliplayer-min.js"></script>  //(必须)引入js文件。
</head>

2、提供挂载元素

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

<body>
  <div id="J_prismPlayer"></div>
</body>

3、初始化

Web播放器SDK找到id="J_prismPlayer"DOM节点,把播放器的UI界面渲染到节点上。

var player = new Aliplayer({
  id: 'J_prismPlayer',
  license: {
    // 使用在准备工作中获取到的网站域名domain和License Key
    domain: "example.com", // 申请 License 时填写的域名
    key: "example-key" // 申请成功后,在控制台可以看到 License Key
  }
});

播放配置

下面展示播放器在不同场景下的参数配置。

点播视频播放

点播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属性设置为音视频播放凭证。

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

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

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

var player = new Aliplayer(
  {
    id: "J_prismPlayer",
    width: "100%",
    vid: "<your video ID>", // 必选参数。音视频ID。示例:1e067a2831b641db90d570b6480f****。
    playauth: "<your PlayAuth>", // 必选参数。音视频播放凭证。
    // authTimeout: 7200, // 播放地址的有效时长,单位:秒。该时长会覆盖在视频点播控制台设置的URL鉴权的有效时长。如果不传,则取默认值7200。如需设置此参数,请确保该时间大于视频的实际时长,防止播放地址在播放完成前过期。
  },
  function (player) {
    console.log("The player is created.");
  }
);

点播STS播放

使用STS播放方式播放点播视频是指用STS临时凭证而非点播音视频播放凭证播放。STS临时凭证需要提前获取,需要调用STS服务的AssumeRole接口生成,生成方式请参见获取STS Token

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等。
    // authTimeout: 7200, // 播放地址的有效时长,单位:秒。该时长会覆盖在视频点播控制台设置的URL鉴权的有效时长。如果不传,则取默认值7200。如需设置此参数,请确保该时间大于视频的实际时长,防止播放地址在播放完成前过期。
  },
  function (player) {
    console.log("The player is created.");
  }
);

点播加密播放

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

说明

如需了解有关Web播放器初始化设置的更多详细信息,请参阅播放器属性

直播视频播放

直播URL播放

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

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

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

直播DRM加密播放

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

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

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

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

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

  3. 当浏览器不兼容RTS或者RTS拉流失败时,播放器会自动尝试使用FLV或者HLS协议进行播放(如果浏览器支持,会优先选择延迟更低的FLV协议作为降级)。

var player = new Aliplayer(
  {
    id: "J_prismPlayer",
    source: "<your play URL>", // 播放地址,使用超低延时直播(RTS)地址,协议是artc://。
    isLive: true, // 是否为直播播放。
    // rtsFallback: false, //(可选)是否开启RTS自动降级,默认为 true
    // rtsFallbackType: 'HLS', //(可选)指定降级到的协议,可选 HLS/FLV,默认是自动选择,优先选择延迟更低的FLV,如果浏览器不支持则降级到 HLS
    // rtsFallbackSource: '<your play URL>', // (可选)指定降级地址,而不是让播放器自动选择
    // 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);
});

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

说明

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

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

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

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');

相关阅读

  • 如果您想进一步了解更多播放器对象的属性、方法、事件配置,请参见接口说明