本文介绍如何快速接入Web播放器并完成基础的视频播放。
接入前须知
本文以接入版本2.25.1的Web播放器SDK为例进行说明，推荐您使用最新版本，最新版本Web播放器SDK请参见播放器SDK。
阿里云Web播放器SDK支持HTML5和Flash两种播放模式，请您在集成前明确所需的播放器模式，并了解相关功能支持和浏览器适配情况，详细内容请参见Web播放器SDK简介。
Web播放器SDK从2.14.0版本开始支持播放H.265编码协议的视频流，从2.20.2版本开始支持播放H.266编码协议的视频流。本文仅介绍播放H.264编码视频的相关配置，有关播放H.265/H.266编码视频的配置方法请参见播放H.265/H.266编码协议视频流。
快速接入
引入Web播放器SDK。
通过 npm 方式引入。
//先通过 npm install aliyun-aliplayer --save 安装 import Aliplayer from 'aliyun-aliplayer'; import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css';或者通过JS方式进行引入。
引入自适应模式的js文件
该js文件同时包含了Flash和H5跨终端自适应的逻辑。引入该js文件后，播放器SDK会自行适配播放模式。在项目前端页面文件中的<head>标签处引入Web播放器SDK的JS文件和CSS文件，示例如下：
<!--本文以接入版本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" /> //（可选）如果您的使用场景需要用到H5模式的播放器，则需引用此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>说明引入自适应模式的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.25.1/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.25.1/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.25.1/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.25.1/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>
提供挂载元素。
在
<body>标签处添加一个用以挂载播放界面的<div>节点，示例如下：<body> <div id="J_prismPlayer"></div> </body>
配置License。
说明2024年12月1日起，新版Web播放器SDK必须按以下操作配置License后，方可使用。
播放器SDK现免费提供，License有效期为1年，详情请参见管理License。
License配置完成后，播放器界面若无相关错误提示，则表示 License 配置成功。
请确保播放器所在页面的域名和申请License时填写的域名保持一致，或者是填写域名的子域名，否则License校验将会不通过（localhost 不会校验）。
在初始化播放器时传入license字段，包含注册的域名和License Key：
var player = new Aliplayer({ license: { domain: "example.com", // 申请 License 时填写的域名 key: "example-key" // 申请成功后，在控制台可以看到 License Key } });实例化播放器。
在
<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>', // 必选参数。音视频播放凭证。 // authTimeout: 7200, // 播放地址的有效时长，单位：秒。该时长会覆盖在视频点播控制台设置的URL鉴权的有效时长。如果不传，则取默认值7200。如需设置此参数，请确保该时间大于视频的实际时长，防止播放地址在播放完成前过期。 },function(player){ console.log('The player is created.') });点播STS播放
使用STS播放方式播放点播视频是指用STS临时凭证而非点播音视频播放凭证播放。STS临时凭证需要提前获取，需要调用STS服务的AssumeRole接口生成，生成方式请参见使用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等。 // authTimeout: 7200, // 播放地址的有效时长，单位：秒。该时长会覆盖在视频点播控制台设置的URL鉴权的有效时长。如果不传，则取默认值7200。如需设置此参数，请确保该时间大于视频的实际时长，防止播放地址在播放完成前过期。 },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加密视频-Web端。
超低延时直播（RTS）视频播放
超低延时直播（RTS）使用URL方式播放，无需额外设置参数。
RTS拉流地址可以通过直播控制台的地址生成器生成，详情请参见直播地址生成器。
阿里云播放器通过集成RTS SDK实现RTS播放，默认集成最新版本的RTS SDK，您也可以通过参数指定RTS SDK版本，如：rtsVersion: '2.2.1'。
当浏览器不兼容RTS或者RTS拉流失败时，播放器会自动尝试使用FLV或者HLS协议进行播放（如果浏览器支持，会优先选择延迟更低的FLV协议作为降级）。
<script> 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); }) </script>
接入常见问题
如何在Vue项目中接入阿里云Web播放器SDK？
阿里云Web播放器SDK提供基于Vue的播放器Demo源码，您可以参考使用。Demo获取地址Vue Demo源码。
更多接入常见问题，请参见Web播放器常见问题。