How to embed HTML5 DRM Video player code in Wordpress for Xvast?

How to embed HTML5 DRM Video player code in Wordpress for Xvast?

To embed Xvast's HTML5 DRM video player in Wordpress, you just need to add some code.

If you don't need to deeply modify the player, please use the code below to embed the video.

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

If you need to modify the player, please refer to the following introduction.

Note:For iOS, please add a div with the id value of xvast_ios_media_url, hide the div, write the video url in the div, Xvast will automatically recognize the tag, and prompt the user whether to play this video. such as:

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

The latest version of Xvast for iOS media URL notes:

If you want your customers to play your videos on iOS, you must have the following characteristics in the link, with _P. For example, the link contains _P.mp4, _P.mp3 or _P.pdf, which is case-insensitive. Or contains xvast. You can include one of these characteristics in any location on the download link, then Xvast for iOS recognizes and supports downloads.

Please add a post or a page in the Control Panel of your website, switch the edit view to "Text" in the editor, copy the code to the editor, and click the Publish button. You can modify the CSS code according to your needs (XvastPlay.css).

1. Video-js.css/video.js is the VideoJS library file. XvastPlayer.css is the HTML5 video player additional style file. 2. Add the player button. If your user has not yet obtained a license, the player button will be displayed. When user clicks it, it will execute the JS event jump to get license page. You can modify XvastPlayer.css according to your need. 3. This part is a video URL for online play or download play in iOS. 4. This part is the HTML5 player (VideoJS) code, use JS to detect whether the user's browser is Xvast, if not, it will prompt the user to use Xvast to access the URL. 5. This part is the player's control button, through the JS code to control the player's fast forward, rewind, play, pause and re-play. (You can use them if you need) 6. Xvast online player's license detection related code.

Download sample code:www.xvast.com/XvastPlayer/Xvast-demo.html (JS and CSS files can be downloaded and placed on your own server)

<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">
	Please wait, connecting to obtain license page...'
</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">Get License...</button>
    </div>
    
	<p><a href="https://www.drm-x.com/download/drmx4/JesusFilm_en_P.mp4">Play MP4 online in iOS</a></p>
    
  <script type="text/javascript">
        if(navigator.userAgent.indexOf("Xvast") == -1){
            document.write("Please open the protected files in Xvast browser. Download 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>