video 播放器自动播放问题, video视频截图

最近在写9宫格视频播放的功能，需要自动播放，但是发现一个问题，有些浏览器是禁止自动播放带音频的视频的，即使有的可以自动播放，但是页面刷新后，视频不会自动播放。

后面查找资料，因为是禁止有音频的视频播放，所以把视频进行静音就可以了。

video 有个属性 muted 表示是否静音播放，设置muted=muted 就可以自动播放了，不管在什么浏览器或者刷新都会自动播放

还有一种方法是，用js去监听执行play()方法，

如果要有声音播放，可以先muted,然后500后设置音量大小

<video
      width="100%"
      height="100%"
      :src="video.videoUrl"
      :poster="video.liveVideoThumbnail"
      autoplay
      muted
      >

附上效果图

 这里还有一个样式布局问题，video 标签有width,height可以设置，一般都是在一个容器里面包裹着video，video设置宽高100%，video会自动按照比例16:9显示完整的视频内容。

video还有一个属性，object-fit:contain,默认是contain 就是视频自适应在容器内，还可以设置object-fit:cover ，要全铺满的话就是object-fit:fill 

可以只设置video的width, 然后让video高度自适应

视频截图功能

const myVideo=document.getElementById("video1");
  const canvas = document.getElementById('canvas')
  // can.width = myVideo.offsetWidth
  canvas.width = Math.ceil(myVideo.offsetHeight /9) * 16   // 获取视频画面的真实宽度
  canvas.height = myVideo.offsetHeight
  
  canvas.getContext('2d').drawImage(myVideo, 0, 0, can.width, can.height)
  let img = canvas.toDataURL('image/png', 1.0)
  document.getElementById("img").src = img