Canvas draws video

Canvas draws video

Main idea:

Canvas can use ctx.drawImage(video, x, y, width, height) to draw the image of the current frame of the video, where the video parameter is the video tag in HTML5. Therefore, we can continuously obtain the current image of the video through the dynamic effect of Canvas, and render it on the Canvas canvas. And by changing the attributes of the video tag, a set of effects for processing video in Canvas can be realized. It can be understood as creating a new player in Canvas. The video source of the player is created by the video tag, and various methods of the player eventually point to changes to the properties and methods of the video tag itself. Using the powerful functions of Canvas, you can further perform operations such as image processing and barrage loading.

html

<div class="videoBox">
  <img id="poster" src="http://120.77.35.150/video/video-bg.png" alt="">
  <video id="video"
    preload="auto"
    playsinline="true"
    x-webkit-airplay="true"
    webkit-playsinline="true"
    x5-video-player-type="h5"
    x-video-orientation="h5"
    x5-video-player-fullscreen="true"
    muted="false"
   src="http://120.77.35.150/video/2.mp4"></video>
  <canvas id="canvas"></canvas>
  <div id="btn">点击</div>
</div>

js

<script>
  const video = document.getElementById('video');
  const palyBtn = document.getElementById('btn');
  const canvas = document.getElementById('canvas');
  const poster = document.getElementById('poster') 
  // 初始化(创建)canvas
  const ctx = canvas.getContext('2d')
  // 获取可视宽高
  const screen_W = window.innerWidth || document.body.clientWidth
  const screen_H = window.innerHeight || document.body.clientHeight
  // 设置画布宽高（画布宽高，最好是根据设计视频所做实际宽高）
  canvas.width = screen_W * 3 // 获取屏幕宽度作为canvas的宽度 这个设置的越大，画面越清晰（相当于绘制的图像大，然后被css缩小）
  canvas.height = screen_H * 3 + 12
  // 绘制视频
  palyBtn.addEventListener('touchstart', function (e) {
    
    
    e.preventDefault()
    poster.style.display = 'none'
    // 绘制背景
    ctx.fillStyle = '#000'
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    if (video.paused) {
    
    
      video.play()
    } else {
    
    
      video.pause()
    }
  })
  video.addEventListener('play', playCallBack)
  function playCallBack() {
    
    
    if (video.paused) {
    
    
       return;
    }
    captureFrame();
    setTimeout(playCallBack, 40);
  }
  function captureFrame() {
    
    
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
  }
</script>

css

<style>
* {
    
    
margin: 0;
padding: 0;
}
body {
    
    
overflow: hidden;
}
.videoBox {
    
    
width: 100%;
height: 100%;
position: relative;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
img {
    
    
position: absolute;
display: block;
width: 100%;
height: 100%;
}
#btn {
    
    
position: absolute;
width: 50px;
height: 50px;
background-color: #ccc;
border-radius: 50%;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
line-height: 50px;
text-align: center;
}
canvas {
    
    
width: 100%;
height: 100%;
}
video {
    
    
position: absolute;
display: none;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
</style>

【Note】drawImage

The drawImage function has three function prototypes:

drawImage(image, dx, dy) Draw the original image at the specified position on the canvas
drawImage(image, dx, dy, dw, dh) Draw an image of the specified size at the specified position on the canvas according to the size of the original image
drawImage(image, sx, sy, sw , sh, dx, dy, dw, dh) crops the image and positions the clipped part on the canvas: