在Wordpress中为Xvast嵌入HTML5 DRM视频播放器只需要添加一小段代码就可以将播放器嵌入到您的网站中。
如果您不需要深度修改播放器,请直接使用我们整合后的代码即可完成视频嵌入。
<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.cn/dist/js/embedPlayer.js"></script>
<script type="text/javascript" src="https://www.xvast.cn/dist/js/video.js"></script>
<script type="text/javascript" src="https://www.xvast.cn/dist/wordpress/XvastVideoJSPlayer.js"></script>
如果您需要深度修改播放器,请参考下面的介绍。
注意:对于iOS在线播放,请添加一个id为xvast_ios_media_url的div,并将该div隐藏,div中写入所要播放的视频地址,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媒体链接说明:
如果您希望用户在iOS上播放您的视频,您必须在链接中使用带有_P的标识符,比如,在链接中包含_P.mp4, _P.mp3或者_P.pdf,不区分大小写。或者包含xvast。您可以在下载地址的任意位置包含这些特性之一,然后Xvast for iOS将会自动识别。
在网站后台添加文章或者页面,在编辑器中将编辑视图切换到 "文本",然后把代码复制到编辑器中,点击发布即可,播放器的位置可以根据您的需要自行修改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在线播放器获取许可证的检测代码。
样例代码下载: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/DRMX4/JesusFilm_cn_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/DRMX4/JesusFilm_cn_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"></script>