如何获取录制视频后的总时长？

Question

提前致谢。 成功录制视频后遇到问题，无法获取视频总时长。 一旦用户开始录制，然后用户需要停止视频录制，因此之后无需重新加载视频就需要视频总持续时间（指视频长度，即 10:20）

HTML部分：

<video id="videoRecorded" controls></video>
 <button id="start">Start</button>
<button id="stop">Stop</button>

JS部分：使用MediaRecorder创建webm视频文件录制。

async function main() {
            const videoElement = document.getElementById('videoElement');
            const buttonStart = document.querySelector('#start')
            const buttonStop = document.querySelector('#stop')
            const buttonsubmit = document.querySelector('#submit')

            let blob = null
            const stream = await navigator.mediaDevices.getUserMedia({
                video: true,
                audio: true,
            })
            videoElement.srcObject = stream;
            if (!MediaRecorder.isTypeSupported('video/webm')) {
                console.warn('video/webm is not supported')
            }

            const mediaRecorder = new MediaRecorder(stream, {
                mimeType: 'video/webm',
            })

            buttonStart.addEventListener('click', () => {
                mediaRecorder.start() //
                buttonStart.classList.add('hidden')
                buttonStop.classList.remove('hidden')
            })

            buttonStop.addEventListener('click', () => {
                mediaRecorder.stop()
            })

            mediaRecorder.addEventListener('dataavailable', (event) => {
                blob = new Blob([event.data], {type: 'video/mp4'});
                videoRecorded.src = URL.createObjectURL(event.data)
                videoRecorded.addEventListener('loadeddata', () => {
                    console.log(videoRecorded.duration)
                })
            })
        }

        main()

注意：服务器端处理也适合此任务

Answer 1

我假设您不想使用时间间隔来计算持续时间。如果您想获得“官方”持续时间，您可以利用计时器来等待该值，因为直到流完全加载之后才会发生

Infinty

，而这又只会在

play()

之后的几分钟发生。

就是这样。有点弱，特别是如果视频很长。

mediaRecorder.addEventListener('dataavailable', (event) => {

  blob = new Blob([event.data], {
    type: 'video/mp4'
  });
  videoRecorded.src = URL.createObjectURL(event.data)

  videoRecorded.addEventListener('loadedmetadata', (event) => {
    videoRecorded.currentTime = 0
    videoRecorded.play()
    checkDuration()
  })
})

function checkDuration() {
  if (videoRecorded.duration === Infinity) {
    setTimeout(() => {
      checkDuration();
    }, 50);
  } else {
    console.log(videoRecorded.duration)
    URL.revokeObjectURL(videoRecorded.src)
  }
}