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

简言

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

效果

在这里插入图片描述

实现步骤

获取视频对象
根据视频时长生成时间选择表单
根据表单选择的时间和视频地址，利用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229

结果

相关阅读:
【2012】【论文笔记】超材料的二维等价物——GSTC
Flink 结合 HyperScan 问题记录
 闭包：什么是闭包、闭包的作用、闭包的解决
 2022.07.31(LC_6133_分组的最大数量)
如何将 Docsify 项目部署到 CentOS 系统的 Nginx 中
 python 根据shp文件解析经纬度市县信息
 stable-diffusion-webui安装与使用过程中的遇到的error合集
 我的周刊（第054期）
三次握手时，客户端发送的 SYN 报文为什么会被丢弃？
Selenium——利用input标签上传文件
原文地址：https://blog.csdn.net/qq_43231248/article/details/133814207