kittenchen1、试看功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>23</title>
</head>
<body>
<video id="video" src="./video.mp4" controls="controls">
您的浏览器不支持 video 标签。
</video>
<script>
var video = document.getElementById('video')
var timer;
var timeDisplay
//点击开始事件
video.addEventListener('play', function(e) {
//获取当前播放的时间指针
timeDisplay = Math.floor(video.currentTime);
//当时间大于10秒时
if(timeDisplay>2){
//停止
video.pause();
alert(timeDisplay+"试看结束");
}else{
//定时器
timer = setInterval("CountDownTime()",1000);
}
})
//进度条移动事件
video.addEventListener('seeking', function(e) {
//移动到大于10秒自动返回
if(video.currentTime>2){
video.currentTime=2;
}
})
function CountDownTime() {
timeDisplay = Math.floor(video.currentTime);
if(timeDisplay>=2){
video.pause();
//关闭定时器
clearInterval(timer);
}
}
</script>
</body>
</html>2、使用json作为视频数据源
<script>
$.getJSON('https://www.strconvert.com/index.php?s=video&c=player&m=videojs&id=23',function(data){
//此处返回的data已经是json对象
var player = videojs('example_video_1',{
muted: true,
controls : true/false,
loop : true,
sources: data,
});
});
</script>3、宽度自适应
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls preload="none" width="640" height="264">
