526互联

获取视频的时长

发布时间 2024-01-09 17:57:03作者: 艾前端

可以通过原生 JS 获取本地视频的时长，不需要借助第三方插件。

实现步骤如下：

  1. 使用 input[type=file]，设置上传文件控件，限制上传类型为 video/mp4，指定上传视频。
  2. 通过监听 change 事件，获取到原视频。
  3. 使用 FileReader 对象，用于读取 File 对象，并通过 readAsDataURL() 实例方法获取文件内容。
  4. 在 load 事件（读取操作完成）的监听函数中，使用 result 属性，拿到文件内容，是一个 Data URL 格式（Base64 编码）的字符串，以 data:video/mp4;base64, 开头。
  5. 待媒体文件元数据加载成功 loadedmetadata 后，获取该视频的时长。
<input id="video" type="file" accept="video/mp4" />

const video = document.getElementById("video");
video.onchange = (e) => {
	const file = e.target.files[0]; // 获取到原视频
	const reader = new FileReader(); // 生成 FileReader 实例，用于读取 File 对象
	reader.readAsDataURL(file); // 读取 File 对象。读取操作完成的时候，result 属性将包含一个data:URL 格式的字符串（base64 编码）以表示所读取文件的内容
	reader.onload = () => {
        // 文件（视频）读取完成
		const video = document.createElement("video"); // 创建一个视频元素，用于接收读取到的文件内容
		video.src = reader.result;
		console.log("视频内容", reader.result); // 以 `data:video/mp4;base64,` 开头的视频内容
		video.onloadedmetadata = () => {
            // 视频元数据加载成功
            // video.duration 返回浮点数，表示媒体文件的时间长度（单位秒）
			console.log("视频时长", video.duration); // 视频时长 12.612            
		}
	};
}

原视频 12s，用于测试：

视频时长

最后获取到的 duration 属性值是 12.612，浮点数，取整数即可。