将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元素转换为视频，并在页面上显示它。您可以根据需要更改代码来实现您的目标。

将canvas保存为视频

要将Canvas保存为视频，您需要使用JavaScript中的Canvas API和WebGL API。具体步骤如下：

1.使用Canvas API和WebGL API创建动画

2.使用MediaRecorder API将Canvas捕获并转换为视频流。

3.将视频流保存为MP4文件。

以下是示例代码：

// 获取canvas元素
const canvas = document.getElementById('myCanvas');

// 创建MediaRecorder对象
let recorder = new MediaRecorder(canvas.captureStream(), {
  mimeType: 'video/webm'
});

// 创建一个数组来存储视频帧
let videoFrames = [];

// 监听录制数据可用事件
recorder.ondataavailable = event => {
  if (event.data && event.data.size > 0) {
    videoFrames.push(event.data);
  }
};

// 监听录制完成事件
recorder.onstop = () => {
  // 创建Blob对象
  let blob = new Blob(videoFrames, {type: 'video/mp4'});

  // 创建下载链接并下载文件
  let url = URL.createObjectURL(blob);
  let a = document.createElement('a');
  a.href = url;
  a.download = 'myVideo.mp4';
  a.click();
};

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

// 动画渲染循环
function render() {
  // 渲染代码...

  // 添加帧到录制器
  recorder.requestData();
  requestAnimationFrame(render);
}

// 开始渲染
requestAnimationFrame(render);

请注意，这只是一个基本的示例代码，并且在实际应用中可能需要进行更多的调整和优化。