التشغيل عبر الويب وHTML5

ادمج تشغيل الويب المحمي باستخدام DRM-X 6.0 مع Universal Player أو Shaka الذي تم التحقق منه، وأمثلة PHP وASP.NET Core، والاختيار التلقائي لنظام DRM، والتشخيص الآمن.

عرض Markdown أمثلة قابلة للتجربةآخر تحديث 2026-10-26

لتخصيص الواجهة ومعرفة القيم الافتراضية للمعلمات وأمثلة دورة الحياة، اقرأ PLAYER-UI-CONFIGURATION.md. لوحات المشغّل المنبثقة الافتراضية معتمة؛ ويُضبط تعتيم الترجمة والعلامات المائية بشكل منفصل.

استخدم Web SDK 1.2.0-beta.7 بعد عمل Published Content ID في DRM-X Web Player. يحتفظ موقعك بتسجيل الدخول وقواعد المشاهدة الخاصة به. ابدأ بـ حزمة تكامل خادم خلفي كاملة ثم أضف المكوّن أدناه.

استخدام المثال الكامل أولًا#

تتضمن حزمة الويب أحدث ملفات Universal Player المحلية بلغة JavaScript وتعريفاتها، وShaka الذي تم التحقق منه، وتطبيق PHP قابلًا للتشغيل، ومثال ASP.NET Core قابلًا للتشغيل، وREADME للتكامل. يمكن لصفحات الإنتاج تحميل Shaka وUniversal Player من DRM-X CDN؛ وتحتفظ الحزمة بالملفات المحلية الحالية للمراجعة والتطوير وخيار بديل مضبوط.

اضبط Site ID وSite Key وAccess Key على الخادم.
أعد ملف (Content ID) المشمول بالوصاية و سمّيت السياسة
إستبدلوا سجل العينة وقرار الاستحقاق بمنطق عملك

الحد الأدنى لمسؤوليات جهة العميل#

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

حمّل Shaka runtime المؤهل وبرنامج Universal Player الحالي من الحزمة الكاملة قبل هذا المكوّن. عند ضغط Play، يستدعي المكوّن نقطة النهاية الموثقة لديك. تتحقق النقطة من جلسة المشاهد وصلاحيته وتختار المحتوى والسياسة الموثوقين، ثم تنشئ Contract v1 وتعيده مع Cache-Control: no-store.

لا يختار (بروسر) الأمنيربط خادمك المستخدم المصادَق عليه ومرجع الكتالوج الموثوق بـ Content ID وقالب السياسة في DRM-X.

الاختيار التلقائي لنظام DRM#

يفضل Windows Microsoft Edge نظام PlayReady. إذا فشل المسار المتحقق منه قبل التشغيل فقد يستخدم Auto رجوعًا محدودًا إلى Widevine.
Chromeودعمت Android بروزر يستعمل Widevine
يستخدم Safari على iPhone وiPad نظام HLS FairPlay الأصلي. في macOS Safari المدعوم يفضل Shaka MSE FairPlay المتحقق منه عند توفره مع رجوع إلى HLS الأصلي.
تستخدم متصفحات Huawei المتوافقة مسار WisePlay الذي تم التحقق منه وسلوكًا محافظًا لاختيار الجودة تلقائيًا.

قائمة تحقق قبل التشغيل الفعلي#

خدمة كل شيء على HTTPS والاحتفاظ Access Key في أسرار الخواديم.
(أعيدي إستجابات العزف مع (Cache-Control: no-store
لا تستمري في التظاهر، أو الكسور، أو استجابات الدورة في (localStorage).
اجعل السجلات التفصيلية بعد إزالة المعلومات الحساسة اختيارية ومحدودة المدة؛ لا تسجّل بايتات التراخيص أو بيانات التفويض.
اختبر على أجهزة فعلية باستخدام Windows Edge وmacOS Safari وiPhone/iPad Safari وAndroid، وعلى كل فئة أجهزة تعلن دعمها.

Web SDK

تشغيل HTML5 باستخدام 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-beta.8-26bbb1dfef2c.js"
  integrity="sha384-tnp3UFe+6ZU/QKoKQq2zU8Z3J7BX+GI1/L+Z3Y8+AmJkYI3+owP6e+A4npzWIFdA"
  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 المسجلة المناسبين. يتضمن المشغّل اختيار معدل البت ولغة الصوت وقنواته والترجمات، وPicture-in-Picture وملء الشاشة وسرعة التشغيل.

(بإستعمال (Shaka)، (فيديو (ج)، (بيتموفين) أو (EME المشغّل) الآخر

اطلب Contract v1 من الخلفية وحمّل manifestUrl وأضف Authorization: Bearer {drmLicenseToken} فقط لطلبات ترخيص DRM وشهادة FairPlay. احتفظ ببايتات التحدي والاستجابة كما هي تمامًا. استخدم مسار التحرير المعاد عند انتهاء التشغيل.

قوائم التشغيل وعناصر التحكم المشتركة في Universal Player#

تستخدم نسختا Web وAndroid لوحة داكنة وأزرارًا زرقاء صغيرة. تدعم القائمة التالي والسابق والعشوائي وتكرار عنصر أو الكل والتقدم التلقائي القابل للإلغاء. لكل عنصر طلب تفويض جديد. الفصول والنص المفرغ من كتالوجك.

تتوفر السرعة ومؤقت النوم والترجمة والجودة المسموحة ولغات الصوت والعلامات وتكرار A–B. تضيف Web اختصارات واستئنافًا محليًا اختياريًا لكل مشاهد وبحث النص وPiP المدعوم. يحتفظ Android بتنزيل Widevine دون اتصال وتجديده. البث إلى شاشة أخرى والتقدم بين الأجهزة يحتاجان دمجًا إضافيًا.

الشعارات الفنية والتجهيزية

لا تظهر العلامة التجارية فوق الفيديو. انقر بالزر الأيمن في Web أو افتح Settings → About player لعرض الشعار المسموح ومعلومات المنتج والإصدار. زر الإعدادات الدائري والقائمة الداكنة مشتركان مع Android. يتضمن ملء الشاشة في Web محدد قائمة تشغيل.

اضبط playerBranding إلى {"mode":"hidden"} أو {"mode":"custom","logoUrl":"https://your-site.example/logo.png","label":"Your brand"} في الخلفية الموثوقة. تتحقق المنصة من Professional أو Enterprise نشط. تستخدم الخطط الأخرى {"mode":"default"} وتعيد طلبات التخصيص أو الإخفاء غير المصرح بها 403. هذا مستقل عن العلامة المائية الأمنية.

يتضمن تنزيل PHP قائمة وعلامة قابلة للتعديل، ويحتوي ZIP الخاص بـ Android على مثال callback. أبقِ تفويض القائمة في الخلفية ولا تضع بيانات عميل API في أي مشغل.

حد 1080p اختياري للهواتف فقط#

يضيف Web SDK 1.2.0-beta.4 حدًا اختياريًا للهواتف. اتركه دون ضبط لإبقاء سلوك UHD الحالي. اضبطه قبل أول Play:

<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
});

ينطبق الخيار على الأجهزة المصنفة هواتف فقط. تحتفظ الأجهزة اللوحية والحواسيب والتلفزيونات بحدودها السابقة. يعتمد الكشف على تلميحات المتصفح وuser-agent الاحتياطي؛ لا يحدد عرض الشاشة الدقة. إذا عرف التطبيق فئة الجهاز، فاستخدم device-class="phone" أو deviceClass: "phone". القيم الأخرى هي auto وtablet وdesktop وtv. تصنيف المتصفح استرشادي فقط.

يرسل SDK القيمة الأقل لـ platformCapabilities.maximumHeight قبل التفويض. يجب أن تمررها نقطة النهاية أو تخفضها أكثر. لا يجوز أن يتجاوز الحد المعاد قيمة الطلب. يظل Auto والاختيار اليدوي ضمن المسموح بعد التدوير وملء الشاشة والمحاولات وتغييرات القائمة. قد تخفض سياسة DRM الموقعة وقيود فك الترميز النتيجة أكثر. القيم أعداد صحيحة من 144 إلى 4320؛ يلغي عدم الضبط أو null هذا الحد الاختياري.

يتطلب Safari قوائم HLS مفلترة

استخدم خادمًا خلفيًا يعيد nativeHlsQuality.autoUrl مرتبطًا بالجلسة وعناوين الجودة التي لا تحتوي إلا على نسخ الفيديو المسموحة، مع إبقاء مجموعات الصوت والترجمة النصية. يطبق مثال PHP الكامل الحالي ذلك. خفض الرقم وحده مع قائمة HLS رئيسية غير مقيدة لا يوفر العرض النطاق الترددي. يرفض SDK رفع الحد أو استجابة FairPlay محدودة بلا الوصف المطلوب. يجب على التكاملات الأخرى تنفيذ العقد نفسه قبل تفعيل الخيار.

خيارات SDK الأصلية

يقبل Apple Universal Player 1.0.0-beta.1 القيمة mobileMaximumHeight: 1080 ويطبقها على فئة الهاتف الأصلية فقط. يجب أن تعيد نقطة النهاية قائمة رئيسية مفلترة تُفحص قبل تحميل الوسائط. يقبل Android 1.0.0-beta.1 القيمة mobileMaximumHeight = 1080 ضمن WidevineCapabilities.playbackCapabilities؛ استخدم clientPlatform = "android" للهواتف وandroid-tablet أو android-tv صراحة للفئات الأخرى. طبّق حد الإمكانات دون اتصال المناظر على التنزيلات الجديدة. تبقى التنزيلات الحالية محفوظة.

التحقق من التكامل

جهّز مصدرًا يضم 1080p ودقات أقل إضافة إلى UHD، وتأكد من تشغيله عندما يكون الحد غير مضبوط.
فعّل 1080 على هاتف. افحص حد التفويض والقائمة الرئيسية المفلترة وقائمة Auto/الاختيار اليدوي وأبعاد الفيديو بعد فك الترميز. يجب ألا يتجاوز أي خيار مسموح 1080p.
اختبر الانتقال وتغيير الجودة والصوت والترجمة والإعلانات والانتقال إلى العنصر التالي. أوقف التشغيل وتأكد من تحرير الجلسة.
استخدم الخيار نفسه على حاسوب وجهاز لوحي: يجب ألا يخفض حد الهاتف فقط حدهما. تبقى قيود السياسة أو الجهاز الحالية سارية.

حد الدقة لا يضبط معدل البت ولا يضمن وفرًا ثابتًا. إذا وجب مقاومة تعديل طلبات المتصفح، فطبّق القاعدة في الخادم الخلفي الموثوق وسياسة DRM المطابقة. لا تعتبر تلميح الجهاز دليلًا. إذا لم توجد نسخ مؤهلة، يجب إرجاع خطأ وعدم الرجوع بصمت إلى UHD.

عناصر ملء الشاشة المتسقة في iPhone Safari#

يحافظ Web SDK 1.2.0-beta.4 على عناصر Web Player عند ملء الشاشة، بما فيها صفحة إعلانات PHP. يستخدم iPhone ملء شاشة العنصر عند دعمه، أو يوسّع المشغل داخل الصفحة. قد تبقى أشرطة المتصفح ظاهرة. لا ينتقل إلى مشغل الفيديو الخاص بـ iPhone. استخدم قائمة الإعدادات نفسها للجودة ولغات الصوت والترجمة في كل منصة.

تعرض خيارات الصوت والترجمة حالة المسارات الحالية وتُحدّث بعد تطبيق HLS الأصلي للتغيير. يحفظ إيقاف CC ثم تشغيله آخر لغة ترجمة مختارة. تبقى للإعلان عناصر مستقلة أثناء الفاصل، وتعود عناصر المحتوى عند استئناف التشغيل.

اختبار الجودة واللغات والإعلانات#

ابدأ التشغيل بلمسة أو نقرة فعلية. تبقى قواعد التشغيل التلقائي والصوت الخاصة بالمتصفح سارية.
افتح الإعدادات وافحص الجودة والصوت والترجمة الحالية. يستخدم Auto التدرج المسموح، ولا يستطيع الاختيار اليدوي رفع حد التفويض.
غيّر لغة الصوت وحدد لغة الترجمة ثم أوقف CC وشغّله. تأكد من مطابقة التسميات للمسارات النشطة وحفظ تفضيل لغة الترجمة.
ادخل ملء الشاشة في iPhone Safari وEdge. يحتفظ Web Player بعناصره المشتركة؛ قد يتوسع iPhone داخل الصفحة مع بقاء أشرطة المتصفح.
إذا استخدمت الإعلانات، اختبر الفواصل قبل المحتوى وأثناءه وبعده مع تغيير الجودة. توفر صفحة إعلانات PHP أداة اختبار. الإعلانات التوضيحية المدمجة وGoogle IMA وضعان منفصلان؛ تحقق من تحميل الخدمة المختارة في كل متصفح مدعوم.

لخيار العرض النطاق الترددي، راجع حد 1080p الاختياري للهواتف فقط. اتركه غير مضبوط للحفاظ على UHD الحالي. لا يحدد حد الدقة معدل بت ثابتًا ولا يضمن نسبة توفير.