Javascript

Question

这是代码：

var meme = "";
meme +=     '<div class="videoWrapper" onclick="clickVideo(this);" style="max-width: calc(100% - 2px);">';
meme +=         '<video loop class="video" style="max-width: 100%;">';
meme +=             '<source src="" type="video/mp4" id="video-preview" />';
meme +=         '</video>'; 

meme +=         '<div class="gif_button" style="display: flex;">GIF</div>';             
meme +=     '</div>';       

$('#previewholder_area').empty();
$('#previewholder_area').html(meme);
$('#video-preview').attr('src', URL.createObjectURL(bla.files[0]));

var videoElement = document.getElementById("video-preview");

console.log('wth');
console.log(videoElement.readyState);

videoElement.addEventListener('loadeddata', (e) => {
    console.log('hello?');

    if(videoElement.readyState >= 3){
        readURL(bla);
    }
});

videoElement.addEventListener('error', (e) => {
   //Video should now be loaded but we can add a second check
    makeToast("Invalid Video Format!", "error", 4000);      
    reset_upload();
});

控制台只打印出：

wth
undefined

这是怎么回事？它昨天工作，视频仍然加载没有问题。从昨天开始我没有做任何改变。

addEventListener

没有做任何事情，loadeddata和error

都没有

Answer 1

尝试解决后，现在又是这样工作的：

var meme = "";
meme +=     '<div class="videoWrapper" onclick="clickVideo(this);" style="max-width: calc(100% - 2px);">';
meme +=         '<video loop class="video videopreview">';
meme +=             '<source src="" type="video/mp4" />';
meme +=         '</video>'; 

meme +=         '<div class="gif_button" style="display: flex;">GIF</div>';             
meme +=     '</div>';       

$('#previewholder_area').empty();
$('#previewholder_area').html(meme);
$('.videopreview source').attr('src', URL.createObjectURL(bla.files[0]));

const videoElement = $(".videopreview");


videoElement.get(0).addEventListener('loadeddata', (e) => {
    if(videoElement.get(0).readyState >= 3){
        readURL(bla);
    }
});

videoElement.get(0).addEventListener('error', (e) => {
    makeToast("Invalid Video Format!", "error", 4000);      
    reset_upload();
});

我不知道为什么它现在需要那样，为什么直到昨天它才以另一种方式工作

Javascript - HTML 视频就绪状态 DOM 未定义

Javascript - HTML Video readyState DOM undefined

html5-video