正文

视频大小获取：教你JavaScript轻松获取网页视频文件尺寸全攻略

/0 浏览量
1111

在网页开发中，有时候我们需要获取视频文件的尺寸信息，以便于我们进行视频的播放、显示或者布局。JavaScript 提供了多种方法来获取视频文件的尺寸，下面我将详细介绍如何在网页中轻松获取视频文件的尺寸。

前言

获取视频尺寸的方法主要有两种：一种是通过 HTML5 的 HTMLVideoElement 接口，另一种是通过 JavaScript 中的 FileReader 对象。下面将详细介绍这两种方法。

方法一：使用 HTML5 的 HTMLVideoElement

HTML5 视频元素 <video> 自带了一个接口 HTMLVideoElement，该接口有一个属性 videoWidth 和 videoHeight，可以用来获取视频的宽度和高度。

1.1 HTML 部分

首先，在 HTML 中添加一个视频元素：

<video id="myVideo" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持视频标签。
</video>

1.2 JavaScript 部分

然后，通过 JavaScript 获取视频尺寸：

var video = document.getElementById('myVideo');
console.log('视频宽度：' + video.videoWidth);
console.log('视频高度：' + video.videoHeight);

方法二：使用 JavaScript 的 FileReader

当视频文件是通过 <input type="file"> 选择后上传时，可以使用 FileReader 对象来读取文件的元数据，包括视频尺寸。

2.1 HTML 部分

添加一个文件选择输入：

<input type="file" id="fileInput">

2.2 JavaScript 部分

使用 FileReader 获取视频尺寸：

var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
  var file = e.target.files[0];
  if (file.type.match('video.*')) {
    var reader = new FileReader();
    reader.onload = function(e) {
      var video = document.createElement('video');
      video.src = e.target.result;
      video.onloadedmetadata = function() {
        console.log('视频宽度：' + video.videoWidth);
        console.log('视频高度：' + video.videoHeight);
      };
      video.play();
    };
    reader.readAsDataURL(file);
  } else {
    alert('请选择一个视频文件！');
  }
});

总结

以上介绍了两种在网页中获取视频尺寸的方法。使用 HTML5 的 HTMLVideoElement 接口适合视频直接嵌入网页的情况，而使用 FileReader 则适合从文件选择器中上传视频文件的情况。希望这些方法能够帮助你在网页开发中更好地处理视频尺寸信息。

-- 展开阅读全文 --