Cách nhúng video được bảo vệ bằng DRM-X 5.0 vào trình phát video HTML5

Trình phát tùy chỉnh với Video.js

Sử dụng Video.js và JavaScript nếu bạn muốn tùy chỉnh giao diện trình phát, điều khiển phát lại hoặc quy trình cấp phép.

Bao gồm Video.js trong phần 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" />

Bạn cũng có thể sử dụng giao diện khác tùy theo phong cách trang web của mình.

Ở đây chúng tôi đề xuất một công cụ tạo giao diện VideoJS, bạn có thể tùy chỉnh giao diện trình phát. https://codepen.io/heff/pen/EarCt

Hỗ trợ phát lại trên iOS

Ghi chú: Đối với iOS, vui lòng thêm một thẻ div với id là zjget_ios_media_url, ẩn thẻ div đó đi, viết URL video vào trong thẻ div, ZJGet sẽ tự động nhận diện thẻ và hỏi người dùng có muốn phát video này hay không. Ví dụ:

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

Yêu cầu URL video trên iOS

Nếu bạn muốn khách hàng của mình xem video trên iOS, liên kết tải xuống phải có các đặc điểm sau, bắt đầu bằng _P. Ví dụ: liên kết chứa _P.mp4, _P.webm hoặc _P.mp3 (không phân biệt chữ hoa chữ thường). Hoặc chứa zjget. Bạn có thể thêm một trong những đặc điểm này vào bất kỳ vị trí nào trên liên kết tải xuống, sau đó ZJGet dành cho iOS sẽ nhận diện và hỗ trợ tải xuống.

<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>

Mã 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>

Phương pháp sau đây cung cấp tài liệu tham khảo để lấy thêm thông tin, bao gồm thông tin giấy phép (Số lần mở và Ngày hết hạn), bạn có thể lấy thông tin này theo yêu cầu của mình.

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