Promise {＜rejected＞: DOMException: play() failed because the user didn‘t int

工作中在使用video时候遇到了如下报错：

大体意思是说，不能再没有用户交互的情况下来使用play方法。
官方说的是为了移动端的带宽和仿扰民阻止了自动播放，只要用户在页面上有交互动作后，就可以自动播放了；

经研究发现，该报错只会针对于会播放声音的媒体数据，我们只要在标签上加上 muted 属性，即可不报错

<video muted autoPlay >
    您的浏览器不支持 video 标签。
</video>

其他问题：

使用vido时候，如何自定义进度条？

首先不适用video自带的control，之后只需要获取视频的播放进度，再使用一个绝对定位的div模拟进度即可。获取播放进度的关键方法为 onTimeUpdate
该函数在视频播放时候及时执行，我们在其中可以使用 dom.currentTime 属性即可获取到当前视频的播放位置。
MDN链接

示例代码（react版本）

const player = useRef(null);

const onTimeUpdate = useCallback((video) => {
    const currentTime = player.current?.currentTime || 0;
    setProgress(currentTime / (duration / 1000) * 100)
  }, [player, duration])
 
 ...
 
<video muted autoPlay ref={player} src={sourceUrl}
 onTimeUpdate={onTimeUpdate}>
    您的浏览器不支持 video 标签。
</video>