¿Cómo integrar un reproductor de vídeo HTML5 con protección DRM?

Incluir VideoJS en el encabezado:

<!--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" />

También puedes utilizar otra skin según el estilo de tu sitio web.

Aquí recomendamos una herramienta de generación de máscaras VideoJS, con la que puedes personalizar la máscara del reproductor. https://codepen.io/heff/pen/EarCt

Incrustar VideoJS:

Nota: Para iOS, agregue un div con el valor de id de zjget_ios_media_url, oculte el div, escriba la URL del video en el div, ZJGet reconocerá automáticamente la etiqueta y le preguntará al usuario si desea reproducir este video, como por ejemplo:

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

Notas de URL de medios de la última versión de ZJGet para iOS:

Si desea que sus clientes reproduzcan sus videos en iOS, debe incluir las siguientes características en el enlace, con _P. Por ejemplo, el enlace puede contener _P.mp4, _P.webm o _P.mp3, que no distingue entre mayúsculas y minúsculas. O puede incluir zjget. Puede incluir una de estas características en cualquier lugar del enlace de descarga para que ZJGet para iOS reconozca y admita las descargas.

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

Código 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>

El siguiente método proporciona una referencia para obtener más información, incluida la información de la licencia (número de apertura y fecha de vencimiento), puede obtener esta información según sus requisitos.

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