Html 等待 HTML5 视频加载完毕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13864795/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wait until an HTML5 video loads
提问by Test Test
I have a video tag, that I dynamically change its source as I am letting the user to choose from a number of videos from the database. The problem is that when I change the src attribute the video doesn't load even if I tell it to.
我有一个视频标签，当我让用户从数据库中的多个视频中进行选择时，我会动态更改其来源。问题是，当我更改 src 属性时，即使我告诉它视频也不会加载。
Here is my code:
这是我的代码：
$("#video").attr('src', 'my_video_'+value+'.ogg');
$("#video").load();
while($("#video").readyState !== 4) {
console.log("Video is not ready");
};
The code still stays in a infinite loop.
代码仍然处于无限循环中。
Any help?
有什么帮助吗？
EDIT:
编辑：
To 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);
Ok this is the code I have now. The source prints great, but I still can't get the duration :/
好的，这是我现在拥有的代码。源打印很好，但我仍然无法获得持续时间：/
回答by Ian Devlin
You don't really need jQuery for this as there is a Media APIthat provides you with all you need.
您实际上并不需要 jQuery，因为有一个Media API可以为您提供所需的一切。
var video = document.getElementById('myVideo');
video.src = 'my_video_' + value + '.ogg';
video.load();
The Media API also contains a load()method which: "Causes the element to reset and start selecting and loading a new media resource from scratch."
媒体 API 还包含一个load()方法：“使元素重置并从头开始选择和加载新的媒体资源。”
(Ogg isn't the best format to use, as it's only supported by a limited number of browsers. I'd suggest using WebM and MP4 to cover all major browsers - you can use the canPlayType()function to decide on which one to play).
（Ogg 不是最好使用的格式，因为它只被有限数量的浏览器支持。我建议使用 WebM 和 MP4 来覆盖所有主要浏览器 - 您可以使用该canPlayType()功能来决定播放哪个）。
You can then wait for either the loadedmetadataor loadeddata(depending on what you want) events to fire:
然后您可以等待loadedmetadata或loadeddata（取决于您想要的）事件触发：
video.addEventListener('loadeddata', function() {
// Video is loaded and can be played
}, false);
回答by No Surprises
In response to the final part of your question, which is still unanswered... When you write $('#video').duration, you're asking for the durationproperty of the jQuery collection object, which doesn't exist. The native DOM video element does have the duration. You can get that in a few ways.
作为对您问题的最后一部分的回应，该部分仍未得到解答......当您编写 时$('#video').duration，您要求durationjQuery 集合对象的属性，该属性不存在。原生 DOM 视频元素确实有持续时间。你可以通过几种方式得到它。
Here's one:
这是一个：
// get the native element directly
document.getElementById('video').duration
Here's another:
这是另一个：
// get it out of the jQuery object
$('#video').get(0).duration
And another:
还有一个：
// use the event object
v.bind('loadeddata', function(e) {
console.log(e.target.duration);
});
回答by Gomzy
you can use preload="none" in the attribute of video tag so the video will be displayed only when user clicks on play button.
您可以在 video 标签的属性中使用 preload="none" 以便仅当用户点击播放按钮时才会显示视频。
<video preload="none">回答by Jacob Schneider
call function on load:
加载时调用函数：
<video onload="doWhatYouNeedTo()" src="demo.mp4" id="video">
get video duration
获取视频时长
var video = document.getElementById("video");
var duration = video.duration;
