Javascript-未定义HTML视频readyState DOM

问题描述

这是代码：

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

解决方法

尝试一下之后，现在又可以使用它了：

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();
});

我不知道为什么现在需要这样，为什么直到昨天才以其他方式起作用

html5-video javascript