如何嵌入带有DRM保护的HTML5视频播放器？

在头部引入 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>

<!--使用自定义皮肤-->
<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>

最新版本的 Xvast for iOS 媒体 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浏览器中打开受保护的文件，并提示用户下载Xvast浏览器。
    if(navigator.userAgent.indexOf("Xvast") == -1){
      document.write('提示:请在Xvast浏览器中打开受保护文件。下载Xvast');
    }else{
      // 加入HTML5的vide标签;
      // VideoJS会自动改变video标签的ID，这里的xvast_player将会自动变成变成xvast_player_html5_api;
      // 使用src属性指定视频URL;
      // class="video-js" 调用VideoJS的样式
      // data-setup 中 "autoplay":true 自动播放，false不自动播放;
      // 在data-setup中，可以通过 "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>

Javascript 代码：

<script type="text/javascript">
  document.onreadystatechange = function() {
    if (document.readyState == "complete") { // 页面加载完之后执行，必须;

      // 获取HTML5播放器

      // VideoJS会自动在Video标签的ID后自动加上_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; // 移动网络：cellular; 无线网络：wifi
		// 检测手机是使用移动网络还是wifi
		if (network == "cellular"){ // 如果手机使用移动网络，需要为页面添加获取许可证的按钮
			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>;
		}
	  }
      // 如果返回信息包含URL，说明需要获取许可证。
      if(isSupp.indexOf("http")>0){
        // 显示提示，非必须；
        document.getElementById("LoadingText").style.display='block';
        // 通过substring截取获取许可证的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 ="许可证已经过期。请关闭Xvast，重新打开受保护的文件，来获取新的许可证";
      return;
    }
  }
}