onload event of video element is not firing

Question

I want some help in debugging my code. I want to revoke objectURL after loading the video but onload event is not firing. Any help will be very appreciated Here is some of my code:

 ////////////// uploading video $(".new-video input:file").on('change',function () { showSpinner(); $(".video-controls").show(); $("#video1").attr('loop', false); if (this.files && this.files[0]) { showSpinner(); var URL = window.URL || window.webkitURL; var file = this.files[0]; var type = file.type; var videoNode = document.querySelector('#video1'); var canPlay = videoNode.canPlayType(type); if (canPlay === '') canPlay = 'no'; var message = type + " File is not supported. Please select other file"; var isError = canPlay === 'no'; if (isError) { alert(message+","+ isError); return } var fileURL = URL.createObjectURL(file); videoNode.src = fileURL; // revoking video element src videoNode.onload = function(){ hideSpinner(); URL.revokeObjectURL(this.src); alert("inside") } } });

 <div class="video-container"> <img class="bg-img content-container" src="/"> <video id="video1" class="small-video content-container" autoplay muted></video> </video> </div> <button class="new-video"> <input type="file" accept="video/*"> </button>

Answer 1

According to W3Schools (yes I know), during the loading process of an audio/video, the following events occur, in this order:

1. loadstart
2. durationchange
3. loadedmetadata
4. loadeddata
5. progress
6. canplay
7. canplaythrough

So you're looking for the loadeddata event:

videoNode.onloadeddata =  function(){
    hideSpinner();
    URL.revokeObjectURL(this.src);
    alert("inside")
}