html代码
<video id="myVideo" class="video-active" width="100%" height="300" controls="controls" >
<source src="__STATIC__/video/videos/1.课程介绍.mp4" type="video/mp4" style="margin-top: 0px;;">
<source src="__STATIC__/video/videos/1.课程介绍.mp4" type="video/ogg">
</video>
1、使用jquery写的代码段：
<script>
$(document).ready(function() { $times = 10;
new_times = 0;
$("#video-active").on(
"timeupdate",
function(event) {
onTrackedVideoFrame(this.currentTime, this.duration);
}
); })
/**
*
* @param {Object} currentTime 视频播放的时间
* @param {Object} duration 视频的总播放时间
*/
function onTrackedVideoFrame(currentTime, duration) {
if(currentTime > $times) {
new_times = currentTime;
Media = document.getElementById('video-active');
Media.pause();
layer.confirm('你未购买本视频', {
btn: ['马上购习', '稍后购买'] //按钮
}, function() {
layer.msg('正在开发中，请等待', {
icon: 1
});
}, function() {
layer.closeAll();
return false;
}); }
}
</script>
2、使用javascript原生态代码(第一种)：
<script type="text/javascript">
// 获取 id="myVideo" 的 video 元素
vid = document.getElementById("myVideo");
// // 为 video 元素添加 ontimeupdate 事件，如果当前播放位置改变则执行函数
vid.ontimeupdate = function(){
var curTime = vid.currentTime;
console.log(curTime);
if (curTime >= 20) {
vid.pause();
alert("请购买本视频后再观看！");
return false;
}
};
3、使用javascript原生态代码(第二种)：
vid = document.getElementById("myVideo");
//// videoPlayer.addEventListener("timeupdate", function () { getCurrentVideoPosition(); }, false);
vid.addEventListener("timeupdate",function(){
var curTime = vid.currentTime;
if (curTime >= 20) {
vid.pause();
alert("请购买本视频后再观看");
return false;
}
})
特别说明：
1、使用javascript共有两种的方法;主要区是有些浏览器不能直接使用timeupdate,只能使用addEvetListener
2、公众号开发视频时，js控制的视频要放在<video><video>下面; 要不然不能执行timeupdate;