在用户上传reactjs上获取mp4的尺寸

时间:2018-09-19 03:49:40

标签: javascript reactjs html5-video width media

我正在创建一个网页,其中有一个用户上传文件。当他们上传文件时,我需要能够获取他们上传内容的宽度和高度。该网站仅接受媒体。我得到了可以正常工作的图像的宽度和高度,因为您可以在加载元数据时从元数据中获取它,但是我无法在视频中获得它。

    var video = document.createElement('video');

    video.onloadedmetadata = () => {
        console.log("Video loaded!");
        alert("width: " + this.width + "\n" + "height: " + this.height);
    };
    video.onerror = () => {
        alert ("Error!");
    };
    video.src = _URL.createObjectURL(files[0]);

这是我目前拥有的,但始终将宽度和高度设置为0。我已经看到了使用Jquery的一些解决方案,但没有任何带有react的解决方案。

关于如何做到这一点的任何想法?谢谢

1 个答案:

答案 0 :(得分:1)

如果我正确理解了您的问题,那么您可能想访问videoWidth元素上的videoHeightvideo属性。

例如,尝试像这样更新onloadedmetadata处理程序:

video.onloadedmetadata = () => {
    console.log("Video loaded!");
    alert("width: " + video.videoWidth + "\n" + "height: " + video.videoHeight);
};

希望有帮助!