云端播放器，只对授权域名开放

与 MX-Player-Pro 同形的网页 SDK：new MXPlayer({ playerElm, url })、 player.on('ready'|'error'|…)。区别在于每一条媒体请求都要经过云端播放器的握手令牌，来源域名不在环境变量白名单里就直接 403。

查看接入代码防盗链如何生效

在线演示

粘贴一个 HLS (.m3u8) 或 MP4 地址即可播放。媒体经由云端播放器代理，上游地址不会暴露给页面。

接入

与参考 SDK 完全一致的两行结构：一个容器，一次 import。SDK 与 CSS 同源，跟随最新部署。

<link rel="stylesheet" href="https://player.freeanime.org/sdk/mx-player.css">
<div id="mse" style="aspect-ratio:16/9"></div>

<script type="module">
  import { MXPlayer } from 'https://player.freeanime.org/sdk/mx-player.js'

  const player = new MXPlayer({
    playerElm: '#mse',
    url: 'https://example.com/master.m3u8',
    autoplay: true,
  })

  player.on('ready', ({ duration, tracks }) => {
    console.log(`时长 ${duration.toFixed(1)}s，共 ${tracks.length} 条轨道`)
  })
  player.on('error', ({ message }) => console.error(message))
</script>

固定版本

需要长期锁定某次构建时，把 sdk/ 换成带版本号的目录，确保 JS 与 CSS 来自同一次构建。

<link rel="stylesheet" href="https://player.freeanime.org/sdk/v0.1.0/mx-player.css">
<script type="module">
  import { MXPlayer } from 'https://player.freeanime.org/sdk/v0.1.0/mx-player.js'
</script>

本地文件

const player = new MXPlayer({ playerElm: '#mse', localPlayback: true })
// localPlayback 打开后，把本地视频拖到容器上即可播放。

字幕

new MXPlayer({
  playerElm: '#mse',
  url: 'https://example.com/master.m3u8',
  subtitles: [
    { url: 'https://example.com/zh.vtt', label: '中文', language: 'zh', default: true },
  ],
})

防盗链如何生效

握手：页面加载 SDK 后，SDK 调用 GET /api/session。云端播放器读取请求的 Origin（非 CORS 请求回退到 Referer），与 MX_PLAYER_ALLOWED_ORIGINS 比对。
签发：通过校验才拿到一枚 HMAC 令牌，令牌里绑定来源域名与过期时间。
代理：SDK 把播放地址换成 /api/media?u=…&t=…。媒体请求必须带有效令牌，否则 403，且响应不回显 Access-Control-Allow-Origin。
上游：云端播放器以自己的 Referer/UA 回源，并把分片伪装、PNG 包裹、Range 偏移这些上游怪癖处理掉，页面拿到的永远是干净的 MPEG-TS。

令牌与会话都绑定来源域名，所以 A 站拿到的令牌不能拿到 B 站复用；直接打开 /api/media 也拿不到任何内容。

请求	来源	结果
`/api/session`	白名单内	200 + token
`/api/session`	未授权	403 origin_not_allowed
`/api/media`	无 token	403 missing_token
`/api/media`	他人的 token	403 origin_mismatch
`/api/media`	有效 token	200 媒体 / 206 Range

部署到 Vercel

仓库已包含 vercel.json：静态站点 + api/ 下的 Edge Functions，无需额外配置。

# 1. 导入仓库
vercel link

# 2. 配置两个环境变量（Production / Preview 都要）
vercel env add MX_PLAYER_ALLOWED_ORIGINS
#   https://your-site.example,https://*.your-site.example

vercel env add MX_PLAYER_TOKEN_SECRET
#   openssl rand -base64 48

# 3. 发布
vercel --prod

可选：MX_PLAYER_TOKEN_TTL_SECONDS（默认 3600，最小 60，最大 86400）。白名单为空时云端播放器会拒绝所有请求，这是刻意的失败关闭行为。