Xvast의 HTML5 DRM 비디오 플레이어를 Wordpress에 포함하려면 몇 가지 코드만 추가하면 됩니다.
플레이어를 크게 수정할 필요가 없다면 아래 코드를 사용하여 동영상을 삽입해 주세요.
<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>
플레이어를 수정해야 하는 경우 다음 소개를 참조하세요.
참고: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가 다운로드를 인식하고 지원합니다.
웹사이트의 제어판에서 게시물이나 페이지를 추가하고, 편집기에서 편집 보기를 "텍스트"로 전환하고, 코드를 편집기에 복사한 후 게시 버튼을 클릭하세요. 필요에 따라 CSS 코드를 수정할 수 있습니다(XvastPlay.css).
1. Video-js.css/video.js는 VideoJS 라이브러리 파일입니다. XvastPlayer.css는 HTML5 비디오 플레이어 추가 스타일 파일입니다.
2. 플레이어 버튼을 추가하세요. 사용자가 아직 라이선스를 취득하지 않은 경우 플레이어 버튼이 표시됩니다. 사용자가 클릭하면 JS 이벤트 점프가 실행되어 라이센스 페이지를 가져옵니다. 필요에 따라 XvastPlayer.css를 수정할 수 있습니다.
3. iOS에서 온라인 플레이 또는 다운로드 플레이를 위한 영상 URL입니다.
4. 이 부분은 HTML5 플레이어(VideoJS) 코드입니다. JS를 사용하여 사용자의 브라우저가 Xvast인지 감지하고, 그렇지 않은 경우 사용자에게 Xvast를 사용하여 URL에 액세스하라는 메시지를 표시합니다.
5. 이 부분은 플레이어의 제어 버튼으로, JS 코드를 통해 플레이어의 빨리 감기, 되감기, 재생, 일시 중지 및 다시 재생을 제어합니다. (필요하시면 사용하셔도 됩니다)
6. Xvast 온라인 플레이어의 라이센스 감지 관련 코드.
샘플 코드 다운로드:www.xvast.com/XvastPlayer/Xvast-demo.html
(JS 및 CSS 파일을 다운로드하여 자체 서버에 배치할 수 있습니다)
<link rel="stylesheet" type="text/css" href="https://www.xvast.com/XvastPlayer/css/video-js.css" />
<link rel="stylesheet" type="text/css" href="https://www.xvast.com/XvastPlayer/css/XvastPlay.css" />
<script src="https://www.xvast.com/XvastPlayer/js/video.js" type="text/javascript" charset="utf-8"></script>
<!--<link rel="stylesheet" type="text/css" href="https://www.xvast.com/XvastPlayer/css/skin/TechSkin-skin.css" />-->
<div id="LoadingText" style="display: none;" align="center">
라이센스 페이지를 얻기 위해 연결하는 중입니다...
</div>
<div align="center" style="margin-top: 10px">
<div id="playerButton" style="display: none;">
<button onclick="supportType(event,'video/ogg','theora, vorbis')" class="playerButton" type="button">라이센스 받기...</button>
</div>
<p><a href="https://www.drm-x.com/download/drmx4/JesusFilm_en_P.mp4">iOS에서 온라인으로 MP4 재생</a></p>
<script type="text/javascript">
if(navigator.userAgent.indexOf("Xvast") == -1){
document.write("Xvast 브라우저에서 보호된 파일을 열어주세요. Xvast 다운로드");
}else{
document.write('<video id="xvast_player" controls="controls" src="https://www.drm-x.com/download/drmx4/JesusFilm_en_P.mp4" class="video-js" data-setup=\'{ "autoplay":false, "playbackRates": [0.5, 0.7, 1, 1.5, 2, 3, 4], "width": 856, "height": 480 }\'>');
}
</script>
</div>
<div id="buttonbar" align="center">
<button id="restart" onclick="restart();">[]</button><button id="rew" onclick="skip(-5)"><<</button><button id="play" onclick="vidplay()">></button><button id="fastFwd" onclick="skip(5)">>></button>
</div>
<script src="https://www.xvast.com/XvastPlayer/js/XvastPlay.js" type="text/javascript" charset="utf-8"></script>