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.


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="http://www.xvast.cn/XvastPlayer/css/video-js.css" />
<link rel="stylesheet" type="text/css" href="http://www.xvast.cn/XvastPlayer/css/XvastPlay.css" />
<script src="http://www.xvast.cn/XvastPlayer/js/video.js" type="text/javascript" charset="utf-8"></script>
<!--<link rel="stylesheet" type="text/css" href="http://www.xvast.cn/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...
    </div>
    
	<p><a href="http://www.drm-x.com/download/Stay_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="sample_video" controls="controls" src="http://www.drm-x.com/download/Stay_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="http://www.xvast.cn/XvastPlayer/js/XvastPlay.js" type="text/javascript" charset="utf-8">

                            
                        
 
 
 
View other video tutorial

Haihaisoft's DRM-X 4.0 for HTML5 Video, it's using HTML5 Video tag. Content providers can easily embed video using standard HTML5 Video tag, and using famous HTML5 Player such as VideoJS, and using JavaScript to interact with HTML5 Player.

Download sample code. | 250KB