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

标签 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 的解决方案,但没有反应。

关于如何做到这一点有什么想法吗?谢谢

最佳答案

如果我对你的问题的理解正确,那么你会想要访问 video 元素的 videoWidthvideoHeight 属性。

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

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

希望对您有所帮助!

关于javascript - 在用户上传 reactjs 时获取 mp4 的尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52397746/

相关文章:

javascript - Jquery 自动完成字体 : change font in the box

node.js - dotenv 不适用于 root 权限

javascript - 检测 HTML5 视频音量属性是否为只读?

javascript - 如何使用 React Ref 调用 video.play()?

javascript - 使用另一个组件更新/刷新一个组件

google-chrome - 在 Chrome 打包应用中播放本地视频文件

javascript - X-editable 不更新数据库中的值

javascript - 获取点击事件的目标 URL - 客户端

javascript - scrollTo 滚动到页面顶部

performance - React 组件隐藏还是重新创建?