# Web and HTML5 playback

Integrate DRM-X 6.0 protected Web playback with the Universal Player, qualified Shaka, PHP, ASP.NET Core, automatic DRM selection, and safe diagnostics.

Canonical: https://docs.drm-x.com/sdk/web
Updated: 2026-09-05

![Your backend decides access; DRM-X enforces the signed policy. Encrypted media and DRM licenses follow separate delivery paths.](https://docs.drm-x.com/assets/media-license-flow.svg)Your backend decides access; DRM-X enforces the signed policy. Encrypted media and DRM licenses follow separate delivery paths.

## Use the complete sample first[#](#use-the-complete-sample-first)

The Web package contains the latest local Universal Player JavaScript and declarations, qualified Shaka, a runnable PHP application, a runnable ASP.NET Core example, and an integration README. Production pages may load Shaka and Universal Player from the DRM-X CDN; the package retains current local files for review, development, and controlled fallback.

- Set server-side Site ID, Site Key, and Access Key.
- Set the trusted Published protected file Content ID and named policy.
- Replace the sample login and entitlement decision with your business logic.



## Minimal client boundary[#](#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>
```

**The browser does not choose security**Your backend maps the authenticated user and trusted catalog reference to the DRM-X Content ID and policy template.



## Automatic DRM behavior[#](#automatic-drm-behavior)

- Windows Microsoft Edge prefers PlayReady. If the qualified PlayReady path fails before playback, Auto mode may use bounded Widevine fallback.
- Chrome and supported Android browsers use Widevine.
- Safari on iPhone and iPad uses native HLS FairPlay. On supported macOS Safari, qualified Shaka MSE FairPlay is preferred when available, with native HLS fallback.
- Compatible Huawei browsers use the qualified WisePlay path and conservative automatic quality behavior.



## Production checklist[#](#production-checklist)

- Serve everything over HTTPS and keep Access Keys in server secrets.
- Return playback-session responses with `Cache-Control: no-store`.
- Do not persist manifest URLs, tokens, or session responses in `localStorage`.
- Keep detailed redacted logs opt-in and time-bounded; do not record license bytes or authorization.
- Test physical Windows Edge, macOS Safari, iPhone/iPad Safari, Android, and every device class you advertise.



Web SDK 

## HTML5 playback with one Web Component[#](#html5-playback-with-one-web-component)



```
<script
src="https://drm-x6-cdn.1aicloud.com/shaka-player-5.2.4-drmx.1-9becbaeba461.js"
integrity="sha384-BtpnbWYLUVRwUwz3KcCOydvldeq7iCtzQeRN0RmBl40X9U7+VXn0gOd+WKbv1mFr"
crossorigin="anonymous"></script>
<script
src="https://drm-x6-cdn.1aicloud.com/drmx-universal-player-1.1.0-preview.13-d65e053be9c7.js"
integrity="sha384-ztiFivU1ad1vjd3le+ZqiJCnZripAKD3JBLG3sDYuZJZNBeDvBYFuwWTBXPckiYj"
crossorigin="anonymous"></script>

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



The browser calls only your authenticated same-origin endpoint. Auto chooses the appropriate supported DRM and registered DASH/HLS manifest. Bitrate, audio language/channel, subtitles, Picture-in-Picture, fullscreen, and playback speed are built in.



### Using Shaka, Video.js, Bitmovin, or another EME player



Request Contract v1 from your backend, load `manifestUrl`, and add `Authorization: Bearer {drmLicenseToken}` only to DRM license and FairPlay certificate requests. Preserve the opaque challenge and license response bytes exactly. Use the returned release route when playback ends.