客户端Javascript在上传前获取视频宽度/高度答案

【问题标题】：Client side Javascript get video width/height before upload客户端Javascript在上传前获取视频宽度/高度
【发布时间】：2017-09-03 14:54:47
【问题描述】：

我一直在尝试将 HTML5 视频标签 + FileReader API 组合在一起，但我还没有弄清楚如何获取用户从他们自己的计算机提供的视频的尺寸。

这是我所引用的宽度/高度：

HTML5 Video Dimensions

<video id="foo" src="foo.mp4"></video>

var vid = document.getElementById("foo");
vid.videoHeight; // returns the intrinsic height of the video
vid.videoWidth; // returns the intrinsic width of the video

但我想知道是否可以使用来自用户计算机的文件（他们通过普通输入 html 标记选择的文件）来执行此操作。

谢谢！

【问题讨论】：

File 实例不公开底层文件内容的内容，在 .type 属性、.size、.lastModified 和 .lastModifiedDate 处保存 MIME 类型。您可以创建一个<video> 元素，将.src 设置为Blob URL 或data URI 表示文件，利用loadedmetadata 事件获取视频媒体的维度，请参阅stackoverflow.com/a/4129579

标签： javascript html

【解决方案1】：

使用基本 FileReader + Data URL 的有点不干净的解决方案。

<html>
  <head>
<style>
div {
    margin: 20px;
}
</style>
  </head>
  <body>
    <h1>Get Dimensions</h1>
    <div>
        <label for="load-file">Load a file:</label>
          <input type="file" id="load-file">
    </div>
    <div>
        <button type="button" id="done-button">Get me dimensions</button>
    </div>

    <script src="//cdn.jsdelivr.net/jquery/2.1.4/jquery.js"></script>
    <script>
(function ($) {
  $('#done-button').on('click', function () {
    var file = $('#load-file')[0].files[0];
    var reader  = new FileReader();
    var fileType =  file.type;
    console.log("type", fileType);
    reader.addEventListener("load", function () {
      var dataUrl =  reader.result;
      var videoId = "videoMain";
      var $videoEl = $('<video id="' + videoId + '"></video>');
      $("body").append($videoEl);
      $videoEl.attr('src', dataUrl);

      var videoTagRef = $videoEl[0];
      videoTagRef.addEventListener('loadedmetadata', function(e){
        console.log(videoTagRef.videoWidth, videoTagRef.videoHeight);
      });

    }, false);

    if (file) {
      reader.readAsDataURL(file);
    }
  });

})(jQuery);
    </script>
  </body>
</html>

【讨论】：

不错的解决方案。我建议使用 object URL 而不是 data URL。它更容易编写，运行更高效。您可以通过以下方式获取它：URL.createObjectURL (file);，然后将其用作src 属性以创建<video> 标签。

【解决方案2】：

这是一种在上传前获取视频大小的简单快速的解决方案。它不需要任何依赖。

const url = URL.createObjectURL(file);
const $video = document.createElement("video");
$video.src = url;
$video.addEventListener("loadedmetadata", function () {
 console.log("width:", this.videoWidth);
 console.log("height:", this.videoHeight);
});

【讨论】：