javascript - 不播放视频的 HTML5 视频时长

标签 javascript css html

我正在尝试在不播放视频的情况下或在播放视频之前获取 HTML5 中的视频持续时间,以显示在视频缩略图上,就像您在视频网站或任何其他视频网站上看到的那样。

任何帮助将不胜感激。

提前致谢。

最佳答案

对于 HTML5,一旦加载了文件的元数据,您就应该能够使用视频标签的持续时间属性。请参阅此答案以获得执行此操作的好方法:

Retrieving HTML5 video duration separately from the file

引用 Mikushi 的回答:

myVideoPlayer.addEventListener('loadedmetadata', function() {
    console.log(videoPlayer.duration);
});

通过监听“loadedmetadata”事件,您将确保已加载持续时间值。

有关已加载元数据的更多详细信息,请参见此处:http://www.w3schools.com/tags/av_event_loadedmetadata.asp

编辑

根据@lucas-vasques 的评论,您可以使用 durationchange 代替 loadmetadata 事件,其中 MDN Media Events list描述为...

The metadata has loaded or changed, indicating a change in duration of the media. This is sent, for example, when the media has loaded enough that the duration is known.

关于javascript - 不播放视频的 HTML5 视频时长,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19592009/

相关文章:

javascript - 如何在元素可用时插入该元素?

javascript - 无法清除 Expo React native 应用程序中的间隔

javascript - 渲染主干 View 时如何防止图像闪烁?

html - 垂直对齐标题 div 中的元素(文本和 Logo )

javascript - 可以使浏览器不删除字符

javascript - window.innerWidth 如果不触发

css - Bootstrap ProgressBar 增加列高

css - 在 jQuery 调整其父级大小后,百分比宽度不起作用

html - 博客侧边栏和博客主栏之间的空间

javascript - 用滑动动画插入div