使用canvas给视频加水印

1. 创建canvas画布：
   <canvas id="cans" width="500" height="300"></canvas>
2. 加载一个视频文件并将其隐藏：
   <video id="videos" src="../home.mp4" controls hidden></video>

//1. 获取资源
  let video = document.getElementById('videos')
  let img = new Image()
  img.src = '../ph1.jpeg'

//2. 创建画布：
  let canvas = document.getElementById('cans')
  let ctx = canvas.getContext('2d')

//3.使用drawImage来绘制动画：
  function render(){
    ctx.drawImage(video,0,0,500,300)
    ctx.drawImage(img,400,220,60,60)
    requestAnimationFrame(render)
  }

//4.添加一个按钮来控制视频播放暂停
  document.getElementById('btn').onclick = function (){
    if(video.paused){
        video.play()
        render()
    }else{
        video.pause()
    } 
  }

效果：

image.png

收获：

通过canvas的API来绘制的时候控制起始点位置和宽高就很容易来获得我们想要的结果