AliPlayer

阿里云播放器（AliPlayer）全攻略：从基础接入到高级定制

阿里云播放器（AliPlayer）的完整使用方法——它是阿里云推出的跨端视频播放组件，支持点播/直播、兼容PC/移动端、适配多种视频格式（MP4/FLV/M3U8等），还内置防盗链、倍速、清晰度切换等核心功能。下面我会从快速上手、核心配置、常用功能、高级场景、避坑指南全维度讲解，代码可直接复制使用。

一、AliPlayer 核心优势与适用场景

核心优势

  • 跨端兼容：PC（Chrome/Firefox/IE11+）、移动端（iOS/Android）、小程序/快应用；
  • 格式全覆盖：支持点播（MP4/FLV/M3U8）、直播（RTMP/FLV/HLS）、短视频；
  • 功能丰富：内置倍速、清晰度切换、画中画、防盗链、字幕、截图等；
  • 阿里云生态适配：无缝对接阿里云视频点播（VOD）、直播服务，支持播放鉴权。

适用场景

  • 视频点播：网站/APP内的课程、影视、短视频播放；
  • 视频直播：电商直播、赛事直播、企业直播；
  • 定制化播放：需要自定义控制栏、播放逻辑的场景。

二、快速上手：5分钟接入AliPlayer

1. 引入方式（两种可选）

方式1：CDN引入（推荐，无需打包）

在HTML页面<head>中引入CSS和JS：

1
2
3
4
5
6
<!-- 播放器样式 -->
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.2/skins/default/aliplayer-min.css" />
<!-- 播放器核心JS（需先引入jQuery） -->
<script src="https://g.alicdn.com/de/prismplayer/2.9.2/aliplayer-min.js"></script>
<!-- 可选：如果需要播放FLV/M3U8，引入额外依赖 -->
<script src="https://g.alicdn.com/de/prismplayer/2.9.2/aliplayer-h5-min.js"></script>

方式2：NPM安装（模块化开发）

1
2
# 安装依赖
npm install aliplayer --save

在Vue/React中引入：

1
2
import 'aliplayer/dist/skins/default/aliplayer-min.css';
import AliPlayer from 'aliplayer';

2. 基础播放示例（点播MP4）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!-- 1. 播放器容器（必须指定宽高） -->
<div id="J_prismPlayer" style="width: 800px; height: 450px;"></div>

<!-- 2. 初始化播放器 -->
<script>
// 初始化配置
const player = new Aliplayer({
  id: 'J_prismPlayer', // 容器ID
  source: 'https://example.com/your-video.mp4', // 视频地址（支持MP4/FLV/M3U8）
  width: '100%', // 宽度（容器宽/100%）
  height: '100%', // 高度
  autoplay: false, // 是否自动播放（移动端默认禁止）
  isLive: false, // 是否直播（点播设为false）
  rePlay: false, // 播放结束后是否重播
  controls: true, // 是否显示控制栏
  preload: 'auto', // 预加载（auto/none/metadata）
  poster: 'https://example.com/poster.jpg', // 封面图
  skinLayout: [ // 控制栏布局（默认全显示，可自定义）
    { name: 'bigPlayButton', align: 'blabs', x: 0, y: 0 },
    { name: 'progress', align: 'blabs', x: 0, y: 0 },
    { name: 'playButton', align: 'tr', x: 10, y: 10 },
    { name: 'timeDisplay', align: 'tr', x: 10, y: 30 },
    { name: 'volume', align: 'tr', x: 5, y: 50 },
    { name: 'fullscreenButton', align: 'tr', x: 5, y: 90 }
  ]
}, function(player) {
  console.log('播放器初始化完成');
});
</script>

三、核心配置详解（关键参数）

参数 类型 默认值 说明
id String - 播放器容器ID（必填）
source String - 视频地址（支持HTTP/HTTPS，阿里云VOD需传播放凭证）
width/height String/Number 640/360 播放器宽高（推荐用100%适配容器）
autoplay Boolean false 自动播放（移动端受浏览器限制，需用户交互触发）
isLive Boolean false 是否直播（直播需设为true，支持FLV/HLS/RTMP）
controls Boolean true 是否显示控制栏
poster String - 封面图地址（点播场景必设，提升体验）
playsinline Boolean true 移动端是否内联播放（避免自动全屏）
preload String ‘auto’ 预加载策略：
- auto：自动预加载
- none：不预加载
- metadata：仅预加载元信息
rePlay Boolean false 播放结束后是否自动重播
volume Number 0.7 初始音量（0-1）
playbackSpeed Number/Array 1 倍速：单值（如1.5）或数组（如[0.5,1,1.5,2]）
encryptType Number - 加密播放：1=HLS加密，2=私有加密（需配合阿里云VOD）
useH5Prism Boolean false 强制使用H5播放器（默认自动选择Flash/H5）

关键配置：阿里云VOD播放凭证（推荐）

如果视频存储在阿里云视频点播（VOD），需用播放凭证而非直接传视频地址（更安全）：

1
2
3
4
5
6
7
8
const player = new Aliplayer({
  id: 'J_prismPlayer',
  vid: 'your-video-vid', // 阿里云VOD的视频ID
  playauth: 'your-play-auth', // 播放凭证（服务端生成）
  width: '100%',
  height: '100%',
  isLive: false
});

四、常用功能实现（实战代码）

1. 播放控制（播放/暂停/进度/音量）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 播放
player.play();

// 暂停
player.pause();

// 跳转进度（单位：秒）
player.seek(60); // 跳转到第60秒

// 设置音量（0-1）
player.setVolume(0.5); // 音量50%

// 静音
player.mute(true);
// 取消静音
player.mute(false);

// 获取播放状态
const isPlaying = player.getStatus() === 'playing';
console.log('是否正在播放：', isPlaying);

// 获取当前播放时间（秒）
const currentTime = player.getCurrentTime();
// 获取视频总时长（秒）
const totalTime = player.getDuration();

2. 倍速切换

1
2
3
4
5
6
7
8
9
10
11
12
13
// 1. 初始化时配置可选倍速
const player = new Aliplayer({
  id: 'J_prismPlayer',
  source: 'xxx.mp4',
  playbackSpeed: [0.5, 1, 1.5, 2], // 可选倍速
  // 其他配置...
});

// 2. 动态切换倍速
player.setPlaybackSpeed(1.5); // 切换为1.5倍速

// 3. 获取当前倍速
const currentSpeed = player.getPlaybackSpeed();

3. 清晰度切换（适配多码率视频）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 初始化时配置多清晰度
const player = new Aliplayer({
  id: 'J_prismPlayer',
  source: 'https://example.com/1080p.m3u8', // 默认清晰度
  width: '100%',
  height: '100%',
  // 多清晰度配置
  qualitySort: 'desc', // 排序（desc=从高到低）
  quality: [
    { name: '1080p', url: 'https://example.com/1080p.m3u8' },
    { name: '720p', url: 'https://example.com/720p.m3u8' },
    { name: '480p', url: 'https://example.com/480p.m3u8' }
  ],
  defaultQuality: '720p' // 默认选中720p
});

// 动态切换清晰度
player.changeQuality('1080p');

4. 事件监听（捕获播放状态）

AliPlayer提供丰富的事件，可监听播放生命周期：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 播放开始
player.on('play', () => {
  console.log('视频开始播放');
});

// 播放暂停
player.on('pause', () => {
  console.log('视频暂停');
});

// 播放结束
player.on('ended', () => {
  console.log('视频播放结束');
});

// 进度变化（每秒触发）
player.on('timeupdate', (e) => {
  console.log('当前进度：', e.currentTime, '/', e.duration);
});

// 加载失败
player.on('error', (err) => {
  console.error('播放失败：', err);
});

// 全屏/退出全屏
player.on('fullscreenchange', (isFull) => {
  console.log('是否全屏：', isFull);
});

5. 直播播放（FLV/HLS）

1
2
3
4
5
6
7
8
9
10
const livePlayer = new Aliplayer({
  id: 'J_prismPlayer',
  source: 'https://example.com/live.flv', // 直播FLV地址
  isLive: true, // 关键：设为true
  width: '100%',
  height: '100%',
  autoplay: true, // 直播建议自动播放（需用户交互）
  controls: true,
  useH5Prism: true // 强制H5播放FLV
});

五、高级定制与避坑指南

1. 自定义控制栏（隐藏/修改默认控件）

通过skinLayout自定义控制栏显示的组件：

1
2
3
4
5
6
7
8
9
10
// 仅显示播放按钮+进度条+全屏按钮
const player = new Aliplayer({
  id: 'J_prismPlayer',
  source: 'xxx.mp4',
  skinLayout: [
    { name: 'bigPlayButton', align: 'blabs', x: 0, y: 0 }, // 大播放按钮
    { name: 'progress', align: 'blabs', x: 0, y: 0 }, // 进度条
    { name: 'fullscreenButton', align: 'tr', x: 5, y: 5 } // 全屏按钮
  ]
});

2. 移动端适配关键

  • 禁止自动全屏：设置playsinline: true；
  • 自动播放：移动端需用户点击后触发（如绑定按钮点击事件调用player.play()）；
  • 适配屏幕：宽度设为100%，高度设为auto或按比例计算（如aspect-ratio: 16/9）。

3. 常见问题与解决方案

问题 原因 解决方案
移动端无法自动播放 浏览器策略限制（需用户交互） 增加“播放按钮”，点击后调用player.play()
FLV/M3U8播放失败 未引入H5依赖/浏览器不支持 1. 引入aliplayer-h5-min.js；2. 设置useH5Prism: true
视频黑屏但有声音 封面图/视频编码问题 1. 检查poster地址是否有效；2. 确保视频编码为H.264
播放凭证失效 播放凭证有有效期（默认1小时） 服务端重新生成playauth，调用player.reloadByVidAndPlayAuth(vid, newPlayauth)
跨域播放失败 视频服务器未配置CORS 配置视频域名的CORS，允许播放器域名访问

4. 销毁播放器（避免内存泄漏）

1
2
// 页面卸载/组件销毁时执行
player.dispose();

总结

关键点回顾

  1. 基础接入：CDN/NPM引入 → 配置容器 → 初始化播放器（核心参数：id/source/isLive）；
  2. 核心功能：播放控制、倍速/清晰度切换、事件监听是高频用法；
  3. 阿里云VOD适配：优先用vid+playauth播放，而非直接传视频地址（更安全）；
  4. 避坑重点：移动端自动播放限制、FLV/M3U8需引入H5依赖、跨域配置CORS；
  5. 性能优化：不用时调用dispose()销毁播放器，避免内存泄漏。

AliPlayer的核心价值是“开箱即用+阿里云生态适配”，如果是简单的播放场景，直接用基础配置即可；如果需要定制化（如自定义皮肤、防盗链），可结合阿里云VOD的服务端能力扩展。

学无止境
AliPlayer
https://cszy.top/2018-07-17 aliplayer/
作者
csorz
发布于
2018年7月17日
许可协议