video.js事件监听判断播放进度，执行动画
------------恢复内容开始------------
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <title>video.html</title> 6 7 <meta name="keywords" content="keyword1,keyword2,keyword3"> 8 <meta name="description" content="this is my page"> 9 <meta name="content-type" content="text/html; charset=UTF-8"> 10 <link rel="stylesheet" href="../src/css/video-js.min.css"> 11 <!-- <link rel="stylesheet" type="text/css" href="./styles.css"> --> 12 <script src="../src/js/jquery.min.js"></script> 13 <script src="../src/js/video.min.js"></script> 14 </head> 15 16 <body> 17 <video id="video-active" class="video-js vjs-default-skin" controls preload="none" poster="./image/banner.jpg"> 18 <source src="../src/video/banner-video.mp4" type="video/mp4"> 19 </video> 20 <div id="current">当前时长：0:00</div> 21 <div id="duration">总时长：0:00</div> 22 <div id="pro"></div> 23 <script type="text/javascript"> 24 // function play(id, autoplay) { 25 var myPlayer = videojs("#video-active", { 26 controls: true, //是否显示控制条 27 poster: 'xxx', // 视频封面图地址 28 muted: true, // 是否静音 29 preload: 'auto', //预加载 30 autoplay: true, //是否自动播放 31 fluid: true, // 自适应宽高 32 loop: true, //是否循环播放 33 inactivityTimeout: false, 34 language: 'zh-CN', // 设置语言 35 controlBar: { // 设置控制条组件 36 /* 设置控制条里面组件的相关属性及显示与否 37 'currentTimeDisplay':true, 38 'timeDivider':true, 39 'durationDisplay':true, 40 'remainingTimeDisplay':false, 41 volumePanel: { 42 inline: false, 43 } 44 */ 45 /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */ 46 children: [{ 47 name: 'playToggle' 48 }, // 播放按钮 49 { 50 name: 'currentTimeDisplay' 51 }, // 当前已播放时间 52 { 53 name: 'progressControl' 54 }, // 播放进度条 55 { 56 name: 'durationDisplay' 57 }, // 总时间 58 { // 倍数播放 59 name: 'playbackRateMenuButton', 60 'playbackRates': [0.5, 1, 1.5, 2, 2.5] 61 }, { 62 name: 'volumePanel', // 音量控制 63 inline: false, // 不使用水平方式 64 }, { 65 name: 'FullscreenToggle' 66 } // 全屏 67 ] 68 }, 69 sources: [ // 视频源 70 { 71 src: '../src/video/banner-video.mp4', 72 type: 'video/mp4', 73 poster: '../image/banner.jpg' 74 } 75 ] 76 }, function() { 77 78 console.log('视频可以播放了', this); 79 }); 80 // 绑定事件 81 myPlayer.on("timeupdate", function(event) { 82 83 var currentTime = parseInt(this.currentTime()); //当前时间 84 var duration = this.duration(); //视频时常 85 var percent = (currentTime / duration * 100).toFixed(0) + "%"; 86 console.log(percent); 87 $("#current").text(this.currentTime()); 88 $("#duration").text(duration); 89 if (currentTime == duration) { 90 $("#pro").html("已完成"); 91 } 92 if (currentTime == 6) { 93 alert("判断播放时间执行动画"); 94 // 执行dom改变页面内容 95 } else { 96 // 执行dom改变页面内容 97 } 98 }); 99 // var data = { 100 // src: 'xxx.mp4', 101 // type: 'video/mp4' 102 // }; 103 // var player = videojs('myVideo', {...}); 104 // player.pause(); 105 // player.src(data); 106 // player.load(data); 107 // // 动态切换poster 108 // player.posterImage.setSrc('xxx.jpg'); 109 // player.play(); 110 111 // 销毁videojs 112 //player.dispose(); 113 </script> 114 </body> 115 116 </html>
------------恢复内容结束------------
