【html】利用生成器函数和video元素，取出指定时间的视频画面

最新推荐文章于 2024-07-12 01:09:29 发布

ZSK6

最新推荐文章于 2024-07-12 01:09:29 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签：前端 html5

本文链接：https://blog.csdn.net/qq_43231248/article/details/133814207

版权

前端专栏收录该内容

51 篇文章 1 订阅

订阅专栏

简言

有的时候想截取视频某一秒的视频画面。
手动截取操作麻烦，还得时刻关注视频播放时间。
于是，我搞出来了一个根据视频自动截取特定时间描述的页面。

效果

在这里插入图片描述

实现步骤

获取视频对象
根据视频时长生成时间选择表单
根据表单选择的时间和视频地址，利用canvas和vido元素生成某一帧的视频画面图片
图片实现下载

源码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>处理视频</title>
  <style>
    .container {
      margin: 50px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="upload__box">
      <input id="upVideo" name="upVideo" type="file" accept="video/*" placeholder="上传视频" />

    </div>
    <div class="video__box">
      <video width="800" height="450" id="video" src="" controls></video>
    </div>
    <div class="select__box">

    </div>
    <div class="analyze__text">

      <ul>

      </ul>
    </div>
  </div>

  <script>
    const upVideoDom = document.getElementById("upVideo")
    const videoDom = document.getElementById('video')
    const selectBoxDom = document.querySelector('.select__box')
    const TextListDom = document.querySelector('.analyze__text')
    upVideoDom.addEventListener("change", (e) => {
      const file = e.target.files[0];
      let videoURL = URL.createObjectURL(file)
      videoDom.src = videoURL

      videoDom.onloadedmetadata = (e) => {
        //  视频时长
        let videoDuration = e.target.duration
        createTimeSelectDom(videoDuration)
      }

    })
    //  根据时长创建dom选择器
    function createTimeSelectDom(duration) {
      //  生成可选秒数列表
      let fragDom = document.createDocumentFragment()
      let form = document.createElement("form")
      form.id = 'selectForm'
      form.name = 'selectForm'
      if (duration < 60) {
        let selectDom = document.createElement("select")
        selectDom.multiple = true
        selectDom.form = "selectForm"
        selectDom.name = "seconds"
        let optionDom = document.createElement("option")
        optionDom.innerText = '--选择秒数--'
        optionDom.value = ''
        selectDom.appendChild(optionDom)
        for (let i = 0; i < duration; i++) {
          let item = i.toString().padStart(2, '0')
          let optionDom = document.createElement("option")
          optionDom.innerText = item
          optionDom.value = item
          selectDom.appendChild(optionDom)
        }
        form.appendChild(selectDom)
      } else if (duration < 3600) {
        let minute = duration / 60
        let seconds = duration % 60
        let miuteSelectDom = document.createElement("select")
        miuteSelectDom.form = "selectForm"
        miuteSelectDom.name = "mintue"
        let optionDom = document.createElement("option")
        optionDom.innerText = '--选择分--'
        optionDom.value = ''
        miuteSelectDom.appendChild(optionDom)
        for (let i = 0; i < minute; i++) {
          let item = i.toString().padStart(2, '0')
          let optionDom = document.createElement("option")
          optionDom.innerText = item
          optionDom.value = item
          miuteSelectDom.appendChild(optionDom)
        }
        let secondsSelectDom = document.createElement("select")
        secondsSelectDom.multiple = true
        secondsSelectDom.form = "selectForm"
        secondsSelectDom.name = "seconds"
        let optionDom2 = document.createElement("option")
        optionDom2.innerText = '--选择秒数--'
        optionDom2.value = ''
        secondsSelectDom.appendChild(optionDom2)
        for (let i = 0; i < 59; i++) {
          let item = i.toString().padStart(2, '0')
          let optionDom = document.createElement("option")
          optionDom.innerText = item
          optionDom.value = item
          secondsSelectDom.appendChild(optionDom)
        }
        form.appendChild(miuteSelectDom)
        form.appendChild(secondsSelectDom)

      } else {

      }
      let submitInput = document.createElement("input")
      submitInput.type = 'submit'
      submitInput.value = '确定'
      form.onsubmit = formSubmit
      form.appendChild(submitInput)
      let resetInput = document.createElement("input")
      resetInput.type = 'reset'
      resetInput.value = '重置'
      form.appendChild(resetInput)
      fragDom.appendChild(form)
      selectBoxDom.appendChild(fragDom)
    }
    function formSubmit(e) {
      e.preventDefault()
      let mintueV = '00'
      if (selectForm.mintue) {
        mintueV = selectForm.mintue.value
      }
      let timeList = []
      for (let v of selectForm.seconds.options) {
        if (v.selected) {
          timeList.push(`${mintueV}:${v.value}`)
        }
      }
      //  生成帧图片
      TextListDom.children[0].innerHTML = ''
      createFramepicture({
        url: videoDom.src, timeList
      })
    }
    //  生成帧图片列表
    function createFramepicture({ url, timeList, }) {
      if (!url || !timeList) return
      let time;

      const video = document.createElement('video')
      video.width = 160
      video.height = 90
      video.crossorigin = "anonymous"
      video.src = url

      let canvas = document.createElement("canvas"),
        width = video.width,
        height = video.height;
      canvas.width = width
      canvas.height = height

      function* createTime() {
        for (let k = 0; k < timeList.length; k++) {
          time = timeList[k]


          let timeArr = time.split(':')
          let currentTime = Number(timeArr[0]) * 60 + Number(timeArr[1])

          video.currentTime = currentTime //  会导致 oncanplaythrough重新触发
          yield true


        }
      }
      let a = createTime()
      video.oncanplaythrough = () => {

        if (time) {
          //  当time存在时再渲染，避开video第一次加载成功
          analyzeVideo(video, time, canvas)
        }
        a.next()

      }


    }
    function analyzeVideo(video, time, canvas) {
      const ctx = canvas.getContext('2d')

      // ctx.clearRect(0, 0, video.width, video.height)
      ctx.drawImage(video, 0, 0, video.width, video.height);
      let dataURL = canvas.toDataURL("image/png")
      let li = document.createElement('li')

      let img = document.createElement('img')
      img.src = dataURL
      let p = document.createElement('p')
      p.innerText = `第${time}图`

      let btn = document.createElement('button')
      btn.innerText = '下载'
      btn.onclick = () => {
        downloadImg(dataURL, time)
      }
      li.appendChild(p)
      li.appendChild(img)
      li.appendChild(btn)

      const fragDom = document.createDocumentFragment()
      fragDom.appendChild(li)

      TextListDom.children[0].appendChild(fragDom)


    }


    function downloadImg(src, time) {
      let a = document.createElement('a')
      a.href = src
      a.download = `frame picture`
      a.click()
    }
  </script>
</body>

</html>