将div转化为canvas后，又转化为视频，用mediaRecorder.start()录制，5秒后mediaRecorder.onstop()，生成路径插入页面之后不显示时长，设置mediaRecorder.duration 也不可以

在将`<div>`转换为`<canvas>`，再转换为视频后，生成的视频是没有`duration`属性的，因此设置`mediaRecorder.duration`也不会生效。

要想在页面中显示视频的时长，可以通过JavaScript的`video`标签来实现。你可以在页面中插入一个`<video>`标签，设置其`src`属性为生成的视频路径，然后在`loadedmetadata`事件中获取视频的时长，并将其显示在页面中。

代码示例：

HTML：

<video id="myVideo" controls></video>
<p>视频时长：<span id="duration"></span></p>

JavaScript：

const video = document.getElementById('myVideo');
const durationSpan = document.getElementById('duration');

// 设置视频路径
video.src = 'path/to/your/video.mp4';

// 当视频metadata加载完成后
video.addEventListener('loadedmetadata', () => {
  // 获取视频时长
  const duration = video.duration;
  // 显示视频时长
  durationSpan.innerText = duration + '秒';
});