視頻元素的 onload 事件未觸發

Question

我需要一些幫助來調試我的代碼。 我想在加載視頻后撤銷 objectURL，但沒有觸發 onload 事件。 任何幫助將不勝感激這是我的一些代碼：

 ////////////// 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

根據W3Schools （是的，我知道），在音頻/視頻的加載過程中，會按以下順序發生以下事件：

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

所以你正在尋找loadeddata事件：

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