функция загрузки JQuery после видео загружается

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. См. Полный список возможных событий viedo here.

$(function() { 
    "use strict"; 

    $("#abc").on("loadstart", function() { 
     console.log(3); 
    }); 
}); 

loadeddata: Срабатывает, когда браузер загрузил текущий кадр аудио/видео
loadedmetadata: Срабатывает, когда браузер загруженных метаданных для аудио/видео
loadstart: Пожары, когда браузер начинает искать аудио/видео

Answer 2

Вы должны использовать событие loadeddata, чтобы узнать, когда загружено видео, вы можете увидеть все свойства события здесь:

loadeddata event

И пример здесь:

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

вы можете использовать JQuery селекторы тоже.