等待 HTML5 视频加载

我有一个视频标签，当我让用户从数据库中的多个视频中进行选择时，我会动态更改其来源。问题是，当我更改 src 属性时，即使我告诉它，视频也不会加载。

这是我的代码：

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

代码仍然处于无限循环中。

有什么帮助吗？

EDIT:

伊恩·德夫林：

//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);

好的，这是我现在的代码。源代码打印得很好，但我仍然无法获得持续时间：/

你实际上并不需要 jQuery，因为有一个媒体API这为您提供了您所需要的一切。

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

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

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

然后您可以等待loadedmetadata or loadeddata（取决于你想要什么）要触发的事件：

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