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

2024-06-16 11:33| 来源: 网络整理| 查看: 265

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

起初代码是这样的

您的浏览器不支持 video 标签。

加======

在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也可以在这里插入图片描述当音频/视频处于加载过程中时，会依次发生以下事件：

loadstartdurationchangeloadedmetadataloadeddataprogresscanplaycanplaythrough 总结

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

【本文地址】

公司简介

联系我们