ビデオ要素のフレーム表示を動的にキャプチャし、フレーム画像をクリックして再生ビデオにジャンプします

例証する

単純なビデオ タイミング ビューアを作成します。ビデオの再生中、定期的にビデオから画像フレームを取得し、次のcanvasにcanvas。間に合います。

ビデオ タイミング ビューア

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

このうちvideo、canvas動画の再生やキャプチャしたフレーム画像の描画に使用されます。この時点で、ビデオが表示され、クリックして再生することができます。次に行うことは、クリックして再生するときにイベント処理関数を取得し、定期的に写真をキャプチャしてcanvasキャンバス

注:autoplayアトリビュートはmutedアトリビュート。そうしないと、自動再生できません (自動再生で怖がって死ぬのではないかと恐れているため、自動再生する前にミュートする必要があります。これは非常に便利です)。

vedio 要素のフレーム表示を動的にキャプチャする

関連するイベント ハンドラーは次のとおりです。

• Click to Play のイベント ハンドラは次のとおりです。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は

効果

私のルンはハンサムです！! !

ビデオ リソースは自己収集されます。