等到HTML5video加载

我有一个video标签，我dynamic地改变它的来源，因为我让用户从数据库中select一些video。 问题是，当我改变src属性时，即使我告诉它，video也不会加载。

这是我的代码：

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

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

任何帮助？

编辑 ：

致伊恩·德夫林：

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

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

Answer 1

你不需要jQuery，因为有一个媒体API ，提供你所需要的。

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

媒体API还包含一个load()方法：“使元素重置并从头开始select和加载新的媒体资源”。

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

然后，您可以等待loadedmetadata或loadeddata （取决于您想要的）事件触发：

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

Answer 2

为了回应你的问题的最后一部分，仍然没有答案…当你写$('#video').duration ，你要求的jQuery收集对象的duration属性，这不存在。 本地DOMvideo元素确实有持续时间。 你可以通过几种方式获得。

这里有一个：

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

Answer 3

调用负载函数：

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

获得video时间

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