# Web 与 HTML5 播放

使用 Universal Player 或经验证的 Shaka 接入 DRM-X 6.0 Web 播放，并通过 PHP 或 ASP.NET Core 后端提供授权。了解自动选择 DRM 系统和安全排错的方法。

加密视频和 DRM 许可证通过不同路径传输

CDN 负责传输加密视频。您的后端检查观看权限，DRM 许可证服务则授权兼容设备解密播放。

- 01**存储 / CDN**

向播放器传输加密媒体。

- 02**您的后端**

确认用户有权观看后，向 DRM-X 请求播放授权。

- 03**DRM-X**

验证播放授权并处理 DRM 许可证请求。

- 04**播放器 + 设备**

使用设备的 DRM 系统获取许可证，并播放加密媒体。

您的后端决定访问; DRM-X 执行已签名的政策。 加密的媒体和DRM 许可证会遵循不同的传送路径 。

## 先运行完整示例[#](#use-the-complete-sample-first)

Web 软件包包含最新的 Universal Player 本地 JavaScript 文件与类型声明、已验证的 Shaka、可运行的 PHP 应用、ASP.NET Core 示例和集成 README。生产页面可从 DRM-X CDN 加载 Shaka 和 Universal Player；软件包同时保留当前版本的本地文件，供审查、开发和受控回退使用。

- 在服务器端设置 Site ID、Site Key 和 Access Key。
- 设置可信且状态为 Published 的加密文件 Content ID，并选择命名策略。
- 将示例中的登录和观看权限判断替换为您的业务逻辑。



## 客户端所需的最少职责[#](#minimal-client-boundary)

```
<script src="https://drm-x6-cdn.1aicloud.com/sdk/drmx-universal-player/v1/drmx-universal-player.js"></script>
<drmx-universal-player id="player"></drmx-universal-player>
<script>
  // Call your authenticated backend, not api6.drm-x.com.
  const session = await fetch('/api/playback/session', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({contentId: 'trusted-catalog-reference'})
  }).then(r => r.json());
  await window.DrmXUniversalPlayer.start(document.querySelector('#player'), session);
</script>
```

**安全规则由后端决定**后端根据已认证用户和可信的内容目录记录，确定 DRM-X Content ID 及策略模板。



## 自动选择 DRM 的规则[#](#automatic-drm-behavior)

- Windows Microsoft Edge 优先使用 PlayReady。如果已验证的 PlayReady 路径在开始播放前失败，Auto 可在限定条件下回退到 Widevine。
- Chrome 和受支持的 Android 浏览器使用 Widevine。
- iPhone 和 iPad 上的 Safari 使用原生 HLS FairPlay。受支持的 macOS Safari 在可用时优先使用已验证的 Shaka MSE FairPlay，并支持回退到原生 HLS。
- 兼容的华为浏览器使用已验证的 WisePlay 路径，并采取保守的自动画质选择规则。



## 生产上线检查清单[#](#production-checklist)

- 所有请求均使用 HTTPS，并将 Access Keys 保存在服务器端的密钥配置中。
- 返回播放会话响应时设置 `Cache-Control: no-store`。
- 不要在 `localStorage` 中持久保存 Manifest URL、Token 或播放会话响应。
- 详细的脱敏日志应由用户主动开启，并设置记录时限。不要记录许可证二进制数据或授权信息。
- 使用实体设备测试 Windows Edge、macOS Safari、iPhone/iPad Safari、Android，以及您宣称支持的每类设备。



Web SDK 

## 通过一个 Web Component 实现 HTML5 播放[#](#html5-playback-with-one-web-component)



```
<script
  src="https://drm-x6-cdn.1aicloud.com/shaka-player-5.2.4-drmx.2-6557ae581f1c.js"
  integrity="sha384-QzxDZ19XaYAL308fvtVjFjUX9RpRxtSfEZ1k1lm8FsRuML1MgNEORVMCtmToCFb8"
  crossorigin="anonymous"></script>
<script
  src="https://drm-x6-cdn.1aicloud.com/drmx-universal-player-1.2.0-preview.6-fa4b95431a9a.js"
  integrity="sha384-gwj1QszshenHjMEkHTTDEpozi6rbhsQgPlaq+aHBCgHiuEd2VK0P8tOB8BWaMQRr"
  crossorigin="anonymous"></script>

<drmx-universal-player
  content-id="course-12-lesson-4"
  content-type="vod"
  session-endpoint="/api/drmx/playback-session">
</drmx-universal-player>
```



浏览器只调用您提供的、需要身份认证的同源接口。Auto 会选择合适且受支持的 DRM 系统及已注册的 DASH/HLS Manifest。播放器内置码率、音轨语言与声道、字幕、画中画、全屏及播放速度控制。



### 使用Shaka, Video.js, Bitmovin, 或另一个EME播放器



向您的后端请求 Contract v1，加载 `manifestUrl`，并仅向 DRM 许可证和 FairPlay 证书请求附加 `Authorization: Bearer {drmLicenseToken}`。原样保留不透明的 Challenge 和许可证响应字节。播放结束时调用响应提供的会话释放路径。





## Universal Player 播放列表和共享控件[#](#universal-player-playlists-and-shared-controls)



Web 和 Android 版采用一致的深色设置面板与小型蓝色控件。播放列表支持上一项、下一项、随机播放、单项或全部循环，以及可取消的自动播放下一项。每个内容项都会发起新的授权播放请求。章节和文字稿元数据来自您的内容目录。



播放器支持播放速度、睡眠定时器、字幕、获准画质、音轨语言、会话书签和 A–B 循环。Web 版另提供键盘快捷键、可选的按用户隔离的本地续播、文字稿搜索，以及浏览器支持的 PiP。Android 保留原生 Widevine 离线下载及续期。投屏和跨设备进度同步需要由应用另行集成。



### Professional 和 Enterprise 的标识设置



品牌标识不覆盖视频画面。在 Web 播放器中点击鼠标右键，或在任一版本中打开 Settings → About player，可查看获准使用的标识、产品信息和播放器版本。Web 与 Android 共用圆形设置按钮和深色菜单样式。Web 全屏设置菜单还提供播放列表选择器。



在可信后端将 `playerBranding` 设为 `{"mode":"hidden"}` 或 `{"mode":"custom","logoUrl":"https://your-site.example/logo.png","label":"Your brand"}`。平台会检查有效的 Professional 或 Enterprise 订阅。其他套餐使用 `{"mode":"default"}`；未获授权的自定义或隐藏标识请求会返回 403。品牌标识设置与安全水印分别控制。



PHP 下载包包含可编辑的播放列表和品牌配置。Android 客户 ZIP 包含播放列表回调示例。播放列表授权应由后端处理；不要在任一播放器中嵌入 API 客户端凭据。

<!-- Canonical: https://docs.drm-x.com/zh-Hans/sdk/web -->
<!-- Language: zh-Hans -->