今年大连特别热，睡不着写一篇博客吧。第一次写，大家勿喷。
记录视频真正播放时长，需要考虑如下几个问题：
- 点击播放才开始计时
- 视频处于缓冲状态，停止计时
- 拖拽视频长度不能计时
- 视频暂停不能计时
实现这个功能，需要了解Video 的几个事件：
- playing 当音频/视频在已因缓冲而暂停或停止后已就绪时（包括点击播放后播放和缓冲后播放）
- waiting 当视频由于需要缓冲下一帧而停止（视频缓冲时触发）
- pause 当音频/视频已暂停或播放结束时
下面是实现功能的code
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 </head> 10 11 <body> 12 <video src=""></video> 13 <video id="video1" width="420" style="margin-top:15px;" controls="" autoplay="" name="media"> 14 <source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4?t=7" type="video/mp4" /> Your browser does not support HTML5 video. 15 </video> 16 <script> 17 var vedio = document.getElementById("video1"); 18 var timespan = 0; 19 var isCountTime = false; 20 vedio.onplaying = function () { 21 isCountTime = true; 22 console.log("playing"); 23 } 24 vedio.onwaiting = function () { 25 isCountTime = false; 26 console.log("waiting"); 27 } 28 vedio.onpause = function () { 29 isCountTime = false; 30 console.log("pasused"); 31 } 32 setInterval(function () { 33 if (isCountTime) { 34 timespan += 0.1; 35 console.log(timespan); 36 } 37 }, 100); 38 </script> 39 </body> 40 41 </html>