基本介绍
经常会碰到客户询问,为什么我设置了autoplay为true,但是没有自动播放,每次都要向客户解释这个是浏览器从用户体验角度考虑做的限制,客户会继续询问那我要怎么做? 针对这个问题Aliplayer也专们做过优化,提供一些方式让客户能更好的处理这种情况。
现象描述
有声音视频无法自动播放这个在移动端上一直都是这个限制,桌面版的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 总之一句话,从用户角度考虑。
破解之法
只要视频没有声音或者有用户交互了就可以播放, 现在来看一下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. 如果检测到浏览器自动播放失败,提示用户点击播放
Aliplayer的使用
对于上面两种方式Aliplayer提供了对应功能,帮助用户去实现更好的用户体验。
检测浏览器是否能够自动播放
Aliplayer提供了‘autoplay‘事件,用于通知当前视频是否满足浏览器自动播放的政策,如果不满足返回false,否则为true。
player.on(‘autoplay‘, function(data) {
if(data.paramData) //可以自动播放
{
//隐藏提示
}else //不可以自动播放
{
//显示提示用户点击播放
}
});
效果如下:
静音播放
对于一些无需播放声音的场景比如视频监控,可以让视频静音然后自动播放,后期用户可以通过音量控制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();
});
});
效果如下:
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>
原文链接更多技术干货 请关注阿里云云栖社区微信号 :yunqiinsight
原文地址:https://www.cnblogs.com/zhaowei121/p/10330321.html