Javascript 视频加载后的jQuery加载功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38012592/
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
jQuery load function after video loaded
提问by M.M.M.M.
I have a HTML code like this:
我有一个这样的 HTML 代码：
... <video id="abc" preload="auto" autoplay="autoplay" loop="loop" webkit-playsinline="">
<source src="3.mp4" type="video/mp4">
</video> ...
And I used this JS code:
我使用了这个 JS 代码：
$(document).ready(function () {
"use strict";
$("#abc").load(function () {
console.log(3);
});
});
I wanna run that function when the video loads. The JS code works with imgtag but not with videotag. I want it to work like the imgtag. Like I want it not to run when it loads videos from cache.
How can I do that?
我想在视频加载时运行该功能。JS 代码适用于img标签，但不适用于video标签。我希望它像img标签一样工作。就像我希望它在从缓存加载视频时不运行一样。
我怎样才能做到这一点？
回答by eisbehr
HTML element videodoes not have loadevent. It has others, like loadstart, loadeddataor loadedmetadata. See a full list of possible viedo events here.
HTML 元素video没有load事件。它还有其他的，比如loadstart,loadeddata或loadedmetadata。在此处查看可能的视频事件的完整列表。
$("#abc").on("loadstart", function() {
console.log(3);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video id="abc" preload="auto" autoplay="autoplay" loop="loop" webkit-playsinline="">
<source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
</video>loadeddata: Fires when the browser has loaded the current frame of the audio/video
loadedmetadata: Fires when the browser has loaded meta data for the audio/video
loadstart: Fires when the browser starts looking for the audio/video
loadeddata：当浏览器加载了音频/视频的当前帧时触发。
loadedmetadata：当浏览器为音频/视频加载元数据时触发
loadstart：当浏览器开始寻找音频/视频时触发
回答by Mikel
You must use the loadeddata event to know when the video is loaded, you can see all properties of the event here:
您必须使用 loadeddata 事件才能知道视频何时加载，您可以在此处查看该事件的所有属性：
And an example here:
这里有一个例子：
var video = document.getElementById("abc");
video.onloadeddata = function() {
alert("Browser has loaded the current frame");
};
you can use jquery selectors too.
您也可以使用 jquery 选择器。
