js从视频文件中取帧截图

我不当帕鲁谁当帕鲁

已于 2024-03-11 17:17:59 修改

阅读量547

点赞数 6

文章标签： javascript

于 2024-03-11 16:38:55 首次发布

本文链接：https://blog.csdn.net/qq_33982898/article/details/136627970

版权

本文介绍了如何使用HTML5Canvas技术从视频中提取帧，并通过toDataURL方法将其转换为数据URL，同时处理了跨域问题，以在浏览器中显示提取的帧。

摘要由CSDN通过智能技术生成

在实现这一过程时，我们首先加载视频文件，然后使用HTML5 Canvas创建一个画布。接着，我们可以通过Canvas的toDataURL方法将帧转换为数据URL，方便在需要时进行进一步处理或展示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <video id="myVideo" width="640" controls autoplay muted crossOrigin="anonymous">
      <source src="http://xxx.xx.xxx/test.mp4" type="video/mp4" />
      <!-- <source src="./test.mp4" type="video/mp4" /> -->
      浏览器不支持HTML5视频
    </video>
    <div>
      <button id="btn" onclick="" style="width: 80px; height: 40px">提取</button>
    </div>

    <h3>帧：</h3>
    <div id="frames"></div>

    <script>
      const video = document.querySelector('#myVideo')
      const frames = document.querySelector('#frames')

      document.querySelector('#btn').addEventListener('click', e => {
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
        canvas.width = video.videoWidth
        canvas.height = video.videoHeight

        ctx.drawImage(video, 0, 0, canvas.width, canvas.height)

        const base64 = canvas.toDataURL('image/png')
        // const base64 = canvas.toDataURL()

        const img = document.createElement('img')
        img.src = base64
        img.style.width = '320px'
        img.style.height = 'auto'
        img.style.marginLeft = '3px'

        frames.appendChild(img)
      })
    </script>
  </body>
</html>

注意：如果使用服务端mp4文件，可能涉及跨域问题（报错：Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.），必须在video标签上加 crossOrigin="anonymous"属性