草莓播放器 · 西瓜播放器（xgplayer）

本篇介绍草莓播放器中的 西瓜播放器（xgplayer）方案，字节跳动开源，功能全面、插件化程度高。

原出处

xgplayer 是字节跳动开源的一款带解析器、能节省流量的 HTML5 视频播放器。本项目在 xgplayer 官方仓库基础上，将 xgplayer.js 与 xgplayer-hls.js 本地化到 xg/js/ 目录。

项目：xgplayer https://github.com/bytedance/xgplayer
xgplayer-hls：https://github.com/bytedance/xgplayer/tree/main/packages/xgplayer-hls

修改说明

参数入口：读取 ?url=，仅在有值时初始化播放器。
资源本地化：xgplayer.js + xgplayer-hls.js 下沉到 js/ 目录，HLS 能力走 xgplayer-hls 插件。
功能开关：开启 download（下载）、pip（画中画）、screenShot（截图）、keyShortcut（键盘快捷键）、closeVideoClick/Dblclick/Touch（点按关闭）。
倍速：defaultPlaybackRate: 1，倍速档位 0.5~2。
配色：进度条红色 #00b4ff、进度已播放白色，贴合整体视觉。
适配：playsinline 内联播放，resize 时调用 player.resize()。

实现效果

功能全面的现代 UI，插件化架构
支持 HLS（m3u8）+ 原生格式
下载、画中画、截图、键盘快捷键、倍速
移动端内联播放优化

演示说明

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

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

西瓜对 m3u8 通过 xgplayer-hls 播放，功能按钮（下载/截图/画中画）体验完整，适合追求功能完备的场景。

部署教程

本文内容整理自 西瓜播放器（xgplayer）v3 官网与官方文档。v3 版本的官方文档站为 https://v3-player.js.org/，官方源码仓库为 https://github.com/bytedance/xgplayer。如需最新版本、API 细节与各插件说明，请以官网为准。

安装

官方推荐使用 npm 安装 xgplayer（核心包）与 xgplayer-hls（HLS 插件）：

1
2
npm i xgplayer
npm i xgplayer-hls

说明：如果你的视频是 HLS（m3u8）格式，需要额外安装 xgplayer-hls；仅播放 MP4 等原生格式时安装 xgplayer 即可。

也可以通过 CDN 直接引入：

1
2
<script src="https://cdn.jsdelivr.net/npm/xgplayer@3.0.26/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xgplayer-hls@latest/dist/index.min.js"></script>

HTML 容器

播放器需要一个容器节点，官方示例中容器 id 为 mse：

1
<div id="mse"></div>

创建播放器

引入并初始化：

1
2
3
4
5
6
import Player from 'xgplayer';

let player = new Player({
    id: 'mse',
    url: 'demo.mp4'
});

最小示例（通过 ?url= 传参播放）

本项目将 xgplayer 与 xgplayer-hls 本地化到 xg/js/ 目录，并把 ?url= 作为视频地址入口，仅当参数有值时才初始化播放器。最小调用方式：

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

HLS（m3u8）播放

西瓜对 m3u8 通过 xgplayer-hls 插件播放。安装后按官方推荐方式使用：

1
2
3
4
5
6
7
import HlsPlayer from 'xgplayer-hls';

new Player({
    id: 'mse',
    url: 'xx.m3u8',
    plugins: [HlsPlayer]
});

也可以直接安装 xgplayer-hls，由核心包自动识别并加载对应插件处理 m3u8 资源。

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

上面的 CDN 用于快速体验；若要把 xgplayer 下载文件并在自己的网站部署，关键在于核心与插件是不同的独立文件：

需要下载哪些文件：
- 播放 MP4 只需核心 xgplayer.min.js（来自官方 xgplayer npm 包 dist/）。CDN 镜像可直接获取：https://cdn.jsdelivr.net/npm/xgplayer@3.0.26/dist/xgplayer.min.js
- 需要 m3u8（HLS）时，另下载 xgplayer-hls.min.js：https://cdn.jsdelivr.net/npm/xgplayer-hls@3.0.26/dist/xgplayer-hls.min.js
- FLV 同理下载 xgplayer-flv.min.js。（选其中一个即可，不播对应格式无需下载。）
放到网站目录：在站点根目录新建 xg/js/ 文件夹，把需要的文件放进去。

本地引用：

1
2
3
4
5
6
7
8
<script src="./xg/js/xgplayer.min.js"></script>
<div id="player"></div>
<script>
new Player({
  id: 'player',
  url: new URLSearchParams(location.search).get('url'),
});
</script>

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

在博客 / iframe 中调用：

1
2
<iframe src="https://你的域名/xg/?url=视频地址"
        width="100%" height="400" frameborder="0" allowfullscreen></iframe>

若跨站自用，把 xg/ 整目录（含所用 JS 与 index.html）一并复制即可。