video处理chrome66随机噪音问题

DOM

 <video
        @click="togglePlay"
        id="video-content"
        autoplay="true"
        loop="loop"
      >
        <source src="@/assets/show.mp4" type="video/mp4" />
      </video>

视频控制文件

function handleVideo() {
  let video = document.getElementById("video-content");
  console.log(video, video.autoplay);
  if (video.autoplay) {
    video.play();
  }
}
function togglePlay() {
  let videoContent = document.getElementById("video-content");
  if (videoContent.paused) {
    videoContent.play();
  } else {
    videoContent.pause();

问题

error： play() failed because the user didn’t interact with the document first

首次渲染不能自动播放， 加入controls控制条才可以通过点击播放，进行视频的操控