草莓播放器 · 阿里云播放器（Aliplayer）

本篇介绍草莓播放器中的 阿里云播放器（Aliplayer）方案，属于企业级 H5 播放器，针对阿里云视频服务深度优化。

原出处

Aliplayer 是阿里云推出的 web 播放器 prism-player 的正式产品形态，广泛用于点播与直播。本项目在其官方 web 播放器资源（aliplayer-min.js、aliplayercomponents.min.js、aliplayer-min.css 及配套图片）基础上，整体本地化到 ali/ 目录，使用 v2.9.3 版本。

项目：Aliplayer（阿里云 Web 播放器）https://help.aliyun.com/zh/media-processing/player/developer-reference/overview-of-web-players
资源版本：v2.9.3（按阿里云文档引用，需注意其 License 与阿里云服务绑定关系）

修改说明

参数入口：读取 ?url=，缺失时提示并中断初始化。
点播模式：useH5Prism: true（H5 内核）、isLive: false（点播）、rePlay: false。
记忆播放：通过 components 引入 MemoryPlayComponent，args:[true] 开启断点续播记忆。
自适应布局：width/height 100%，playsinline 内联播放，preload 预加载。
错误处理：on('error') 显示失败遮罩；on('ready') 预留钩子。

实现效果

企业级 H.264/H.265 编解码（依播放器支持）
点播 + 直播双模式
记忆播放（断点续播）
经典阿里皮肤、全屏、倍速

演示说明

🎬 在线演示（下方为该播放器内嵌实时播放，可点击右下角全屏）：

https://play.123366.xyz/ali/?url=视频地址

Aliplayer 更适用于阿里云视频点播/直播的 CDN 与鉴权体系；对普通站外 m3u8/mp4 也可播放，但商业化功能往往依赖阿里云服务。

部署教程

Aliplayer（阿里云播放器）是阿里云官方推出的 web 播放器（prism-player 正式产品形态），支持点播与直播场景。下面按阿里云官方文档给出标准的接入方式。

建议先阅读阿里云官方文档与本项目 GitHub Demo，获取最新能力与最佳实践：
阿里云帮助文档（Web 播放器）：https://help.aliyun.com/zh/media-processing/vod/player-usage
官方 Demo 仓库：https://github.com/aliyunvideo/AliyunPlayer_Web

一、引入官方资源

推荐直接从阿里云官方 CDN（g.alicdn.com 的 prismplayer）引入播放器样式与脚本：

1
2
3
4
5
<!-- CSS -->
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css" />

<!-- JS -->
<script type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js"></script>

阿里云官方 web 播放器以 prism-player 命名，文件名即 aliplayer-min.js（核心播放器）、aliplayercomponents.min.js（可选组件库）等。

二、添加播放器容器

阿里云官方初始化以 <div class="prism-player"> 作为容器，并为其指定唯一 id：

1
<div class="prism-player" id="player-con"></div>

三、初始化 Aliplayer

通过 new Aliplayer({ ... }) 创建播放器实例。其中 source 字段即播放地址，支持 mp4 / m3u8 / flv 及直播地址：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
var player = new Aliplayer({
    id: "player-con",
    source: "https://demo.aliyundoc.com/xxx.mp4",   // 播放地址，支持 mp4/m3u8/flv/直播地址
    width: "100%",
    height: "100%",
    autoplay: true,
    useH5Prism: true,
    isLive: false,     // true 为直播，false 为点播
}, function (player) {
    // 播放器初始化完成回调
});

四、最小示例：用 `?url=` 传参播放

在纯静态场景，可直接把地址栏 ?url= 参数赋给 source，一个页面即可完成播放：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<div class="prism-player" id="player-con"></div>
<script type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js"></script>
<script>
  // 读取 URL 中的 url 参数作为播放地址
  var url = new URLSearchParams(location.search).get("url")
      || "https://demo.aliyundoc.com/xxx.mp4";
  var player = new Aliplayer({
      id: "player-con",
      source: url,
      width: "100%",
      height: "100%",
      autoplay: true,
      useH5Prism: true,
      isLive: false,   // 点播模式
  }, function (player) {
  });
</script>

访问形如 https://你的域名/ali/?url=视频地址 即可播放。

五、点播 / 直播说明

isLive: false 为点播模式（默认）：播放 mp4 / m3u8 / flv 等点播地址。
isLive: true 为直播模式：搭配阿里云直播推流地址或普通直播流使用。
本地项目中的移动版为 aliplayercomponents.min.js（可选组件库），按需引入即可。

六、关于鉴权（重要）

Aliplayer 是 阿里云官方 web 播放器，其完整的点播能力（如加密播放、多码率、防盗链、URL 鉴权、STS/AK 临时授权等）依赖 阿里云视频点播（VOD）账号体系与 PlayAuth、STS 等鉴权服务。

若使用阿里云 VOD，通常需先用 GetPlayInfo / STS 换取带签名的播放地址或凭据，再传给播放器播放。
如果你只有公开的 mp4 / m3u8 / flv 地址（站外免费地址），直接填入 source 即可走基础播放，不涉及鉴权。

请勿编造不存在的功能：播放器本身只负责渲染与解码，加密、鉴权、访问控制应由阿里云服务端配合完成。

七、下载文件、部署到自己网站

上面的资源引入用于快速体验；若要把阿里播放器 下载文件并在自己的网站部署：

需要下载哪些文件：播放 MP4 只需核心 aliplayer-min.js（官方 UMD 构建），皮肤与组件可选。CDN 镜像可直接获取：
- jsDelivr：https://cdn.jsdelivr.net/npm/aliyun-aliplayer@2.38.4/dist/aliplayer-min.js
- 可选皮肤样式：aliplayer-min.css；需组件栏时另取 aliplayercomponents.min.js
放到网站目录：在站点根目录新建 ali/ 文件夹，把所需文件放进去。

本地引用：

1
2
3
4
5
6
7
8
9
<link rel="stylesheet" href="./ali/aliplayer-min.css">
<script src="./ali/aliplayer-min.js"></script>
<div id="player"></div>
<script>
new Aliplayer(
  { id: 'player', source: new URLSearchParams(location.search).get('url') },
  function () {}
);
</script>

用 ?url= 播放：整站上传到任意静态托管（Nginx、EdgeOne Pages、GitHub Pages 等），无需后端：
```
https://你的域名/ali/?url=视频地址
```

说明：以上为“下载并自托管”的基础自解释/点播场景。阿里播放器的完整能力（如 PlayAuth 鉴权、阿里云 OSS/点播 URL 鉴权、HLS/FLV 直播、Wechat JS-SDK 等）依赖阿里云账号与后端签名接口，需要到阿里云控制台开通后才能使用，无法仅靠前端文件实现（详见上文「关于鉴权」）。

原出处