Pemutaran Web dan HTML5

Gunakan contoh lengkap terlebih dahulu#

Paket Web berisi JavaScript dan deklarasi tipe Universal Player lokal terbaru, Shaka yang telah diuji, aplikasi PHP yang dapat dijalankan, contoh ASP.NET Core yang dapat dijalankan dan README integrasi. Halaman produksi dapat memuat Shaka dan Universal Player dari DRM-X CDN; paket tetap menyertakan file lokal saat ini untuk peninjauan, pengembangan dan cadangan terkontrol.

1. Atur Site ID, Site Key, dan Access Key di sisi server.
2. Atur berkas yang dilindungi oleh Published yang terpercaya Content ID dan kebijakan bernama.
3. Ganti contoh login dan hak keputusan dengan logika bisnis Anda.

Tanggung jawab minimum di sisi klien#

<drmx-universal-player
  content-id="your-published-content-id"
  session-endpoint="/api/drmx/playback-session">
</drmx-universal-player>

Sebelum komponen, muat runtime Shaka teruji dan skrip Universal Player terbaru dari kit lengkap. Saat Play ditekan, komponen memanggil endpoint terautentikasi Anda. Endpoint memeriksa sesi dan izin, memilih konten serta kebijakan tepercaya, membuat Contract v1, dan mengembalikannya dengan Cache-Control: no-store.

Pemilihan DRM otomatis#

• Windows Microsoft Edge mengutamakan PlayReady. Jika jalur teruji gagal sebelum memutar, Auto dapat beralih secara terbatas ke Widevine.
• Chrome dan didukung Android browsers menggunakan Widevine.
• Safari pada iPhone dan iPad memakai HLS FairPlay native. macOS Safari yang didukung mengutamakan Shaka MSE FairPlay teruji bila tersedia, dengan alternatif HLS native.
• Pebrowser kompatibel Huawei menggunakan jalur yang memenuhi syarat WisePlay dan perilaku kualitas otomatis konservatif.

Daftar periksa sebelum produksi#

• Melayani segalanya lebih dari HTTPS dan menjaga Access Key s dalam rahasia server.
• Kembali respon putar-sesi dengan Cache-Control: no-store.
• Jangan tahan pada URL manifest, token, atau tanggapan sesi dalam localStorage.
• Aktifkan log terperinci yang sudah dibersihkan dari data sensitif hanya secara sukarela dan untuk waktu terbatas. Jangan merekam byte lisensi atau data otorisasi.
• Uji fisik Windows Edge, macOS Safari, iPhone / iPad Safari, Android, dan setiap kelas perangkat yang Anda iklankan.

Batas 1080p opsional khusus ponsel#

Web SDK 1.2.0-beta.4 menambahkan batas telepon opsional. Biarkan tidak diatur untuk mempertahankan perilaku UHD saat ini. Konfigurasikan sebelum Play pertama:

<drmx-universal-player
  content-id="your-published-content-id"
  session-endpoint="/api/drmx/playback-session"
  mobile-max-height="1080">
</drmx-universal-player>

// Equivalent component option; retained for subsequent playlist items:
await component.play({mobileMaximumHeight: 1080});
// Remove the option before a new playback:
await component.play({mobileMaximumHeight: null});

// Low-level API, for a video element you own:
await DrmXUniversalPlayer.start({
  video, contentId: 'your-published-content-id',
  sessionEndpoint: '/api/drmx/playback-session',
  mobileMaximumHeight: 1080
});

Opsi berlaku hanya pada perangkat yang dikenali sebagai ponsel. Tablet, komputer, dan TV mempertahankan batas sebelumnya. Deteksi memakai petunjuk peramban serta user-agent; lebar layar tidak menentukan resolusi. Jika aplikasi tahu kelas perangkat, gunakan device-class="phone" atau deviceClass: "phone". Nilai lain: auto, tablet, desktop, tv. Klasifikasi peramban hanya petunjuk.

SDK mengirim platformCapabilities.maximumHeight yang lebih rendah sebelum otorisasi. Endpoint harus meneruskan atau memperkecilnya. Batas jawaban tidak boleh melebihi permintaan. Auto dan pilihan manual tetap dalam izin setelah rotasi, layar penuh, percobaan ulang, atau perubahan daftar. Kebijakan DRM bertanda tangan dan dekoder dapat memperkecil lagi. Nilai adalah bilangan bulat 144 hingga 4320; tidak diatur atau null menonaktifkan batas opsional.

Safari membutuhkan HLS yang disaring

Backend harus mengembalikan nativeHlsQuality.autoUrl terikat sesi dan URL kualitas yang hanya memuat versi video valid, sambil mempertahankan grup audio dan takarir. Contoh PHP lengkap sudah mendukungnya. Menurunkan angka dengan HLS master tak terbatas tidak menghemat bandwidth. SDK menolak batas yang dinaikkan atau respons FairPlay terbatas tanpa deskriptor wajib. Backend lain harus menerapkan kontrak sama sebelum mengaktifkan opsi.

Opsi SDK native

Apple Universal Player 1.0.0-beta.1 menerima mobileMaximumHeight: 1080 hanya untuk kelas ponsel native. Endpoint mengembalikan master terfilter yang diperiksa sebelum media dimuat. Android 1.0.0-beta.1 menerima mobileMaximumHeight = 1080 dalam WidevineCapabilities.playbackCapabilities; gunakan clientPlatform = "android" untuk ponsel dan secara eksplisit android-tablet atau android-tv untuk kelas lain. Terapkan batas offline setara ke unduhan baru. Unduhan lama dipertahankan.

Verifikasi integrasi Anda

1. Kemas sumber dengan 1080p, versi lebih rendah, dan UHD. Pastikan dapat diputar tanpa batas yang diatur.
2. Aktifkan 1080 pada ponsel. Periksa batas otorisasi, master terfilter, menu Auto/manual, dan dimensi hasil dekode. Tidak ada pilihan di atas 1080p.
3. Uji perpindahan waktu, kualitas, audio, takarir, iklan, dan maju daftar. Hentikan pemutaran dan pastikan sesi dilepas.
4. Gunakan opsi sama pada komputer dan tablet: batas khusus ponsel tidak boleh menurunkan batasnya. Batas kebijakan atau perangkat lama tetap berlaku.

Batas resolusi tidak menetapkan bitrate atau menjamin penghematan tetap. Terapkan aturan tahan manipulasi di backend tepercaya dan kebijakan DRM yang sesuai. Petunjuk perangkat klien bukan bukti. Jika tak ada versi valid, kembalikan kegagalan; jangan diam-diam kembali ke UHD.

Kontrol layar penuh konsisten di iPhone Safari#

Web SDK 1.2.0-beta.4 mempertahankan kontrol Web Player dalam layar penuh, termasuk halaman iklan PHP. Di iPhone, gunakan layar penuh elemen bila didukung, atau perbesar pemutar di halaman. Bilah peramban dapat tetap terlihat. Tidak beralih ke pemutar video bawaan iPhone. Gunakan menu yang sama untuk kualitas, audio, dan takarir pada setiap platform.

Audio dan takarir menampilkan track aktif dan diperbarui setelah HLS native menerapkan perubahan. Mematikan lalu menyalakan CC mempertahankan bahasa terakhir. Iklan punya kontrol terpisah; kontrol biasa kembali saat konten dilanjutkan.

Menguji kualitas, bahasa, dan iklan#

1. Mulai dengan ketukan atau klik nyata. Aturan putar otomatis dan suara peramban tetap berlaku.
2. Buka Pengaturan dan periksa kualitas, audio, serta takarir aktif. Auto memakai tingkat yang diizinkan; pilihan manual tidak dapat menaikkan batas otorisasi.
3. Ubah bahasa audio, pilih bahasa subjudul, lalu matikan CC dan nyalakan. Konfirmasi bahwa label mencerminkan trek aktif dan preferensi subjudul dipertahankan.
4. Masuk layar penuh di iPhone Safari dan Edge. Web Player mempertahankan kontrol bersama; iPhone dapat membesar dalam halaman dengan bilah peramban tetap terlihat.
5. Jika memakai iklan, uji jeda sebelum, selama, dan setelah konten, termasuk perubahan kualitas. Halaman iklan PHP menyediakan lab uji. Iklan demo bawaan dan Google IMA adalah mode berbeda; pastikan layanan pilihan dimuat di setiap peramban yang didukung.

Untuk bandwidth, ikuti Batas 1080p opsional khusus ponsel. Jangan atur untuk mempertahankan UHD. Opsi tidak menentukan bitrate tetap atau menjamin persentase penghematan.