将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 + '秒';
});

相关问题

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

在将canvas转化为视频后，需要设置视频的时长。你可以在调用`mediaRecorder.start()`的时候，同时设置`mediaRecorder.duration`属性来指定视频的时长。例如：

mediaRecorder.duration = 5000; // 设置视频时长为5秒
mediaRecorder.start();

另外，如果你在插入页面时仍然无法显示视频的时长，可以检查一下你插入视频时是否正确设置了`<video>`标签的`width`和`height`属性，这些属性会影响视频的显示效果。同时，你也可以检查一下你使用的视频播放器是否支持显示视频的时长。

将div转化为canvas，然后转化为视频

要将div转换为canvas，可以使用HTML5 Canvas元素的API。您可以使用`html2canvas`库将HTML元素转换为Canvas元素。该库将HTML元素转换为Canvas元素，您可以使用这个Canvas元素来创建视频。

下面是一个示例代码：

//使用html2canvas库将div转换为canvas
html2canvas(document.querySelector("#yourDiv")).then(canvas => {
  //获取视频的宽度和高度
  const width = canvas.width;
  const height = canvas.height;

  //创建一个新的canvas元素，用于渲染视频
  const videoCanvas = document.createElement("canvas");
  videoCanvas.width = width;
  videoCanvas.height = height;

  //将div转换的canvas绘制到新的canvas中
  const ctx = videoCanvas.getContext("2d");
  ctx.drawImage(canvas, 0, 0, width, height);

  //将canvas转换为视频
  const stream = videoCanvas.captureStream();
  const mediaRecorder = new MediaRecorder(stream);
  const chunks = [];

  //开始录制
  mediaRecorder.start();

  //监听录制数据
  mediaRecorder.ondataavailable = e => {
    chunks.push(e.data);
  };

  //停止录制
  mediaRecorder.onstop = () => {
    const blob = new Blob(chunks, { type: "video/webm" });

    //将Blob转换为URL
    const url = URL.createObjectURL(blob);

    //在页面上显示视频
    const video = document.createElement("video");
    video.src = url;
    document.body.appendChild(video);
  };

  setTimeout(() => {
    mediaRecorder.stop();
  }, 5000); //录制5秒钟
});

这个代码将您指定的div元素转换为Canvas元素，然后将Canvas元素转换为视频，并在页面上显示它。您可以根据需要更改代码来实现您的目标。