- 音频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” 就可以了。
解决方案二
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后可以允许自动播放。