Question

我有这样的HTML代码：

... <video id="abc" preload="auto" autoplay="autoplay" loop="loop" webkit-playsinline="">
    <source src="3.mp4" type="video/mp4">
</video> ...

我使用了这个JS代码：

$(document).ready(function () {
"use strict";


    $("#abc").load(function () {
        console.log(3);
    });
});

我想在视频加载时运行该功能。 JS代码与img标记一起使用，但不与video标记一起使用。我希望它像img标签一样工作。就像我希望它从缓存加载视频时不运行我怎么能这样做？

Answer 1

HTML元素video没有load个事件。它还有其他内容，例如loadstart，loadeddata或loadedmetadata。查看可能的视频事件here的完整列表。

$("#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 ：当浏览器加载了音频/视频的当前帧时触发。 loadedmetadata ：当浏览器加载音频/视频的元数据时触发 loadstart ：浏览器开始寻找音频/视频时触发

Answer 2

您必须使用loadeddata事件来了解视频的加载时间，您可以在此处查看事件的所有属性：

loadeddata event

这里有一个例子：

var video = document.getElementById("abc");
video.onloadeddata = function() {
     alert("Browser has loaded the current frame");
};

你也可以使用jquery选择器。

视频加载后的jQuery加载功能

2 个答案: