零部署成本：单文件 XGPlayer 自适应播放器方案（支持 M3U8 + 西瓜视频内核）

如果你需要一个支持 M3U8 格式、西瓜视频内核、零依赖部署的视频播放器，基于 XGPlayer + HLS 插件的方案是一个高性能的选择。它自带画中画、截图、下载、键盘快捷键等功能，适合作为资源站的通用播放方案。

在线演示

该演示使用开源测试视频流，支持画中画、截图、倍速播放、键盘快捷键等功能。

为什么选择 XGPlayer？

西瓜视频内核：字节跳动出品，性能优化到位
HLS 原生支持：通过 xgplayer-hls.js 插件完美支持 M3U8
画中画模式：支持 PiP（Picture-in-Picture）小窗播放
视频截图：一键截取当前画面
下载功能：支持视频下载按钮
键盘快捷键：支持方向键控制、倍速切换等操作
自适应全屏：CSS 强制 100% 视口宽高，无边距黑边
零依赖部署：单 HTML 文件，所有资源通过 CDN 加载

完整代码

将以下代码保存为 index.html，上传到服务器任意目录即可使用：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
  <meta name="referrer" content="no-referrer">
  <title>xgplayer</title>
  <style type="text/css">
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: #000;
    }
    #mse {
      width: 100vw;
      height: 100vh;
    }
    /* 强制 video 元素填满容器 */
    #mse video {
      width: 100% !important;
      height: 100% !important;
      object-fit: contain; /* 保持比例 */
      background: #000;
    }
  </style>
</head>
<body>
  <div id="mse"></div>

  <!-- 远程 CDN 资源 -->
  <script src="https://cdn.jsdelivr.net/npm/xgplayer@3.0.10/dist/index.min.js" charset="utf-8"></script>
  <script src="https://cdn.jsdelivr.net/npm/xgplayer-hls.js@3.0.10/dist/index.min.js" charset="utf-8"></script>

  <script>
    // 仅从 URL 参数获取视频地址，无默认值
    const urlParams = new URLSearchParams(window.location.search);
    const videoUrl = urlParams.get('url');

    if (videoUrl) {
      let player = new HlsJsPlayer({
        "id": "mse",
        "url": videoUrl,
        "playsinline": true,
        "whitelist": [""],
        "playbackRate": [null],
        "download": true,
        "pip": true,
        "screenShot": true,
        "keyShortcut": "on",
        "closeVideoClick": false,
        "closeVideoDblclick": false,
        "closeVideoTouch": false,
        "width": "100%",
        "height": "100%",
        "fluid": false
      });

      window.addEventListener('resize', () => {
        if (player && typeof player.resize === 'function') {
          player.resize();
        }
      });
    } else {
      document.body.innerHTML = '<h1 style="color:#fff;text-align:center;margin-top:20%">缺少 ?url= 参数</h1>';
    }
  </script>
</body>
</html>

使用方法

基础播放（支持 m3u8）

将视频地址通过 URL 参数传入：

https://你的域名.com/player.html?url=https://example.com/video.m3u8

嵌入到博客文章

在其他页面中通过 iframe 嵌入：

<iframe src="https://你的域名.com/player.html?url=视频地址" 
        width="100%" 
        height="500" 
        frameborder="0" 
        allowfullscreen>
</iframe>

核心特性解析

1. 格式支持

XGPlayer 通过插件支持多种视频格式：

M3U8 (HLS)：通过 xgplayer-hls.js 插件支持
MP4：浏览器原生播放
FLV/Dash：可通过对应插件扩展

2. 内置功能

功能	配置项	说明
画中画	`pip: true`	支持 PiP 小窗播放模式
视频截图	`screenShot: true`	一键截取当前画面
下载按钮	`download: true`	显示视频下载入口
键盘快捷键	`keyShortcut: "on"`	开启方向键等快捷键
内联播放	`playsinline: true`	iOS 微信内不强制全屏

3. 交互控制

关闭点击暂停：closeVideoClick: false 防止误触暂停
关闭双击全屏：closeVideoDblclick: false 防止误触全屏
关闭触摸事件：closeVideoTouch: false 防止移动端误触

4. 自适应布局

视口单位：100vw + 100vh 适配各种屏幕
Object-fit：contain 保持视频比例，黑边填充
Resize 监听：窗口变化自动调用 player.resize()

注意事项

HTTPS 要求：播放页和视频源必须同为 HTTPS，混用会被浏览器拦截
CORS 限制：视频服务器需允许跨域访问（Access-Control-Allow-Origin: *）
CDN 可用性：如果 jsdelivr 访问慢，可将 CDN 地址替换为：
- https://unpkg.com/xgplayer@3.0.10/dist/index.min.js
- 或下载到本地使用相对路径
HLS 插件版本：确保 xgplayer 和 xgplayer-hls.js 版本一致

高级配置（可选）

如需更多功能，可在初始化时扩展配置：

let player = new HlsJsPlayer({
    "id": "mse",
    "url": videoUrl,
    "playsinline": true,
    "whitelist": [""],
    "playbackRate": [0.5, 0.75, 1, 1.25, 1.5, 2],  // 倍速档位
    "download": true,
    "pip": true,
    "screenShot": true,
    "keyShortcut": "on",
    "closeVideoClick": false,
    "closeVideoDblclick": false,
    "closeVideoTouch": false,
    "width": "100%",
    "height": "100%",
    "fluid": false,
    // 新增配置
    "autoplay": true,           // 自动播放
    "muted": true,              // 默认静音（解决自动播放限制）
    "poster": "封面图地址",      // 视频封面
    "loop": false,              // 循环播放
    "preload": "auto",          // 预加载策略
    "hlsOpts": {                // HLS 专属配置
        "maxBufferLength": 30,
        "maxMaxBufferLength": 60
    }
});

总结

这是一个比 Video.js 更现代化的替代方案，特别适合需要画中画和截图功能的场景。XGPlayer 的西瓜视频内核让它在移动端表现优异，而完善的插件体系支持各种高级功能。配合单文件部署，适合作为个人资源站的通用播放器。