等到加载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);

好的,这是我现在的代码.源打印很棒,但我仍然无法获得持续时间:/

Answer 1

你真的不需要jQuery,因为有一个Media API可以为你提供所需的一切.

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

Media API还包含一个load()方法:"使元素重置并开始从头开始选择和加载新的媒体资源."

(奥格是不使用的最佳格式,因为它只能通过浏览器数量有限支持我使用的WebM和MP4,包括所有主要的浏览器建议-你可以使用canPlayType()的函数,在玩哪一个决定).

然后,您可以等待loadedmetadata或loadeddata(取决于您想要的)事件触发:

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

Answer 2

在回答问题的最后部分时,仍然没有答案......当你写作时$('#video').duration,你要求duration的是jQuery集合对象的属性,它不存在.原生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);
});