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播放器插件使用详解