Bagaimana Cara Menyematkan Video yang Dilindungi DRM-X 5.0 di Pemutar Video HTML5

Pemutar Kustom dengan Video.js

Gunakan Video.js dan JavaScript jika Anda ingin menyesuaikan antarmuka pemutar, kontrol pemutaran, atau proses akuisisi lisensi.

Sertakan Video.js di bagian 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" />

Anda juga dapat menggunakan tema lain sesuai dengan gaya situs web Anda.

Di sini kami merekomendasikan alat pembuatan skin VideoJS, Anda dapat menyesuaikan skin pemutar video. https://codepen.io/heff/pen/EarCt

Mendukung Pemutaran di iOS

Catatan: Untuk iOS, silakan tambahkan div dengan nilai id zjget_ios_media_url, sembunyikan div tersebut, tulis URL video di dalam div, ZJGet akan secara otomatis mengenali tag tersebut, dan memberi tahu pengguna apakah ingin memutar video ini. Contohnya:

<div id="zjget_ios_media_url" style="display: none;">https://www.drm-x.com/download/drmx5/HolyForever-ChrisTomlin_P.mp4</div>

Persyaratan URL Video untuk iOS

Jika Anda ingin pelanggan Anda memutar video Anda di iOS, Anda harus menyertakan karakteristik berikut pada tautan, dengan awalan _P. Misalnya, tautan berisi _P.mp4, _P.webm, atau _P.mp3, yang tidak peka terhadap huruf besar/kecil. Atau berisi zjget. Anda dapat menyertakan salah satu karakteristik ini di lokasi mana pun pada tautan unduhan, kemudian ZJGet untuk iOS akan mengenali dan mendukung unduhan tersebut.

<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 ZJGet, It Will remind the user to open the protected files in ZJGet browser,
    // and remind the user to download ZJGet browser.
    if(navigator.userAgent.indexOf("ZJGet") == -1){
      document.write('Please open the protected files in ZJGet browser. Download ZJGet');
    }else{
      // Use HTML5 video tag;
      // ZJGet will automatically change the video tag's ID,
      // here zjget_player will automatically become zjget_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="zjget_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/drmx5/HolyForever-ChrisTomlin_P.mp4" type="video/mp4"></video>);
    }
  </script>
</div>

Kode Javascript:

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

      // Get HTML5 player
      // ZJGet will automatically change zjget_player become zjget_player_html5_api;
      myVid=document.getElementById("zjget_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('zjget');
	// Check the mobile phone network type
      if(navigator.userAgent.indexOf("Mobile ZJGet") > 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>

Metode berikut memberikan referensi untuk mendapatkan informasi lebih lanjut, termasuk informasi lisensi (Jumlah Pembukaan dan Tanggal Kedaluwarsa), Anda dapat memperoleh informasi ini sesuai kebutuhan Anda.

function supportType(e,vidType,codType){
  myVid=document.getElementById("zjget_player_html5_api");
  isSupp=myVid.canPlayType("zjget");
  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;
    }
  }
}