HTML5 비디오 플레이어를 삽입하는 방법은 무엇입니까?

플레이어를 크게 수정할 필요가 없다면 아래 코드를 사용하여 동영상을 삽입해 주세요.

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

플레이어를 수정해야 하는 경우 다음 소개를 참조하세요.

헤드에 VideoJS를 포함합니다:


<!--VideoJS 라이브러리 포함-->
<link rel="stylesheet" type="text/css" href="css/video-js.css" />
<script src="js/video.js" type="text/javascript" charset="utf-8"></script>

<!--VideoJS 스킨 사용-->
<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를 포함합니다. 다운로드 링크의 어느 위치에나 이러한 특성 중 하나를 포함하면 iOS용 Xvast가 다운로드를 인식하고 지원합니다.

<div id="LoadingText" style="display: none;" align="center">
  라이센스 페이지를 얻기 위해 연결하는 중입니다...
</div>
<div id="cellular_button" align="center"></div>
<div align="center">
  <script type="text/javascript">
    // 현재 브라우저를 감지합니다(Xvast가 아닌 경우). 사용자에게 Xvast 브라우저에서 보호된 파일을 열도록 알려줍니다.
 // 사용자에게 Xvast 브라우저를 다운로드하도록 알려줍니다.
    if(navigator.userAgent.indexOf("Xvast") == -1){
      document.write('Xvast 브라우저에서 보호된 파일을 열어주세요. Xvast 다운로드');
    }else{
      // HTML5 비디오 태그를 사용합니다.
      // Xvast는 비디오 태그의 ID를 자동으로 변경합니다.
      // 여기서 xvast_player는 자동으로 xvast_player_html5_api가 됩니다.
      // src 속성을 사용하여 비디오 URL을 지정합니다.
      // VideoJS 스타일을 사용하는 class="video-js".
      // 데이터 설정에서 "autoplay"를 사용합니다:true; 자동 재생 제어를 추가합니다.
      // 데이터 설정에서 "playbackRates"를 사용할 수 있습니다: [0.5, 0.7, 1, 1.5, 2, 3, 4] 속도 제어 기능을 추가합니다.;
      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") { // 페이지 완료 후 실행，필수;

      // HTML5 플레이어 가져오기
      // Xvast는 자동으로 xvast_player를 xvast_player_html5_api로 변경합니다.
      myVid=document.getElementById("xvast_player_html5_api");

      // 플레이어가 반환한 세부 정보를 가져옵니다. 

      // 사용자가 라이센스를 얻어야 하는 경우 URL이 반환됩니다.

      // 그렇지 않으면 보호된 파일 정보 및 라이센스 정보의 세부 정보를 반환합니다.
      isSupp=myVid.canPlayType('xvast');
	// 휴대폰 네트워크 종류를 확인합니다.
      if(navigator.userAgent.indexOf("Mobile Xvast") > 0){
		var con = window.navigator.connection;
		var network = con.type; // 휴대폰 네트워크:셀룰러; 와이파이:와이파이
		// 휴대전화가 모바일 네트워크나 Wi-Fi를 사용하고 있는지 확인하세요.
		if (network == "cellular"){ // 휴대폰이 모바일 네트워크를 사용하는 경우 페이지에 라이센스를 얻기 위한 버튼을 추가해야 합니다.
			document.getElementById("cellular_button").innerHTML = '<button style="height: 50px" class="m_g_b" onClick="supportType(event,\'video/ogg\',\'theora, vorbis\')">보호된 파일 재생 (2번 클릭)</button>';
		}
	  }
      // 반환 메시지에 포함된 정보에 URL이 포함된 경우

      // 라이센스 취득이 필요합니다.
      if(isSupp.indexOf("http")>0){
        // 단지 팁입니다. 필수는 아닙니다.
        document.getElementById("LoadingText").style.display='block';
        // 하위 문자열을 사용하여 라이센스를 얻기 위한 URL을 캡처합니다.
        licURL = isSupp.substring(isSupp.indexOf("http"));
        // 라이센스 확인 및 취득을 위해 라이센스 취득 페이지로 리다이렉트합니다.
        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){

      // 오픈 카운트 가져오기
      var openCount=isSupp.substring(isSupp.indexOf(":"),isSupp.indexOf(";"));

      // 라이센스 만료 날짜를 가져옵니다.
      var ft=isSupp.substring(isSupp.indexOf(";")+1);
      var ut = filetime_to_unixtime(ft);
      var d = new Date(ut * 1000);
      e.target.parentNode.innerHTML ="오픈 카운트" + openCount + ", 만료일:" + d.toLocaleString();
      return;
    }

    if(isSupp.indexOf("Error ID = 3")>0){
      e.target.parentNode.innerHTML ="라이센스가 만료되었습니다. 보호된 파일을 다시 열어 새 라이센스를 얻으십시오.";
      return;
    }
  }
}