等待 HTML5 视频加载完成

Question

我有一个视频标签，用户可以从数据库中选择多个视频，我会动态更改其来源。问题是，即使我告诉它更改了src属性，视频也无法加载。

这是我的代码：

$("#video").attr('src', 'my_video_'+value+'.ogg');
$("#video").load();
while($("#video").readyState !== 4) {
        console.log("Video is not ready");
};

代码仍然停留在一个无限循环中。

需要帮助吗？ 编辑： 给 Ian Devlin：

//add an listener on loaded metadata
v.addEventListener('loadeddata', function() {
    console.log("Loaded the video's data!");
    console.log("Video Source: "+ $('#video').attr('src'));
    console.log("Video Duration: "+ $('#video').duration);
}, false);

好的，这是我现在拥有的代码。原始内容很好，但我仍然无法获得持续时间 :/

- Test Test

---

$("#video").load(); 这里在做什么？.load() 方法用于通过 Ajax 加载内容并将其注入到元素中。 - Šime Vidas

可能是HTML5视频-文件加载完成事件？的重复问题。 - Michael Mior

Answer 1

你实际上并不需要使用jQuery，因为有一个Media API可以提供你所需的一切。

var video = document.getElementById('myVideo');
video.src = 'my_video_' + value + '.ogg';
video.load();

媒体API还包含一个load()方法，它会“导致元素重置，并从头开始选择和加载新的媒体资源。”

（Ogg不是最好的格式，因为它只受到有限数量的浏览器支持。建议使用WebM和MP4来覆盖所有主要浏览器 - 您可以使用canPlayType()函数来决定播放哪个）。

然后您可以等待loadedmetadata或loadeddata事件之一触发（取决于您需要什么）。

video.addEventListener('loadeddata', function() {
   // Video is loaded and can be played
}, false);

- Ian Devlin

---

我知道，这就是为什么我建议同时使用MP4和WebM的原因——WebM适用于Firefox和Opera。 - Ian Devlin

@IanDevlin 如果我需要使用JavaScript动态向页面添加视频元素，当我将文件拖放到网页上时怎么办？此时，我正在使用HTML拖放功能。借助FileReader API，一旦读取器完成加载被拖放的文件，我就能够做到这一点，并且已经可以用它来实现图片的添加。 - Web User

解决这些变量冲突的更好方式可能是 $('#myVideo')[0].load()，因为虽然 jQuery 包装器具有 .load() 函数，但您始终可以使用 [index] 语法直接访问底层 DOM 元素。 - Anthony Manning-Franklin

如何在TypeScript中实现 - manish kumar

@manishkumar 这是一个Typescript的HTML5音频包装器，可以在此链接 https://gist.github.com/devfred/b34aafcb4402ac318ecaaa91f6816fc7 找到 - 它可以轻松转换为包装HTML5视频API的代码。 - Kabelo2ka

Answer 2

回答你问题的最后一部分，目前还没有得到答复... 当你写下$('#video').duration时，你是在请求jQuery集合对象中的duration属性，但这个属性并不存在。原生的DOM视频元素确实有持续时间属性，可以通过几种方法获取。

以下是其中的一种方法：

// get the native element directly
document.getElementById('video').duration

这里还有一个：

// get it out of the jQuery object
$('#video').get(0).duration

还有一个：

// use the event object
v.bind('loadeddata', function(e) {
  console.log(e.target.duration);
});

- No Surprises

---

对于你的第二种方法，正如Anthony上面提到的那样，你也可以使用这个语法：$('#video')[0].duration。 - cssyphus

Answer 3

您可以在视频标签的属性中使用preload="none"，这样当用户点击播放按钮时才会显示视频。

<video preload="none">

- Gomzy

Answer 4

在加载时调用函数：

<video onload="doWhatYouNeedTo()" src="demo.mp4" id="video">

获取视频时长

var video = document.getElementById("video");
var duration = video.duration;

- J-Cake

---

最新版Chrome（Ubuntu环境下，不确定是否特定于此）中视频标签上不会触发此事件。 - SidOfc