关于页面加载时video总时长获取为NaN

题引

最近有个需求获取页面加载时video总时长

疑问

起初代码是这样的

     <div>
		<video id="joinVideo" controls="controls">
			<source src="moive1.mp4" type="video/mp4">
			您的浏览器不支持 video 标签。
		</video>
		<div class="vedio-intro">
			<div>
				<p>加======</p>
			</div>
			<div id="totalTime"></div>
		</div>
	</div>

在id为“totalTime”的div标签中填充视频总时长，格式为时分秒

    var video = document.getElementById("joinVideo");
	window.onload = function(){
			console.log(video.duration);
			$("#totalTime").html(formatSeconds(video.duration));
	}

结果为NaN

很明显视频还没有加载完成

嗯，笨方法

想到个笨方法，setTimeout

  setTimeout(function (){
		console.info(video.duration);
		document.getElementById("totalTime").innerHTML = formatSeconds(video.duration);
	},3000);

延迟时间1秒不行，2秒。。。。3秒，，嗯？网络速度慢的情况下呢，？有点low，不能忍。要不找产品聊聊，这里放个时长是因为没东西放了吗。。。

查API

在w3c查的video的API

canplay 貌似可以，尝试一下

       window.onload = function(){
			video.oncanplay = function () {
				console.log(video.duration)
			}				
		}

结果完美，当然canplaythrough也可以

当音频/视频处于加载过程中时，会依次发生以下事件：

• loadstart
• durationchange
• loadedmetadata
• loadeddata
• progress
• canplay
• canplaythrough

总结

自我反省：基础不扎实
但这种寻找最优解的过程，可以收获很多