前端实现获取mp4视频文件的某一秒视频画面图片

最新推荐文章于 2024-07-25 09:24:40 发布

胡同学ou

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量499

点赞数 8

文章标签：前端音视频

本文链接：https://blog.csdn.net/weixin_45956954/article/details/135620471

版权

1、背景

在某些短视频平台发布完成视频后选择封面时，可以选择视频中某一秒的画面，看了这个，我就想前端能不能实现，开始了我的尝试。

2、思路

思路:上传视频文件，拿到某一秒的画面，并且给它画到页面上

关键点：1、拿到某一秒的画面。2、画到页面上。

拿到某一秒的画面可以使用video标签，给它暂停到那一秒，画到页面上，可以使用canvas。

3、代码实现

<!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>
  <input id="update" type="file">
</body>

<script>

  const update = document.getElementById('update');
  update.addEventListener('change', e => {
    const file = e.target.files[0];
    selectImage(file)
  })

  function selectImage(file, time = 0) {
    const vdo = document.createElement('video')
    vdo.src = URL.createObjectURL(file)
    // console.log('vdo', vdo.src)
    vdo.muted = true
    vdo.autoplay = true
    vdo.currentTime = time
    vdo.oncanplay = () => {
      const cvs = document.createElement('canvas')
      const ctx = cvs.getContext('2d')
      ctx.drawImage(vdo, 0, 0, 100, 100)
      document.body.appendChild(cvs)
    }
  }

</script>

</html>

URL.createObjectURL 方法会返回一个字符串，即创建的 URL。这个 URL 可以被用于各种场景，比如设置视频或音频元素的 src 属性，或者作为链接的 href 属性等。
在vscode中使用open in live server打开这个文件，打印vdo.src，复制这个链接，视频是可以直接在浏览器播放的，想查看更多的url方法，打开链接：URL