首页

海海软件DRM-X 4.0 HTML5 视频播放使用HTML5 Video 标签,您可以很轻松的通过标准的HTML5标签嵌入视频,并且可以使用市面上流行的HTML5播放器,像VideoJS,您可以使用JavaScript与HTML5播放器进行交互。

 

如何嵌入HTML5视频播放器?

在head中引入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

在body中嵌入VideoJS播放器:

注意:对于iOS在线播放,为了确保Xvast浏览器可以识别到您的视频地址,请确保Video标签的ID为xvast_player。如果您不使用VideoJS,请将Video标签的ID修改成xvast_player_html5_api (如果您不使用VideoJS,请将所有的xvast_player替换成xvast_player_html5_api),Xvast将会自动识别Video标签。

最新版Xvast for iOS媒体链接说明:

如果您希望用户在iOS上播放您的视频,您必须在链接中使用带有_P的标识符,比如,在链接中包含_P.mp4, _P.mp3或者_P.pdf,不区分大小写。或者包含xvast。您可以在下载地址的任意位置包含这些特性之一,然后Xvast for iOS将会自动识别。

                                    
<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" src="https://cn.haihaisoft.com/download/drmx4/Stay_P.mp4" class="video-js" data-setup=\'{ "autoplay":false, "width": 856, "height": 480 }\'></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\')">播放加密的文件(点击两次)</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;
    }
  }
}
                            
                        

询问DRM-X产品,定价,方案或其他相关咨询 - 我们专业的销售代表随时准备提供帮助。