Javascript 设置视频源时没有loadedmetadata回调

我需要通过输入标签上传的视频的视频尺寸。但是，当我将上传的视频设置为视频标记的源时，loadedmetadata事件不会被调用

在此方法中，我设置了视频和侦听器：

function getVideoDimensionsOf(objUrl){
    return new Promise(function(resolve){
        let video = document.createElement('video');
        //THIS GETS CALLED AS EXPECTED
        video.addEventListener( "loadedmetadata", function () {
            //THIS GETS NEVER CALLED
            let height = this.videoHeight;
            let width = this.videoWidth;
            console.log(height,width)
        }, false );
        video.src = objUrl;
    });
}

在这个方法中，我为视频上传设置了回调：

function localFileVideoPlayer() {
  var URL = window.URL || window.webkitURL
  var uploadSelectedFile = function (event) {
    var file = this.files[0]
    var type = file.type
    var fileURL = URL.createObjectURL(file)
    var fileReader = new FileReader();
    fileReader.onload = function() {
        var videofile = this.result;
        //do something here with video data
    };
    fileReader.readAsArrayBuffer(file);
    getVideoDimensionsOf(window.URL.createObjectURL(file))//-->>HERE I CALL THE FUNCTION THAT SHOULD SET THE VIDEO SOURCE
  }
  var inputNode = document.getElementById("videofile")
  inputNode.addEventListener('change', uploadSelectedFile, false)
}

这是html上传字段：

<div>
    Upload Video:
    <input id="videofile" type="file" accept="video/*"/>
</div>

上传视频：

---

我检查了getVideoDimensionsOf方法是否被调用，但是为什么loadedmetadata侦听器没有得到回调？

因为没有任何东西强制浏览器预加载视频元素。 据它所知，你永远不会播放这个视频，所以它不会预加载它的内容是有道理的

您可以尝试通过调用其

play（）

方法来强制此预加载

函数getVideoDimensionsOf（对象）{ 返回新承诺（函数（解析）{ 让video=document.createElement（'video'）； video.mute=true；//绕过Chrome自动播放策略 addEventListener（“loadedmetadata”，函数（）{ 设高度=此高度； 让width=this.videoWidth； video.pause（）； 解析（{宽度，高度}）； }，假）； video.src=objUrl； video.play（）； }); } inp.onchange=e=>{ const url=url.createObjectURL（inp.files[0]）； getVideoDimensionsOf（url） .然后（obj=>{ revokeObjectURL（URL）； 控制台日志（obj）； }); }

localFileVideoPlayer（）；
函数getVideoDimensionsOf（objUrl）{
返回新承诺（函数（解析）{
让视频=document.createElement（“视频”）；
{
//如果需要将视频附加到文档中
video.controls=true；
文件.正文.附件（视频）；
}
//这将按预期调用
video.addEventListener(
“loadedmetadata”，
函数（）{
//这件事从来没有人打过电话
设高度=此.videoHeight；
让width=this.videoWidth；
控制台。原木（高度、宽度）；
},
假的
);
video.src=objUrl；
});
}
函数localFileVideoPlayer（）{
var URL=window.URL | | window.webkitURL；
var uploadSelectedFile=函数（事件）{
var file=this.files[0]；
var type=file.type；
var fileURL=URL.createObjectURL（文件）；
var fileReader=newfilereader（）；
fileReader.onload=函数（）{
var videofile=this.result；
//在这里用视频数据做点什么
};
readAsArrayBuffer（文件）；
getVideoDimensionsOf（window.URL.createObjectURL（file））；//-->这里我调用应该设置视频源的函数
};
var inputNode=document.getElementById（“视频文件”）；
inputNode.addEventListener（“更改”，上载SelectedFile，false）；
}

上传视频：