# Phát trên Web và HTML5

Comment DRM-X 6.0 Bảo vệ phát lại web với Universal Player, đủ tiêu chuẩn Shaka, PHP, ASP.NET Coretự động DRM Lựa chọn và chẩn đoán an toàn.

Video đã mã hóa và giấy phép DRM được truyền qua các đường riêng

CDN phân phối video đã mã hóa. Backend kiểm tra quyền truy cập, còn dịch vụ giấy phép DRM cho phép giải mã trên thiết bị tương thích.

- 01**Lưu trữ / CDN**

Phân phối nội dung đã mã hóa đến trình phát.

- 02**Backend của bạn**

Kiểm tra quyền xem và yêu cầu thông tin cấp quyền phát từ DRM-X.

- 03**DRM-X**

Xác thực thông tin cấp quyền phát và xử lý yêu cầu giấy phép DRM.

- 04**Trình phát + thiết bị**

Dùng hệ thống DRM của thiết bị để nhận giấy phép và phát nội dung đã mã hóa.

Hậu phương của bạn quyết định truy cập; DRM-X Áp dụng chính sách đã ký. DRM Bằng lái đi theo đường giao hàng riêng.

## Dùng mẫu hoàn chỉnh trước[#](#use-the-complete-sample-first)

Gói web chứa địa phương mới nhất Universal Player JavaScript và khai báo, đủ tiêu chuẩn ShakaMột chiếc máy chạy được PHP ứng dụng, điều khiển được ASP.NET Core Ví dụ, và một tích hợp README. Trang sản xuất có thể tải Shaka và Universal Player từ DRM-X CDN; gói giữ lại các tập tin cục bộ hiện thời để xem xét, phát triển, và có kiểm soát hậu phương.

- Thiết lập Site ID, Site Key và Access Key ở phía máy chủ.
- Đặt tập tin được bảo vệ đã tin cậy Content ID và đặt tên theo chính sách.
- Thay thế việc đăng nhập mẫu mẫu và quyết định phúc lợi xã hội bằng logic kinh doanh của bạn.



## Giới hạn ứng dụng khách nhỏ[#](#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>
```

**Trình duyệt không chọn bảo mật**Hậu phương của bạn bản đồ người dùng xác thực và danh mục đáng tin cậy tham chiếu đến DRM-X Content ID và mẫu chính sách.



## Tự động DRM Ứng xử[#](#automatic-drm-behavior)

- Windows Microsoft Edge Thích PlayReadyNếu hội đủ điều kiện PlayReady đường dẫn thất bại trước khi phát lại, chế độ tự động có thể dùng bị ràng buộc Widevine Lùi lại.
- Chrome hỗ trợ Android Các trình duyệt dùng Widevine.
- Safari Trên iPhone và iPad sử dụng bản địa HLS FairPlayHỗ trợ macOS Safari, đủ tiêu chuẩn Shaka MSE FairPlay được ưu tiên khi sẵn sàng, với bản địa HLS Lùi lại.
- Các trình duyệt Hoa kỳ tương thích với nhau sử dụng các khả năng WisePlay và hành vi chất lượng bảo thủ.



## Danh sách sản xuất[#](#production-checklist)

- Phục vụ tất cả mọi thứ HTTPS và giữ Access Keybí mật của máy chủ.
- Trả lời lặp lại cách sử dụng `Cache-Control: no-store`.
- Không tiếp tục hiển thị URL, thẻ tín dụng, hoặc trả lời phiên chạy trong `localStorage`.
- Giữ các bản ghi được sửa chữa chi tiết tối ưu và hạn chế thời gian; không ghi bằng lái máy hoặc giấy phép.
- Kiểm tra vật lý Windows Edge, macOS Safari, iPhone/iPad Safari, AndroidVà mỗi lớp thiết bị bạn quảng cáo.



Web SDK 

## HTML5 Phát lại với một Web Component[#](#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>
```



Trình duyệt chỉ gọi điểm kết thúc tương tự xác thực của bạn. Auto chọn điểm hỗ trợ thích hợp DRM đã đăng ký DASH/HLS Bản kê khai dữ liệu, ngôn ngữ âm thanh/ ngôn ngữ, phụ đề, hình ảnh, màn hình đầy đủ, và tốc độ phát lại được xây dựng.



### Dùng ShakaVideo.js, Bitmovin, hay khác EME trình phát



Yêu cầu hợp tác từ hậu phương, nạp `manifestUrl`và thêm `Authorization: Bearer {drmLicenseToken}` Chỉ để DRM Bằng lái và FairPlay Yêu cầu chứng nhận. Bảo tồn trả lời chính xác cho thử thách và chứng nhận bằng lái. Hãy dùng đường thoát khi phát lại kết thúc.





## Universal Player danh sách phát nhạc và điều khiển chia sẻ[#](#universal-player-playlists-and-shared-controls)



Web và Android phiên bản sử dụng một bảng thiết lập tối nhất định với điều khiển màu xanh gọn. Danh sách phát nhạc hỗ trợ mục kế tiếp/ trước, xáo trộn, lặp lại một/ tất cả và có khả năng tự động tiến tới. Mỗi mục sử dụng một yêu cầu phát lại có thẩm quyền. Chương và ghi chép siêu dữ liệu đến từ danh mục nội dung của bạn.



Tốc độ phát lại, giờ giấc, chú thích, chất lượng, ngôn ngữ âm thanh, đánh dấu phiên chạy và vòng lặp A–B sẵn sàng. Mạng thêm vào phím tắt bàn phím, trình xem màn hình địa phương tùy chọn, tìm kiếm và hỗ trợ trình duyệt. Android bản địa Widevine Tải xuống và thay đổi thời gian. Quá trình phân loại và kiểm tra chéo đòi hỏi sự tích hợp ứng dụng riêng biệt.



### Thiết lập biểu tượng cá nhân và tầu Enterprise



Đóng dấu giúp tránh xa bề mặt video. trình phát, hoặc thiết lập mở về trình phát trên một trong hai phiên bản, để xem logo cho phép, thông tin sản phẩm và trình phát phiên bản. Kiểu thiết lập điều khiển vòng và kiểu thực đơn tối được chia sẻ cho Android.. Các thiết lập toàn màn hình cũng chứa một bộ chọn danh sách nhạc.



Đặt `playerBranding` trong hậu phương tin cậy của bạn `{"mode":"hidden"}` hay `{"mode":"custom","logoUrl":"https://your-site.example/logo.png","label":"Your brand"}`Nền tảng kiểm tra lại danh sách các nhà hoạt động chuyên nghiệp hoặc Enterprise đã đặt mua dài hạn. Các kế hoạch khác dùng `{"mode":"default"}`yêu cầu không hợp lệ trả về 403. Đây là trường hợp riêng biệt với dấu thủy phân.



Hạt PHP Tải về bao gồm cả danh sách nhạc và cấu hình thương mại được soạn thảo. Android Khách hàng ZIP trong danh sách người gọi trở lại. Giữ quyền sử dụng danh sách phát nhạc trong hậu phương của bạn; không bao giờ nhúng API ứng dụng khách thông tin xác thực trong một trong hai trình phát.

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