video.js_HTML5_编程信息

video.js

创始人

2022-11-14 22:14:55

0次

1、试看功能

<!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">

上一篇：没有了

下一篇：videojs播放器插件使用详解

video.js

相关内容

热门资讯