Comment intégrer un lecteur vidéo HTML5 avec protection DRM ?

Inclure VideoJS dans l'en-tête :

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

Vous pouvez également utiliser l'autre thème en fonction du style de votre site web.

Nous vous recommandons ici un outil de génération de skins VideoJS qui vous permet de personnaliser l'apparence du lecteur. https://codepen.io/heff/pen/EarCt

Intégrer VideoJS :

Note: Pour iOS, veuillez ajouter une balise div avec l'identifiant xvast_ios_media_url, masquer cette balise, puis y insérer l'URL de la vidéo. Xvast reconnaîtra automatiquement la balise et demandera à l'utilisateur s'il souhaite lire la vidéo. Exemple :

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

Notes relatives à l'URL des médias dans la dernière version de Xvast pour iOS :

Pour que vos clients puissent lire vos vidéos sur iOS, votre lien doit comporter les caractéristiques suivantes, précédées de _P. Par exemple, le lien doit contenir _P.mp4, _P.mp3 ou _P.pdf (sans distinction de casse). Il doit également contenir xvast. Vous pouvez inclure l'une de ces caractéristiques à n'importe quel endroit du lien de téléchargement ; Xvast pour iOS reconnaîtra alors et prendra en charge les téléchargements.

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

Code JavaScript :

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

La méthode suivante fournit une référence pour obtenir plus d'informations, notamment les informations de licence (nombre d'ouvertures et date d'expiration) ; vous pouvez obtenir ces informations en fonction de vos besoins.

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