基于 Aliplayer 的轻量级视频播放页实现方案

最近整理个人资源站时，需要一个简单可靠的视频播放页面，支持通过 URL 传参播放视频，同时兼容移动端和桌面端。最终基于阿里云的 Aliplayer 写了一个单文件解决方案，无需构建工具，部署即用。

功能特性

- URL 传参播放：通过 ?url= 传入视频地址，即开即播

- 智能格式识别：自动检测 .m3u8 后缀识别直播流

- 记忆播放：集成 MemoryPlayComponent，自动续播

- 移动端适配：解决 iOS Safari 和微信浏览器的内联播放问题

- 纯前端实现：单 HTML 文件，零依赖（仅引 Aliplayer CDN）

完整代码

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
  <title>Aliplayer 播放器</title>
  <!-- 阿里播放器资源（v2.9.3） -->
  <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css" />
  <script src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js"></script>
  <script src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-components/aliplayercomponents.min.js"></script>
  <style>
    body, html {
      background: #000;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    #playerCnt {
      width: 100%;
      height: 100%;
      display: block;
    }
  </style>
</head>
<body>
  <div id="playerCnt" class="prism-player"></div>

  <script>
    // 从 URL 参数获取视频地址
    const url = new URLSearchParams(window.location.search).get('url')?.trim();

    if (!url) {
      alert('请通过 ?url= 传入视频地址');
      throw new Error('Missing video URL');
    }

    // 创建播放器（点播配置）
    const player = new Aliplayer({
      id: "playerCnt",
      source: url,
      width: "100%",
      height: "100%",
      autoplay: true,
      preload: true,
      rePlay: false,
      playsinline: false,
      useH5Prism: false,
      isLive: false, // 明确设置为点播模式
      components: [{
        name: 'MemoryPlayComponent',
        type: AliPlayerComponent.MemoryPlayComponent,
        args: [true] // 启用记忆播放
      }]
    }, function (player) {
      console.log("Aliplayer 已创建");
    });
  </script>
</body>
</html>

演示预览

使用方法

1. 基础播放

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

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

2. 播放 m3u8 直播流

自动识别直播模式，无需额外参数：

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

3. 集成到现有页面

在其他文章或资源列表中，使用 iframe 嵌入：

<iframe src="https://你的域名.com/player.html?url=视频地址" 

        width="100%" height="500px" frameborder="0" allowfullscreen>

</iframe>

技术细节

关于 playsinline 设置

iOS Safari 和微信内置浏览器默认会强制视频全屏播放。代码中设置 playsinline: true 配合 viewport 的 user-scalable=no，确保视频在页面内播放，不被系统接管。

记忆播放原理

Aliplayer 的 MemoryPlayComponent 利用 localStorage 记录播放进度，key 为视频 URL 的 hash。同一视频再次打开时，自动 seek 到上次退出位置，适合观看长视频或网课场景。

直播检测逻辑

目前通过正则 /\.m3u8$/i 判断，如需支持更多直播格式（如 flv、rtmp），可扩展检测规则：

const isLive = /\.(m3u8|flv)($|\?)/i.test(url) || url.includes('live=1');

注意事项

- HTTPS 混合内容：如果播放页是 HTTPS，视频地址也必须 HTTPS，否则浏览器会拦截

- CORS 限制：部分 CDN 或网盘链接可能存在跨域问题，需确保视频服务器允许跨域

- 移动端流量：自动播放可能在移动网络下被运营商或浏览器策略阻止，建议添加 WiFi 检测提示

总结

这个方案最大的优点是**零维护成本**。不需要数据库，不需要后端接口，一个静态文件就能跑。配合 Halo 的附件管理或对象存储，可以快速搭建自己的视频资源展示页面。

零部署成本：单文件 HTML 视频播放器方案（基于 Aliplayer）