如何在Wordpress中为Xvast嵌入HTML5 DRM视频播放器?
如何在Wordpress中为Xvast嵌入HTML5 DRM视频播放器?
在Wordpress中为Xvast嵌入HTML5 DRM视频播放器只需要添加一小段代码就可以将播放器嵌入到您的网站中。
注意:对于iOS在线播放,为了确保Xvast浏览器可以识别到您的视频地址,请确保Video标签的ID为xvast_player。
在网站后台添加文章或者页面,在编辑器中将编辑视图切换到 “文本”,然后把代码复制到编辑器中,点击发布即可,播放器的位置可以根据您的需要自行修改CSS代码(XvastPlay.css)进行设置。
1.引用CSS和JS文件,video-js.css、video.js为VideoJS的库文件,XvastPlay.css为后添加的Xvast播放器的样式文件。
2.为播放器添加获取许可证的播放按钮,若用户没有获取许可证,该按钮将会显示,点击后将会执行JS事件跳转到获取许可证页面。可根据你们需求修改XvastPlay.css。
3.为iOS 版Xvast嵌入在线播放或下载播放的视频URL。
4.这部分为HTML5播放器代码,根据JS进行检测用户使用的浏览器是否为Xvast,如果不是,会提示用户下载使用Xvast打开加密后的文件。
5.播放器的控制按钮,通过JS代码控制播放器的快进、快退、播放、暂停和重新播放。(根据需要选择使用)
6.Xvast在线播放器获取许可证的检测代码。
我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:
样例代码下载:https://www.xvast.cn/XvastPlayer/Xvast-demo.html
(引用的JS和CSS可以下载后放置到您自己的服务器)
<link rel="stylesheet" type="text/css" href="https://www.xvast.cn/XvastPlayer/css/video-js.css" />
<link rel="stylesheet" type="text/css" href="https://www.xvast.cn/XvastPlayer/css/XvastPlay.css" />
<script src="https://www.xvast.cn/XvastPlayer/js/video.js" type="text/javascript" charset="utf-8"></script>
<!--<link rel="stylesheet" type="text/css" href="https://www.xvast.cn/XvastPlayer/css/skin/TechSkin-skin.css" />-->
<div id="LoadingText" style="display: none;" align="center">
请稍等,正在获取许可证...
</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">获取许可证...</button>
</div>
<p><a href="https://www.drm-x.com/download/Stay_P.mp4">在iOS中在线播放MP4</a></p>
<script type="text/javascript">
if(navigator.userAgent.indexOf("Xvast") == -1){
document.write("提示:请在Xvast浏览器中打开受保护文件。下载Xvast");
}else{
document.write('<video id="xvast_player" controls="controls" src="https://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="https://www.xvast.cn/XvastPlayer/js/XvastPlay.js" type="text/javascript" charset="utf-8">