基本介绍
经常会碰到客户询问, 为什么我设置了 autoplay 为 true, 但是没有自动播放, 每次都要向客户解释这个是浏览器从用户体验角度考虑做的限制, 客户会继续询问那我要怎么做? 针对这个问题 Aliplayer 也专们做过优化, 提供一些方式让客户能更好的处理这种情况.
https://www.atatech.org/articles/129116#1 现象描述
有声音视频无法自动播放这个在移动端上一直都是这个限制, 桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能, Chrome 也在 2018 年 4 月份发布的 66 版本也正式关掉了声音自动播放, 也就是说通过 H5 方式播放音视频在桌面版浏览器自动播放会失效.
- <audio autopaly>
- </audio>
- <video autoplay>
- </video>
浏览器厂家为什么要禁止自动播放的呢? 移动端主要考虑的是手机的带宽以及对电池的消耗, Chrome 主要基于下面的考虑:
- improve the user experience
- minimize incentives to install ad blockers
reduce data consumption on expensive and/or constrained networks 总之一句话, 从用户角度考虑.
https://www.atatech.org/articles/129116#2 破解之法
只要视频没有声音或者有用户交互了就可以播放, 现在来看一下 Safari 和 Chrome 的具体政策:
Safari 允许自动播放政策, 具体请查看 Safari Video Policy:
视频没有音轨
Video 设置为 muted,<video muted>
当 Video 元素不可见, 比如 CSS 设置为 display:none 或者滚动到非可见区域, 视频将会被暂停
Chrome 允许自动播放政策: 具体请查看 Chrome Autoplay
静音的视频
有用户行为交互
符合 Media Engagement Index, 只要用户在当前网页主动播放过超过 7s 的音视频 (视频窗口不能小于 200 x 140)
移动端用户添加网站到首页屏幕 (主要是 PWA 应用)
嵌套到 IFrame, 允许自动播放, 比如:
- <!-- Autoplay is allowed. -->
- <iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">
- <!-- Autoplay and Fullscreen are allowed. -->
- <iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">
总结一下共同点: 静音视频或者有用户交互, 对于不能自动播放的浏览器可以使用的方法如下:
1. 先把音视频加一个 muted 的属性让视频可以自动播放, 页面再显示一个关闭声音的按钮, 提示用户打开声音
2. 如果检测到浏览器自动播放失败, 提示用户点击播放
https://www.atatech.org/articles/129116#3 Aliplayer 的使用
对于上面两种方式 Aliplayer 提供了对应功能, 帮助用户去实现更好的用户体验.
https://www.atatech.org/articles/129116#4 检测浏览器是否能够自动播放
Aliplayer 提供了'autoplay'事件, 用于通知当前视频是否满足浏览器自动播放的政策, 如果不满足返回 false, 否则为 true.
- player.on('autoplay', function(data) {
- if(data.paramData) // 可以自动播放
- {
- // 隐藏提示
- }else // 不可以自动播放
- {
- // 显示提示用户点击播放
- }
- });
效果如下:
https://www.atatech.org/articles/129116#5 静音播放
对于一些无需播放声音的场景比如视频监控, 可以让视频静音然后自动播放, 后期用户可以通过音量控制 UI 开启声音. 代码如下:
- let player = new Aliplayer({
- id: 'J_prismPlayer',
- width: '100%',
- height:'100%',
- autoplay: true,
- source : 'https://sdk.fantasy.tv/hc.mp4'
- },function(player){
- // 先静音然后播放
- player.mute();
- player.play();
- });
- });
效果如下:
https://www.atatech.org/articles/129116#6 iOS 微信自动播放
iOS 的微信可以在 WeixinJSBridgeReady 事件里调用 play 方法, 让视频自动播放, 这个 hack 方式在 Android 手机不起作用, 具体代码如下:
- <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
- <script>
- let player = new Aliplayer({
- id: 'J_prismPlayer',
- width: '100%',
- height:'100%',
- autoplay: true,
- source : 'https://sdk.fantasy.tv/hc.mp4'
- });
- $(document).on('WeixinJSBridgeReady',()=>{
- if(player.tag)
- {
- player.tag.play();
- }
- });
- </script>
来源: https://yq.aliyun.com/articles/687095