Wie fügt man einen HTML5 - Videoplayer mit DRM - Schutz ein?

Wenn Sie den Player nicht tiefgreifend modifizieren müssen, verwenden Sie bitte den folgenden Code, um das Video einzubetten.

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

Wenn Sie den Player ändern müssen, lesen Sie bitte die folgende Einführung.

---

Fügen Sie VideoJS in den Kopf ein:

<!--Schließen Sie die VideoJS-Bibliothek ein-->
<link rel="stylesheet" type="text/css" href="css/video-js.css" />
<script src="js/video.js" type="text/javascript" charset="utf-8"></script>

<!--Verwenden von VideoJS-Skin-->
<link rel="stylesheet" type="text/css" href="css/skin/TechSkin-skin.css" />
                            
                        

Sie können auch den anderen Skin entsprechend dem Stil Ihrer Website verwenden.

Hier empfehlen wir ein VideoJS-Skin-Generierungstool, mit dem Sie den Player-Skin anpassen können. https://codepen.io/heff/pen/EarCt

VideoJS einbetten:

Hinweis:Für iOS fügen Sie bitte ein Div mit dem ID-Wert xvast_ios_media_url hinzu, blenden Sie das Div aus, schreiben Sie die Video-URL in das Div. Xvast erkennt das Tag automatisch und fordert Sie dazu auf der Benutzer, ob dieses Video abgespielt werden soll. wie zum Beispiel:

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

Hinweise zur Medien-URL der neuesten Version von Xvast für iOS:

Wenn Sie möchten, dass Ihre Kunden Ihre Videos auf iOS abspielen, müssen Sie im Link die folgenden Merkmale mit _P aufweisen. Der Link enthält beispielsweise _P.mp4, _P.mp3 oder _P.pdf, wobei die Groß-/Kleinschreibung nicht berücksichtigt wird. Oder enthält xvast. Sie können eines dieser Merkmale an einer beliebigen Stelle im Download-Link einfügen, dann erkennt Xvast für iOS Downloads und unterstützt sie.

<div id="LoadingText" style="display: none;" align="center">
  Bitte warten, Verbindung herstellen, um die Lizenzseite zu erhalten ...
</div>
<div id="cellular_button" align="center"></div>
<div align="center">
  <script type="text/javascript">
    // Erkennt den aktuellen Browser, wenn nicht Xvast, und erinnert den Benutzer daran, die geschützten Dateien im Xvast-Browser zu öffnen,
 // und erinnert den Benutzer daran, den Xvast-Browser herunterzuladen.
    if(navigator.userAgent.indexOf("Xvast") == -1){
      document.write('Bitte öffnen Sie die geschützten Dateien im Xvast-Browser. Xvast herunterladen');
    }else{
      
            // HTML5-Video-Tag verwenden;
            // Xvast ändert automatisch die ID des Video-Tags.
            // hier wird xvast_player automatisch zu xvast_player_html5_api;
            // src-Attribut verwenden, um die Video-URL anzugeben;
            // class="video-js" im VideoJS-Stil.
            // Im Daten-Setup „autoplay“ verwenden:true; automatische Wiedergabesteuerung hinzufügen;
            // Im Daten-Setup können Sie „playbackRates“ verwenden: [0,5, 0,7, 1, 1,5, 2, 3, 4], um die Funktion zur Steuerung der Geschwindigkeit hinzuzufügen.;
        
      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") { 
            // Nachdem die Seite fertig ist, führen Sie sie aus，Erforderlich;

            // Holen Sie sich den HTML5-Player
            // Xvast ändert automatisch xvast_player in xvast_player_html5_api;
        
      myVid=document.getElementById("xvast_player_html5_api");

      
            // Vom Spieler zurückgegebene Detailinformationen abrufen, 

            // Wenn der Benutzer eine Lizenz erwerben muss, wird eine URL zurückgegeben;

            // Andernfalls werden die Details der geschützten Dateiinformationen und die Lizenzinformationen zurückgegeben.
        
      isSupp=myVid.canPlayType('xvast');
	// Überprüfen Sie den Mobilfunknetztyp
      if(navigator.userAgent.indexOf("Mobile Xvast") > 0){
		var con = window.navigator.connection;
		var network = con.type; // Mobilfunknetz:Mobilfunk; WLAN: WLAN
		// Überprüfen Sie, ob Ihr Telefon ein Mobilfunknetz oder WLAN nutzt
		if (network == "cellular"){ // Wenn das Telefon ein Mobilfunknetz nutzt, müssen Sie eine Schaltfläche hinzufügen, um eine Lizenz für die Seite zu erhalten
			document.getElementById("cellular_button").innerHTML = '<button style="height: 50px" class="m_g_b" onClick="supportType(event,\'video/ogg\',\'theora, vorbis\')">Geschützte Datei abspielen (2 Mal klicken)</button>';
		}
	  }
      
            // Wenn die in der Antwortnachricht enthaltenen Informationen eine URL enthalten,

            // Es ist erforderlich, eine Lizenz zu erhalten.
        
      if(isSupp.indexOf("http")>0){
        // Nur ein Tipp, kein Muss;
        document.getElementById("LoadingText").style.display='block';
        // Teilzeichenfolge verwenden, um eine URL zu erfassen und eine Lizenz zu erhalten;
        licURL = isSupp.substring(isSupp.indexOf("http"));
        // Weiterleitung zur Seite „Lizenz erhalten“, um die Lizenz zu überprüfen und zu erhalten.
        window.location.href = licURL;
      }
    }
}
</script>

Die folgende Methode bietet eine Referenz, um weitere Informationen zu erhalten, einschließlich der Lizenzinformationen (Offene Anzahl und Ablaufdatum). Sie können diese Informationen entsprechend Ihren Anforderungen abrufen.

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

      // Anzahl der offenen Stellen abrufen
      var openCount=isSupp.substring(isSupp.indexOf(":"),isSupp.indexOf(";"));

      // Das Ablaufdatum der Lizenz abrufen
      var ft=isSupp.substring(isSupp.indexOf(";")+1);
      var ut = filetime_to_unixtime(ft);
      var d = new Date(ut * 1000);
      e.target.parentNode.innerHTML ="Offene Zählung" + openCount + ", Verfallsdatum:" + d.toLocaleString();
      return;
    }

    if(isSupp.indexOf("Error ID = 3")>0){
      e.target.parentNode.innerHTML ="Die Lizenz ist abgelaufen. Bitte öffnen Sie die geschützte Datei erneut, um eine neue Lizenz zu erhalten.";
      return;
    }
  }
}