动态抓取vedio元素帧显示，点击帧图像跳转回放视频

Posted 2023-03-31 土豆Coder

动态抓取vedio元素帧显示，点击帧图像跳转回放视频

• 说明
• 视频时序查看器
• • 动态抓取vedio元素帧显示
  • 点击帧图像跳转回放视频
• 效果

说明

创建一个简单的视频时序查看器，当视频播放时，定期从视频中抓取图像帧并绘制到旁边的 canvas 上，当用户点击 canvas 上显示的任何一帧时，所播放的视频会跳转到相应的时间点。

视频时序查看器

<video controls width="550px" height="310" id="video">
  <source src="./告白气球.mp4">
</video>
<canvas id="canvas"></canvas>

其中 video 用来播放视频，canvas 用来绘制抓取到的帧图片。此时，可以显示视频，点击播放可以播放，下面要做的是在点击播放的时候获取到事件处理函数，定时抓图图片并绘制到 canvas 画布上。

注意：autoplay 属性需要配合 muted 属性，否则无法自动播放（因为它害怕自动播放吓死你，所以必须先静音才能自动播放，很nice）

动态抓取vedio元素帧显示

涉及到的事件处理函数有：

• 点击播放的事件处理函数为 onplaying
• 点击暂停的事件处理函数为 onpause
• 视频播放结束的事件处理函数为 onended
• canvas 使用视频作为绘制来源时（context.drawImage(video, picX, picY, picWidth, picHeight)），画出来的只是当前播放的帧

<video controls width="550px" height="310" id="video" onplaying="startVideo()" onpause="clearTimer()" onended="clearTimer()">
  <source src="./告白气球.mp4">
</video>

let timer = null // 定时器（播放完需要清除）
const timerInterval = 1 // 抓取间隔 s
let picCount = 0 // 当前帧索引
let videoTime = 0 // 资源时长
const picWidth = 110
const picHeight = 62
const xCount = 12
let grid = 0

let canvas = document.querySelector('#canvas')
canvas.width = picWidth * xCount
canvas.style.background = 'beige'
context = canvas.getContext('2d')

let video = document.querySelector('#video')
let videoWidth = video.width
let videoHeight = video.height
video.volume = 0.3 // 设置音量
video.oncanplay = function () 
  videoTime = video.duration
  let yCount = Math.ceil(videoTime / timerInterval)
  grid = xCount * yCount
  canvas.height = picHeight * yCount


// 开始播放后开始抓图
function startVideo()
  videoShot()
  timer = setInterval(videoShot, timerInterval * 1000)


// 将抓取的帧绘制到canvas上
function videoShot()
  // %求余数
  // picCount: 0,1,2,3,4,....
  // picPostion: 0,1,2,3,4,...12,0,1,2,3,4,...12,...
  // picX: 0*110, 1*110, 2*110, 0*110,...
  // picY: 0, 0, 0, 300, 300, 300, 600, ...
  let picPostion = picCount % grid
  let picX = (picPostion % xCount) * picWidth
  let picY = (Math.floor(picPostion / xCount)) * picHeight
  context.drawImage(video, picX, picY, picWidth, picHeight)
  picCount++


// 播放结束
function clearTimer()
  clearInterval(timer)

注意：获取资源的时长 video.duration 需要等资源加载完成 video.oncanplay = function () // 获取时长

点击帧图像跳转回放视频

// 开始播放后开始抓图
function startVideo()
  if(timer) 
    clearTimer() // 清除定时器
  
  videoShot()
  timer = setInterval(videoShot, timerInterval * 1000)


// 单击canvas上某一帧时定位到视频
canvas.onclick = function(e)
  let offX = e.offsetX - canvas.offsetLeft
  let offY = e.offsetY - canvas.offsetTop + 310 // 310 是video的高度

  // 点击的帧索引值
  let clickedFrame = Math.floor(offY / picHeight) * xCount
  clickedFrame += Math.floor(offX / picWidth)

  // 定位到指定帧位置
  video.currentTime = clickedFrame * timerInterval
  picCount = clickedFrame

注意：设置当前播放时间时 video.currentTime 会触发 startVideo，因此需要在 startVideo 中判断清除定时器

效果

我伦帅炸！！！

视频资源自取。