草莓播放器 · ArtPlayer：沉浸式自适应播放器

草莓播放器是对多种主流前端播放器的「一站式本地化」整合，每款播放器一个独立页面，通过统一的 ?url=视频地址 参数调用。本篇介绍其中的 ArtPlayer 方案。

原出处

ArtPlayer（artplayer）是一款开源的 H5 视频播放器，作者 yuri2p3，常与 DPlayer 类比但更现代、主题化更强。本项目在 artplayer 官方仓库基础上，将官方前置资源（artplayer.js、hls.min.js、flv.min.js）本地化到 art/js/ 目录，并接入草莓播放器的页面框架。

项目：ArtPlayer https://github.com/zhw2590582/ArtPlayer
Hls.js：https://github.com/video-dev/hls.js
Flv.js：https://github.com/bilibili/flv.js

修改说明

相比官方示例，做了以下改造：

参数入口：读取 ?url= 自行解析，缺失时给出友好提示并中断，而非依赖官方 demo 的固定地址。
格式识别：根据 URL 后缀预判 m3u8 / flv，动态装配 customType；mp4/ogg/webm 走原生，不传 type。
引擎回退：m3u8 优先 Hls.isSupported()，否则回退浏览器原生 canPlayType；flv 优先 flvjs，否则聊胜于无地回退 video/flv。
交互设定：autoSize 自适应容器、aspectRatio 关闭比例菜单、默认静音以符合浏览器自动播放策略、开启倍速与播放设置、主题色改为 #23ade5。
生命周期：销毁时同步销毁 Hls/Flv 实例，避免内存泄漏。

实现效果

全屏沉浸式播放，视频自适应铺满容器
支持 HLS（m3u8）、FLV、MP4、WebM、OGG
自动播放（静音策略下沉静）、倍速、画中画、网页全屏 / 原生全屏
播放设置面板，可调节倍速与循环等

演示说明

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

在线演示（假设部署于 play.123366.xyz）：

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

把 视频地址 换成你的 m3u8 / mp4 / flv 链接即可。若未指定 url，页面会提示「请通过 ?url= 传入视频地址」。

部署教程

ArtPlayer 是一款纯前端驱动的开源 HTML5 视频播放器，无需任何后端依赖。你只需要引入一个 JS 文件、准备一个容器元素，并在初始化时传入视频地址，即可在任何静态页面中播放。

官网 / 文档

官网文档站：https://artplayer.org/
GitHub 仓库：https://github.com/zhw2590582/ArtPlayer
npm 包：artplayer（最新版本 5.4.0）

安装

ArtPlayer 支持 npm 与 CDN 两种引入方式，任选其一即可。

方式一：npm 安装

1
npm i artplayer

方式二：CDN 直接引用

1
<script src="https://cdn.jsdelivr.net/npm/artplayer@5.4.0/dist/artplayer.js"></script>

建议锁定 @5.4.0（或使用 @latest 跟随最新版本）。在 Vue / React 等框架中，可按官方文档以 CommonJS / ES Module 方式引入后再导入构造函数。

HTML 结构

播放器需要一个容器元素，容器尺寸由初始化参数决定（可通过 CSS 或内联样式控制宽高）：

1
<div class="artplayer-app"></div>

初始化

在引入 ArtPlayer 之后，使用全局构造函数 Artplayer 完成初始化。官方标准写法如下：

1
2
3
4
5
6
const art = new Artplayer({
    container: '.artplayer-app',
    url: '视频地址.mp4',
    autoSize: true,
    theme: '#23ade5'
});

其中 container 为容器元素的选择器或 DOM 节点，url 为视频地址，autoSize 让播放器自适应容器尺寸，theme 设置主题色。更多参数可查阅 artplayer.org 官方文档。

HLS（m3u8）播放：引入 hls.js 后，无需额外配置，只需把 .m3u8 链接填入 url 字段即可，ArtPlayer 会自动识别并调用 hls.js 播放；你也可以通过 customType 自定义解析，但官网标准做法是直接传给 url。

用 ?url= 传参播放

ArtPlayer 的标准用法是在 url 字段中直接填入视频地址。对应到草莓播放器，这个地址即通过 ?url=视频地址 传入。下面是一个把页面 URL 参数读取出来赋值给 url 字段的最小示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// 读取 URL 中 ?url= 参数，如 https://example.com/?url=视频地址
const params = new URLSearchParams(window.location.search);
const videoUrl = params.get('url');

const art = new Artplayer({
    container: '.artplayer-app',
    url: videoUrl,
    autoSize: true,
    theme: '#23ade5'
});

访问时传入视频地址即可播放：

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

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

上面的 CDN / npm 用于快速体验；若要把 ArtPlayer 下载文件并在自己的网站部署，按以下步骤：

需要下载哪些文件：播放 MP4 只需核心 artplayer.js 一个文件即可，可从 CDN 镜像直接获取（也可到 npm 仓库下载官方包）：
- jsDelivr：https://cdn.jsdelivr.net/npm/artplayer@5.4.0/dist/artplayer.js
- 或到官方 npm 仓库下载 artplayer-5.4.0.tgz，解压取 dist/artplayer.js
放到网站目录：在站点根目录新建 art/ 文件夹，把 artplayer.js 放进去。

本地引用：把上面 CDN 的 <script> 换成你的本地路径：

1
2
3
4
5
6
7
8
9
<script src="./art/artplayer.js"></script>
<div id="player"></div>
<script>
new Artplayer({
  container: '#player',
  url: new URLSearchParams(location.search).get('url'),
  autoplay: false,
});
</script>

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

播放 MP4 无需额外插件；需要播放 HLS / FLV 时，才额外下载 hls.js / flv.js 并在页面引入后传给 artplayer 的事件 art.on('video:error') 等（详见 ArtPlayer 官方 HLS/FLV 接入文档）。