DRM 保護付きの HTML5 ビデオ プレーヤーを埋め込む方法

ヘッドにVideoJSをインクルードします:

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

ウェブサイトのスタイルに応じて他のスキンを使用することもできます。

ここでは、プレーヤーのスキンをカスタマイズできる VideoJS スキン生成ツールをお勧めします。 https://codepen.io/heff/pen/EarCt

VideoJSを埋め込む:

注記： iOS の場合は、id 値が xvast_ios_media_url の div を追加し、div を非表示にして、div にビデオの URL を記述します。Xvast はタグを自動的に認識し、ユーザーにこのビデオを再生するかどうかを尋ねます。例:

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

iOS 向け Xvast の最新バージョンのメディア URL 注記:

iOSで動画を再生してもらうには、リンクに_Pを含む以下の文字を含める必要があります。例えば、リンクには_P.mp4、_P.mp3、または_P.pdf（大文字と小文字は区別されません）が含まれます。または、xvastが含まれます。ダウンロードリンクの任意の場所にこれらの文字のいずれかを含めることで、Xvast for iOSが認識し、ダウンロードをサポートします。

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

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>

次の方法では、ライセンス情報 (オープンカウントと有効期限) を含む詳細情報を取得するためのリファレンスが提供されており、必要に応じてこの情報を取得できます。

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