Uncaught (in promise) DOMException 报错

最近在项目里面加入视频自动播放，有时候会报错(RT)，不能自动播放。

<video
	id="videoPlayer"
	v-show="!isNormalCamera"
	class="preview-video"
	name="media"
	controls="controls"
	autoplay="autoplay"
	loop
>
	<source :src="videoSrc" type="video/mp4">
</video>

然后查了一下说是Chrome浏览器会禁止自动播放 https://developers.google.com/web/updates/2017/09/autoplay-policy-changes 。然后里面有解决办法，代码如下。

var promise = document.querySelector('video').play();

if (promise !== undefined) {
     promise.then(_ => {
     // Autoplay started!
 }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

当我这样写的时候发现问题还没有解决。然后在 找到了另一个解决方法就是 在标签里面加入 muted="muted" 然后问题解决。

<video
	id="videoPlayer"
	v-show="!isNormalCamera"
	class="preview-video"
	name="media"
	muted="muted"
	controls="controls"
	autoplay="autoplay"
	loop
>
	<source :src="videoSrc" type="video/mp4">
</video>