Question

我一直试图拼凑HTML5视频标签和FileReader API的组合，但我还没弄明白如何从用户自己的计算机获取用户提供的视频尺寸。

以下是我参考宽度/高度的内容：

<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标签选择）来执行此操作。

谢谢！

Answer 1

使用基本FileReader +数据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>

Answer 2

您可以使用高度和宽度属性

设置高度和宽度
<video controls> <source src="Funny side up- Life of engineers_HIGH.mp4" type="video/mp4"> </video> <script> var video = document.getElementsByTagName("video")[0]; video.height = 300; video.width = 700; </script>

Answer 3

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

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

客户端Javascript在上传之前获得视频宽度/高度

3 个答案: