كيفية تضمين مشغل فيديو HTML5 مع حماية إدارة الحقوق الرقمية (DRM)؟

يستخدم نظام DRM-X 4.0 من Haihaisoft، المخصص لفيديوهات HTML5، وسم HTML5 Video. ويمكن لمزودي المحتوى تضمين الفيديوهات بسهولة باستخدام وسم HTML5 Video القياسي، وباستخدام مشغلات HTML5 الشهيرة مثل VideoJS، بالإضافة إلى استخدام JavaScript للتفاعل مع مشغل HTML5.

المزيد من الدروس التعليمية

قم بتنزيل نموذج التعليمات البرمجية

كيفية تضمين مشغل فيديو HTML5 مع حماية إدارة الحقوق الرقمية (DRM)؟

إذا لم تكن بحاجة إلى تعديل المشغل بشكل كبير، فيرجى استخدام الكود أدناه لتضمين الفيديو.

<div id="Xvast_Video_URL" style="display: none;">https://www.drm-x.com/download/DRMX4/JesusFilm_cn_P.mp4</div>
<script type="text/javascript" src="https://www.xvast.com/dist/js/embedPlayer.js"></script>
<script type="text/javascript" src="https://www.xvast.com/dist/js/video.js"></script>
<script type="text/javascript" src="https://www.xvast.com/dist/wordpress/XvastVideoJSPlayer.js"></script>

إذا كنت بحاجة إلى تعديل المشغل، فيرجى الرجوع إلى المقدمة التالية.

قم بتضمين VideoJS في قسم <head>:

<!--Include VideoJS library-->
<link rel="stylesheet" type="text/css" href="css/video-js.css" />
<script src="js/video.js" type="text/javascript" charset="utf-8"></script>

<!--Using VideoJS skin-->
<link rel="stylesheet" type="text/css" href="css/skin/TechSkin-skin.css" />

يمكنك أيضًا استخدام التصميم الآخر وفقًا لنمط موقعك الإلكتروني.

نوصي هنا بأداة إنشاء واجهات مستخدم VideoJS، حيث يمكنك تخصيص واجهة المشغل. https://codepen.io/heff/pen/EarCt

تضمين VideoJS:

ملحوظة: بالنسبة لنظام iOS، يُرجى إضافة عنصر div يحمل المعرّف xvast_ios_media_url، ثم إخفاء هذا العنصر، وكتابة رابط الفيديو داخله. سيتعرف Xvast تلقائيًا على الوسم، وسيسأل المستخدم عما إذا كان يرغب في تشغيل الفيديو. على سبيل المثال:

<div id="xvast_ios_media_url" style="display: none;">https://www.drm-x.com/download/drmx4/JesusFilm_cn_P.mp4</div>

ملاحظات حول رابط الوسائط في أحدث إصدار من Xvast لنظام iOS:

إذا كنت ترغب في أن يتمكن عملاؤك من تشغيل مقاطع الفيديو الخاصة بك على نظام iOS، فيجب أن يتضمن الرابط الخصائص التالية، مع إضافة اللاحقة _P. على سبيل المثال، يجب أن يحتوي الرابط على _P.mp4 أو _P.mp3 أو _P.pdf، بغض النظر عن حالة الأحرف. أو يجب أن يحتوي على xvast. يمكنك تضمين إحدى هذه الخصائص في أي مكان في رابط التنزيل، وسيتعرف عليها Xvast لنظام iOS ويدعم التنزيلات.

<div id="LoadingText" style="display: none;" align="center">
  Please wait, connecting to obtain license page...
</div>
<div id="cellular_button" align="center"></div>
<div align="center">
  <script type="text/javascript">
    // Detecting current browser, if not Xvast, It Will remind the user to open the protected files in Xvast browser,
    // and remind the user to download Xvast browser.
    if(navigator.userAgent.indexOf("Xvast") == -1){
      document.write('Please open the protected files in Xvast browser. Download Xvast');
    }else{
      // Use HTML5 video tag;
      // Xvast will automatically change the video tag's ID,
      // here xvast_player will automatically become xvast_player_html5_api;
      // Use src attribute specifies video URL;
      // class="video-js" using VideoJS style.
      // In data-setup, use "autoplay":true; add auto play control;
      // In data-setup, you can use "playbackRates": [0.5, 0.7, 1, 1.5, 2, 3, 4] add control speed function.;
      document.write('<'video id="xvast_player" controls="controls" class="video-js" data-setup=\' {"playbackRates": [0.5, 0.7, 1, 1.2, 1.5, 2], "autoplay":false, "width": 856, "height": 480 }\'><'source src="https://www.drm-x.com/download/drmx4/JesusFilm_en_P.mp4" type="video/mp4"></video>);
    }
  </script>
</div>

كود جافا سكريبت:

<script type="text/javascript">
  document.onreadystatechange = function() {
    if (document.readyState == "complete") { // After the page is complete, and execute,Required;

      // Get HTML5 player
      // Xvast will automatically change xvast_player become xvast_player_html5_api;
      myVid=document.getElementById("xvast_player_html5_api");

      // Get detail information return by the player, 

      // if user need to obtain a license, It will return a URL;

      // Otherwise, It will return the details of the protected file information and the license information.
      isSupp=myVid.canPlayType('xvast');
	// Check the mobile phone network type
      if(navigator.userAgent.indexOf("Mobile Xvast") > 0){
		var con = window.navigator.connection;
		var network = con.type; // Mobile phone network:cellular; wifi:wifi
		// Check whether your phone is using a mobile network or wifi
		if (network == "cellular"){ // If the phone is using a mobile network, you need to add a button to get a license to the page
			document.getElementById("cellular_button").innerHTML = '<'button style="height: 50px" class="m_g_b" onClick="supportType(event,\'video/ogg\',\'theora, vorbis\')">Play Protected file (Click 2 times)'<'/button>;
		}
	  }
      // If the information contained in the return message contains URL,

      // it is required to obtain a license.
      if(isSupp.indexOf("http")>0){
        // Just a tips, non - must;
        document.getElementById("LoadingText").style.display='block';
        // Using substring to capture a URL to obtain license;
        licURL = isSupp.substring(isSupp.indexOf("http"));
        // Redirecting to obtain license page to verify and obtain license.
        window.location.href = licURL;
      }
    }
};
</script>

توفر الطريقة التالية مرجعًا للحصول على مزيد من المعلومات، بما في ذلك معلومات الترخيص (عدد مرات الفتح وتاريخ انتهاء الصلاحية)، ويمكنك الحصول على هذه المعلومات وفقًا لمتطلباتك.

function supportType(e,vidType,codType){
  myVid=document.getElementById("xvast_player_html5_api");
  isSupp=myVid.canPlayType("xvast");
  myVid.play();
  licURL = isSupp.substring(isSupp.indexOf("http"));

  if(isSupp.indexOf("http")>0){
    window.location.href = licURL;
  }else{
    if(isSupp.indexOf("License")>0){

      // Get open count
      var openCount=isSupp.substring(isSupp.indexOf(":"),isSupp.indexOf(";"));

      // Get the license expiration date
      var ft=isSupp.substring(isSupp.indexOf(";")+1);
      var ut = filetime_to_unixtime(ft);
      var d = new Date(ut * 1000);
      e.target.parentNode.innerHTML ="Open Count" + openCount + ", Expiration date:" + d.toLocaleString();
      return;
    }

    if(isSupp.indexOf("Error ID = 3")>0){
      e.target.parentNode.innerHTML ="License is expired, Please Re open the protected file to obtain a new license.";
      return;
    }
  }
}

دروس أخرى حول DRM-X 4.0

فيديو تعريفي لـ DRM-X 4.0

سنعرض لكم من خلال الفيديو شرحاً عملياً لكيفية استخدام منصة DRM-X 4.0، وكيفية ضبط الإعدادات قبل التشفير، وكيفية تشفير الفيديو. كما سنوضح لكم كيفية تشغيل الفيديو المشفر.

شاهد الآن

شرح تشفير صفحات الويب باستخدام DRM-X 4.0 HTML

مع نظام DRM-X 4.0، يتم تشفير صفحات الويب، بما في ذلك ملفات HTML وCSS وJavaScript والصور، والتحكم في من يمكنه عرض محتوى موقعك. كما يمنع النسخ، ويحول دون الطباعة أو التقاط لقطات الشاشة، وينهي صلاحية المحتوى عندما يصبح غير قابل للعرض.

شاهد الآن

برنامج Xvast التعليمي عبر الفيديو لنظام التشغيل Windows

نعرض لكم من خلال الفيديو عرضًا توضيحيًا لكيفية تنزيل متصفح Xvast وتثبيته واستخدامه، وكيفية فتح الملفات المشفرة، وكيفية حل المشكلات المتعلقة بالاستخدام.

شاهد الآن

شرح تشفير الفيديو باستخدام DRM-X 4.0

شاهد الآن

تكامل DRM-X 4.0 مع ووردبريس

تتيح لك خاصية دمج صفحة تسجيل دخول مخصصة إمكانية تشغيل المحتوى المحمي من خلال موقعك الإلكتروني. عند طلب العميل لمحتوى محمي، ستظهر له صفحة تسجيل دخول مخصصة على موقعك. بعد إدخال اسم المستخدم وكلمة المرور لحسابه على موقعك، سيحصل على ترخيص تشغيل الملف المحمي فورًا. يتطلب ذلك إنشاء صفحة تسجيل دخول جديدة خاصة بنظام إدارة الحقوق الرقمية (DRM).

شاهد الآن

إعدادات الأمان DRM-X 4.0

عند استخدام منصة DRM-X 4.0، هناك أمرٌ يجب الانتباه إليه. لتعزيز الحماية، يُرجى تحديد مجموعة من الخيارات الضرورية لمنع القرصنة. من المهم جدًا ضبط هذه الإعدادات في البداية.

شاهد الآن