浏览器播放策略

浏览器的自动播放策略，主要是为了改善用户体验，不然打开一个网站，在公共场合时，突然冒出来声音会很尴尬

• 1、当视频静音时，允许自动播放

  • 设置muted属性，表示静音，浏览器会自动播放
  • 因为视频静音，相当于和动图没什么区别

• 2、在以下情况下，允许自动有声播放：

  • 1、用户与网站进行互动，比如事件交互、点击
  • 2、将网站添加到主屏幕，或者安装了PWA
  • 3、用户的媒体参与度指数阈值已超过 （这意味着用户之前播放过有声音的视频）

最佳实践

• 1、一种吸引用户的好方法是，使用静音自动播放功能，让用户选择取消静音
  • 先尝试自动播放，若发生异常，引导用户进行互动操作

js

    const videoPlay = async () => {
        try {
            // 播放视频
            await video.play();
        } catch (err) {
            // 显示提示，打开播放，让用户点击播放
            setOpenPlayModel(true)
        }
    };