autoplay自动播放策略
2018-08-15 本文已影响4852人
谢先生的无聊生活
autoplay自动播放策略
解决策略参考:
1. Chrome autoplay-policy
2. safari
3. opera autoplay
- 自动播放策略:
- 静音自动播放总是被允许的。
- 用户已经产生交互(点击触摸滑动等..) ,这里的交互指的是只要用户在页面中用有了操作,而不是说一定要用户点击audio或者video去播放
- 使用iframe授权自动播放
- chrome提高MEI指数(?)
- 移动端用户将网站添加到home screen(没试过)
一、视频(video)
- 静音的自动播放总是被允许的。
经过测试,静音的视频元素可以自动播放。音频元素添加muted后也无法自动播放。
所以video元素可通过添加muted属性使其自动播放,然后提示用户打开声音。
二、音频(audio)
-
使用Web Audio API播放声音。
经过查阅发现这是一个非常强大的处理声音的API,可以实现很多的声音效果(扩音,缩音,淡入淡出等),有待学习。
兼容情况:
Web Audio API兼容情况
三、音视频(audio+video)
- 在用户交互(点击,触摸滑动等操作)后,使用.paly()方法播放。
注意:用户没有产生交互前调用play()会抛出异常
- 使用iframe允许自动播放。
<iframe src = "http://fjdx.sc.chinaz.com/Files/DownLoad/sound1/201808/10467.wav" allow = "autoplay"/>
四、浏览器/参数设置
- chrome
- 设置开发者开关,更改chrome自动播放策略。
前往:**chrome://flags/#autoplay-policy**,设置 **Autoplay policy**开关。
- safari
- [safari官网](https://www.apple.com/cn/safari/)提示:可以进入Safari浏览器中的单个网站设置,启用媒体自动播放。
解决办法:
- 使用Web Audio API播放声音。
- 不直接使用autoplay进行自动播放。使用.play()方法播放。
video.play()和audio.play()都返回promise。未禁止的播放完后会resolve,禁止的会reject。
video和audio可以在用户交互(click,touch,tap等)后调用.play()播放,video还可以静音后播放。/**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后可以允许自动播放.