jQuery load function after video loaded

Question

I have a HTML code like this:

... <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:

$(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 img tag but not with video tag. I want it to work like the img tag. Like I want it not to run when it loads videos from cache.
How can I do that?

Answer 1

HTML element video does not have load event. It has others, like loadstart, loadeddata or loadedmetadata. See a full list of possible viedo events 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: 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

Answer 2

You must use the loadeddata event to know when the video is loaded, you can see all properties of the event here:

loadeddata event

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.