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>

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>

• javascript
• html
• css

• 1 In mobile videos not play onload – dılo sürücü Commented Aug 27, 2019 at 12:51
• You should always attach load handlers, before you assign the source. Otherwise, your handler might never get called - simply because the load event has already happened, before you even attached the handler for it. – misorude Commented Aug 27, 2019 at 12:55
• it is still not working. I have tried to attach the handler before this line "videoNode.src = fileURL". – Nida Fatima Commented Sep 1, 2019 at 11:38

1 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")
}