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.


How to embed html5 video player?

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.

Include VideoJS in head:

<!--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" />

You can also use the other skin according to the style of your website.

Here we recommend a VideoJS skin generation tool, you can customize the player skin. https://codepen.io/heff/pen/EarCt

Embed VideoJS:

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.

<div id="LoadingText" style="display: none;" align="center">
  Please wait, connecting to obtain license page...
<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>

Javascript Code:

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

The following method provides a reference to obtain more information, including the license information (Open Count and Expiration Date), you can get this information according to your requirements.

function supportType(e,vidType,codType){
  licURL = isSupp.substring(isSupp.indexOf("http"));

    window.location.href = licURL;

      // 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();

    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.";

Ask about Haihaisoft products, pricing, implementation, or anything else — our highly trained reps are standing by, ready to help.