如何获取动态加载的 HTML5 视频的持续时间？答案

【问题标题】：How do I get the duration of an HTML5 video that has been loaded dynamically?如何获取动态加载的 HTML5 视频的持续时间？
【发布时间】：2017-01-19 06:19:39
【问题描述】：

我正在使用 Ooyala 脚本加载 HTML5 视频并尝试获取视频的持续时间值。我收到此错误“无法读取未定义的属性‘addEventListener’”。这是我的代码：

var video = jQuery('.video-element').get(0);
video.addEventListener('loadedmetadata', function () {
    var minutes = parseInt(video.duration / 60, 10);
    var seconds = parseInt(video.duration % 60);
    var secondsnew = ("0" + seconds).slice(-2);

    console.log(minutes+":"+secondsnew);
});

我认为这是因为视频是动态加载的，因为我已经使用已加载到 DOM 中的本机视频进行了测试，并且它可以正常工作。如何使用动态加载的视频进行这项工作？

【问题讨论】：

从错误来看，视频组件似乎在 DOM 中不存在，或者您没有正确选择它。您是否在脚本执行后检查了 DOM 以确保它存在？
@MaxSindwani 是的，它肯定会显示在 DOM 中。我什至将.video-content 更改为video 以定位实际的<video> 标签。我什至尝试将所有内容都包含在 jQuery(window).load() 中，但随后我在控制台日志中没有得到任何内容。

标签： javascript jquery html video

【解决方案1】：

我不知道如何使用 Ooyala 脚本访问它，但可以通过 js 使用视频 ID 访问简单的 HTML5 视频

$(document).ready(function () {
    var videoDuration =  document.getElementById('Sample')
    var duration = videoDuration.duration;
    alert(duration);
};

HTML

<video src="video.mp4" id="Sample" controls>
      video not supported
</video>

【讨论】：

我们只能假设 OP 提供的内容是一个或多个视频元素具有 .video-element 类，因此，您可能应该提供适合处理一个或多个视频的解决方案。尽管如此 +1。