网络/本地上传视频使用canvas获取封面

最新推荐文章于 2024-08-13 13:42:50 发布

咸喵小宇

最新推荐文章于 2024-08-13 13:42:50 发布

阅读量156

点赞数 1

文章标签：音视频前端 javascript

本文链接：https://blog.csdn.net/weixin_41792662/article/details/140448704

版权

1.难点：没整过，什么第一帧啊啥的

2.知识点：使用canvas获取

1.网络视频

  let videoUrl = "你的网络地址";
  // 创建 video 元素 要把video放在网页上，并且还得在可视区内，所以加个定位脱离文档流且加个透明度藏起来
  const videoElement = document.createElement('video');
  videoElement.src = videoUrl;
  videoElement.style.position = 'fixed';
  videoElement.style.zIndex = -122;
  videoElement.style.opacity = 0;
  let body = document.querySelector('body');
  body.appendChild(videoElement);
  // videoElement.crossOrigin = 'anonymous'; // 可能跨域

  // 监听视频事件
  videoElement.addEventListener('loadedmetadata', () => {
    // 获取视频的宽高
    const videoWidth = videoElement.videoWidth;
    const videoHeight = videoElement.videoHeight;

    // 获取 canvas 元素并设置宽高
    const canvas = document.createElement('canvas');
    canvas.width = videoWidth;
    canvas.height = videoHeight;
    
    // 获取 canvas 的绘图上下文
    const ctx = canvas.getContext('2d');
    
    // 将视频的第一帧绘制到 canvas 上
    setTimeout(() => {
      ctx.drawImage(videoElement, 0, 0, videoWidth, videoHeight);
      body.appendChild(canvas);
    }, 100);
  });

2.本地上传的

<body>
  <input type="file" id="video-file" accept="video/*" />
</body>

<script>
  const videoFileInput = document.getElementById('video-file');
  const body = document.querySelector('body');
  videoFileInput.addEventListener('change', (event) => {
    const videoFile = event.target.files[0];
    // 在这里对视频文件进行处理
    processVideoFile(videoFile);
  });
  function processVideoFile(videoFile) {
    // 创建一个 video 元素
    const videoElement = document.createElement('video');

    // 监听 video 元素的 'loadedmetadata' 事件
    videoElement.addEventListener('loadedmetadata', () => {
      // 设置视频时间为 0 秒,获取第一帧
      videoElement.currentTime = 0;

      // 创建一个 canvas 元素
      const canvas = document.createElement('canvas');
      canvas.width = videoElement.videoWidth;
      canvas.height = videoElement.videoHeight;

      // 获取 canvas 的绘图上下文
      const ctx = canvas.getContext('2d');

      // 将视频的第一帧绘制到 canvas 上
      setTimeout(() => {
        ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
        // ctx.drawImage(videoElement, 0, 0, videoWidth, videoHeight);
        body.appendChild(canvas);
      }, 100);
    });

    // 设置视频源为用户选择的文件
    videoElement.src = URL.createObjectURL(videoFile);
  }
</script>