Comment intégrer le lecteur vidéo html5?

Si vous n'avez pas besoin de modifier profondément le lecteur, veuillez utiliser le code ci-dessous pour intégrer la vidéo.

<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/fr/dist/js/embedPlayer.js"></script>
<script type="text/javascript" src="https://www.xvast.com/fr/dist/js/video.js"></script>
<script type="text/javascript" src="https://www.xvast.com/fr/dist/wordpress/XvastVideoJSPlayer.js"></script>

Si vous devez modifier le lecteur, veuillez vous référer à l'introduction suivante.

---

Inclure VideoJS dans la tête:

<!--Inclure la bibliothèque VideoJS-->
<link rel="stylesheet" type="text/css" href="css/video-js.css" />
<script src="js/video.js" type="text/javascript" charset="utf-8"></script>

<!--Utilisation de la peau VideoJS-->
<link rel="stylesheet" type="text/css" href="css/skin/TechSkin-skin.css" />
                            
                        

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

Ici, nous recommandons un outil de génération d’apparence VideoJS, vous pouvez personnaliser l’apparence du lecteur. https://codepen.io/heff/pen/EarCt

VideoJS intégré:

Note: Pour iOS, veuillez ajouter un div avec la valeur id de xvast_ios_media_url, masquer le div, écrire l'URL de la vidéo dans le div, Xvast reconnaîtra automatiquement le tag et invitera l'utilisateur à lire cette vidéo. tel que:

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

La dernière version de Xvast pour iOS multimédia indique:

Si vous souhaitez que vos clients lisent vos vidéos sur iOS, vous devez avoir les caractéristiques suivantes dans le lien, avec _P. Par exemple, le lien contient _P.mp4, _P.mp3 ou _P.pdf, sans distinction de casse. Ou contient xvast. Vous pouvez inclure l'une de ces caractéristiques à n'importe quel emplacement du lien de téléchargement, puis Xvast pour iOS reconnaît et prend en charge les téléchargements.

<div id="LoadingText" style="display: none;" align="center">
  Veuillez patienter, connexion pour obtenir la page de licence...
</div>
<div id="cellular_button" align="center"></div>
<div align="center">
  <script type="text/javascript">
    // Détecter le navigateur actuel, sinon Xvast, il rappellera à l’utilisateur d’ouvrir les fichiers protégés dans le navigateur Xvast,
    // et rappelez à l'utilisateur de télécharger le navigateur Xvast.
    if(navigator.userAgent.indexOf("Xvast") == -1){
      document.write('Veuillez ouvrir les fichiers protégés dans le navigateur Xvast. Download Xvast');
    }else{
      // Utilisez la balise vidéo HTML5;
      // Xvast changera automatiquement l'ID de la balise vidéo，
      // ici xvast_player deviendra automatiquement xvast_player_html5_api;
      // Utiliser l'attribut src spécifie l'URL de la vidéo;
      // class="video-js" en utilisant VideoJS style.
      // In data-setup, use "autoplay":true; ajouter un contrôle de lecture automatique;
      // In data-setup，you can use "playbackRates": [0.5, 0.7, 1, 1.5, 2, 3, 4] ajouter une fonction de vitesse de contrôle.;
      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>

Javascript Code:

<script type="text/javascript">
  document.onreadystatechange = function () {
    if (document.readyState == "complete") { // Une fois la page terminée, exécutez ， Obligatoire.;

      // Obtenir le lecteur HTML5
      // Xvast changera automatiquement xvast_player devenir xvast_player_html5_api;
      myVid=document.getElementById("xvast_player_html5_api");

      // Obtenir des informations détaillées de retour par le joueur, 

      // si l'utilisateur doit obtenir une licence, il retournera une URL;

      // Sinon, il retournera les détails des informations du fichier protégé et des informations de la licence.
      isSupp=myVid.canPlayType('xvast');
	// Vérifiez le type de réseau de téléphonie mobile
      if(navigator.userAgent.indexOf("Mobile Xvast") > 0){
		var con = window.navigator.connection;
		var network = con.type; // Réseau de téléphonie mobile: cellulaire; wifi: wifi

		// Vérifiez si votre téléphone utilise un réseau mobile ou wifi
		if (network == "cellular"){ // Si le téléphone utilise un réseau mobile, vous devez ajouter un bouton pour obtenir une licence sur la page.
			document.getElementById("cellular_button").innerHTML = '<button style="height: 50px" class="m_g_b" onClick="supportType(event,\'video/ogg\',\'theora, vorbis\')">Lire le fichier protégé (Cliquez 2 fois)</button>';
		}
	  }
      // Si les informations contenues dans le message de retour contiennent une URL,

      // il est nécessaire d'obtenir une licence.
      if(isSupp.indexOf("http")>0){
        // Juste un conseil, non indispensable;
        document.getElementById("LoadingText").style.display='block';
        // Utiliser une sous-chaîne pour capturer une URL afin d'obtenir une licence;
        licURL = isSupp.substring(isSupp.indexOf("http"));
        // Redirection pour obtenir une page de licence afin de vérifier et d’obtenir une licence.
        window.location.href = licURL;
      }
    }
}
</script>

La méthode suivante fournit une référence pour obtenir plus d'informations, y compris les informations de licence (Nombre de requêtes ouvertes 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){

      // Obtenez le compte ouvert
      var openCount=isSupp.substring(isSupp.indexOf(":"),isSupp.indexOf(";"));

      // Obtenir la date d'expiration de la licence
      var ft=isSupp.substring(isSupp.indexOf(";")+1);
      var ut = filetime_to_unixtime(ft);
      var d = new Date(ut * 1000);
      e.target.parentNode.innerHTML ="Nombre ouvert" + openCount + ", Date d'expiration:" + d.toLocaleString();
      return;
    }

    if(isSupp.indexOf("Error ID = 3")>0){
      e.target.parentNode.innerHTML ="La licence a expiré, veuillez ré-ouvrir le fichier protégé pour obtenir une nouvelle licence.";
      return;
    }
  }
}