DRM 보호 기능이 있는 HTML5 비디오 플레이어를 삽입하는 방법은 무엇인가요?

Head 섹션에 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의 경우, `xvast_ios_media_url`이라는 ID 값을 가진 `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가 포함되어야 합니다. 다운로드 링크의 어느 위치에든 이러한 형식 중 하나를 포함하면 iOS용 Xvast가 이를 인식하고 다운로드를 지원합니다.

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

자바스크립트 코드:

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