浏览器video标签增加自动播放设置默认图片 Uncaught (in promise) DOMException: play() failed

一、设置自动播放video video标签设置默认图片

	<video controls="" preload="none" width="640" height="427" src="videoUrl">
         <source src="videoUrl" type="video/mp4">
    </video>

	var videos = document.querySelectorAll('video'); // 获取所有视频元素
    if (videos.length > 0) {
        videos.forEach((item) => {
          item.poster = 'img/default-poster.jpg';//设置默认图片
          item.muted = "true";//默认播放需要设置静音
        })
        videos[0].play(); // 播放第一个视频 默认播放前提需要设置视频静音 浏览器行为
    }

二、注意

video.play()出现以下情况：
Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. 

问题原因：报错是由浏览器的自动播放策略引起的，现代浏览器通常会限制自动播放音视频以提升用户体验和节省带宽。设置一、中muted=true 静音效果即可解决