时间戳

首页 > 解决方案 > Javascript - HTML 视频 readyState DOM 未定义

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

标签： javascripthtml5-video

解决方案

在尝试了这个之后，它现在又是如何工作的：

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

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

推荐阅读