js音&视频获取时间

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/setlilei/article/details/100850093

获取文件元数据分为两种

1. 获取上传文件的input音&视频元数据 (本文主题)
2. 获取video&audio标签元数据 (js可直接获取 看完本文可解决)

如下为两种js解决思路

new Audio的方式获取

<input id="video-input" accept=".mp4" type="file"
onchange="submitVideo()">点击选择

<video id="video-show" controls="controls">
your browser does not support the video tag
</video>

/** 上传文件主方法 */
window.submitVideo = function () {
	// 获取视频文件 id为file input id
	const blob = document.getElementById('video-input').files[0];
	getVideoTime(blob);
	...
}

window.getVideoTime = function (blob) {
    // 创建DOMString URL生命周期和创建它的窗口中的document绑定
    // URL对象表示指定的File对象或Blob对象(把对象转换成url使用 十分灵活方便 特别是对于文件对象)
    const url = URL.createObjectURL(blob);

    // audio可以获取视频或音频时长
    const audioElement = new Audio(url);

    // 当音频/视频的元数据已加载时 会触发loadedmetadata事件 音频/视频的元数据(时长 尺寸(仅视频) 文本轨道)
    audioElement.addEventListener("loadedmetadata", function (_event) {
        getTime(audioElement);
    });
}

window.getTime = function (ele) {
    const hour = parseInt((ele.duration) / 3600);
    const minute = parseInt((ele.duration % 3600) / 60);
    const second = Math.ceil(ele.duration % 60);
    console.log("视频时长为 " + hour + "小时 " + minute + "分 " + second + "秒");
	// 清空video值 防止第二次获取时间失效
	document.getElementById('video-show').src = '';
}

隐藏音&视频 播放获取

<input id="video-input" accept=".mp4" type="file"
onchange="submitVideo()">点击选择

<!-- 当视频可以正常播放且无需停顿时触发oncanplaythrough事件 -->
<video id="video-show" controls="controls" oncanplaythrough="getTime(this)">
your browser does not support the video tag
</video>

/** 上传文件主方法 */
window.submitVideo = function () {
	// 获取视频文件 id为file input id
	const blob = document.getElementById('video-input').files[0];
	getVideoTime(blob);
	...
}

window.getVideoTime = function (blob) {
    const url = URL.createObjectURL(blob);

    const video = document.getElementById('video-show');

    video.src = url;
    // 当视频可以正常播放且无需停顿时触发video标签的oncanplaythrough事件
}

window.getTime = function (ele) {
    const hour = parseInt((ele.duration) / 3600);
    const minute = parseInt((ele.duration % 3600) / 60);
    const second = Math.ceil(ele.duration % 60);
    console.log("视频时长为 " + hour + "小时 " + minute + "分 " + second + "秒");
	// 清空video值 防止第二次获取时间失效
	document.getElementById('video-show').src = '';
}