chrome浏览器不支持audio和video标签的autoplay自动播放解决方案

前言

音频audio和视频video无法自动播放这个在IOS上面一直是个惯例。

桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能，紧接着在2018年4月份发布的Chrome 66开始也正式关掉了声音自动播放，也就是说在Safari、Chrome、opera浏览器中音频audio和视频video自动播放功能都将失效。

解决方案一(已失效)

在chrome 浏览器中输入： chrome://flags ，搜索 Autoplay policy ，默认为 Default ，修改为 No user gesture is required 就可以了。

解决方法一（new）2021-09-01 Update

设置注册表(新建文本文档->复制下面的内容->修改文件名为chromeAutoPlay.reg->双击导入注册表)：

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome]
"AutoplayAllowed"=dword:00000001

更多参考：Chrome企业政策列表

解决方案二

muted静音的自动播放总是被允许的。

<video muted src="" autoplay loop></video>

解决方案三

用户已经产生交互（点击触摸滑动等..） ，而不是说一定要用户点击audio或者video去播放。

其它唠叨

不直接使用autoplay进行自动播放。使用play()方法播放。video.play()和audio.play()都返回promise。未禁止的播放完后会resolve，禁止的会reject。

/**video.play()返回一个promise，未禁止则resolve，禁止则reject**/
let video = document.getElementById("video");
let audio = document.getElementById("audio");
let videoPlay = video.play();
let audioPlay = audio.play();

videoPlay.then(()=>{
    console.log('可以自动播放');
}).catch((err)=>{
    console.log(err);
    console.log("不允许自动播放");

    //视频元素可以选择静音后再播放,提示用户打开声音
    video.muted=true;
    video.play();

    //也可以在用户交互后调用.play()
    // ...
});

audioPlay.then(()=>{
    console.log('可以自动播放');
}).catch((err)=>{
    console.log(err);
    console.log("不允许自动播放");

    //音频元素只在用户交互后调用.play(),
    // ...
});

android h5 webview

android 4.2 webview添加了是否需要用户手势去触发音视频的播放开关，默认为true(需要用户手势触发)。 将webview的这个开关设置为不需要用户触发：

mWebview.getSettings().setMediaPlaybackRequiresUserGesture(false);

IOS h5 webview

IOS APP给webview设置mediaPlaybackRequiresUserAction后可以允许自动播放。

文章部分内容参考： 网页3剑客

(完)