播放器下载排行榜收藏本站设为首页

视频播放预览功能使用方式教程

保利威视2017-11-01

视频播放预览功能使用方式教程

场景

需要在网站上放一个视频教程,用户只允许观看3分钟,完了之后显示需要注册购买视频才能继续观看。点击之后跳到登录购买链接。

原理
利用预览代码和播放器的播放结束事件,预览播放结束时触发到s2j_onPlayOver,把播放器隐藏,显示一张图片,引导用户注册或购买。

实现方法

从保利威视视频管理后台拷贝预览代码,
1

<script src='https://player.polyv.net/script/polyvplayer.min.js'></script>
<div id='previewArea'></div>
<script>
var player = polyvObject('#previewArea').previewPlayer({
    'width':'640',
    'height':'340',
    'vid' : 'bk51l599cnl1k8c1l5nn79kk26p458943_k'
});
</script>

制作一张640x340的图片(跟视频播放器大小一致),播放器预览时间完成之后用来显示在播放器上方,提示用户应该购买。
这里用了这张图:

播放之前还不到它出场,先用隐藏的图层,链接用购买或者注册的

<span id="buylink" style="display:none"><a href="http://www.polyv.net/pricing.html" target="_blank">
<img alt="" src="/uploads/allimg/171101/11205L011-1.png" /></a></span>
function s2j_onPlayOver()
{
    //alert("播放结束");
        document.getElementById("buylink").style.display = "block";
    document.getElementById("previewArea").style.display = "none";
}