阿里云 Aliplayer高级功能介绍(九):自动播放体验

简介: 经常会碰到客户询问,为什么我设置了autoplay为true,但是没有自动播放,每次都要向客户解释这个是浏览器从用户体验角度考虑做的限制,客户会继续询问那我要怎么做? 针对这个问题Aliplayer也专们做过优化,提供一些方式让客户能更好的处理这种情况。

基本介绍

经常会碰到客户询问,为什么我设置了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 //不可以自动播放
     {
       //显示提示用户点击播放
     }

  });

效果如下:

3752ca77bfcd167029fec504028da610054e6dc5

静音播放

对于一些无需播放声音的场景比如视频监控,可以让视频静音然后自动播放,后期用户可以通过音量控制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();
           });
        });

效果如下:
8838039a126a380dbdf006fa6a6b9ac708c5c121

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>
目录
相关文章
|
3月前
|
人工智能 机器人 Serverless
魔搭大模型一键部署到阿里云函数计算,GPU 闲置计费功能可大幅降低开销
魔搭大模型一键部署到阿里云函数计算,GPU 闲置计费功能可大幅降低开销
578 2
|
3月前
|
存储 Java 对象存储
springboot配置阿里云OSS存储实现文件上传下载功能
【1月更文挑战第1天】springboot配置阿里云OSS存储实现文件上传下载功能
500 2
|
3月前
|
文字识别 API 数据安全/隐私保护
可以使用阿里云文字识别服务中的个人证照识别功能。
可以使用阿里云文字识别服务中的个人证照识别功能。【1月更文挑战第21天】【1月更文挑战第102篇】
17 1
|
1月前
|
算法 Java 开发工具
使用阿里云KMS产品针对 Springboot 接口参数加密解密功能
针对Springboot里面使用开源工具使用加解密,替换成阿里云KMS产品进行加解密;
118 1
|
2月前
|
文字识别 安全 API
阿里云文字识别OCR的发票凭证识别功能可以通过API接口的形式进行调用
【2月更文挑战第5天】阿里云文字识别OCR的发票凭证识别功能可以通过API接口的形式进行调用
73 5
|
2月前
|
弹性计算 Ubuntu Linux
阿里云助力《幻兽帕鲁》快速开服:全新自动部署功能上线,仅需10秒即可完成部署!
阿里云助力《幻兽帕鲁》快速开服:全新自动部署功能上线,仅需10秒即可完成部署!阿里云服务器搭建帕鲁服务器游戏,服务器稳定无卡顿,先下载SteamCMD,并运行;然后下载Palserver,修改服务ini配置,启动PalServer,进入游戏服务器。今天分享阿里云创建幻兽帕鲁服务器教程。
|
2月前
|
弹性计算 搜索推荐 Linux
阿里云自动部署【幻兽帕鲁/Palworld】功能上线,10秒全自动开服!
阿里云轻量应用主机Lighthouse上线幻兽帕鲁应用模板功能 ,用户只需要点三次鼠标,最快10秒就能自动安装好幻兽帕鲁主机,和自己的朋友一起开心“抓帕鲁”。同时,用户还可以在阿里云控制台的面板直接调整幻兽帕鲁的经验倍率、死亡惩罚等游戏配置,实现便捷、个性化的游戏体验。
阿里云自动部署【幻兽帕鲁/Palworld】功能上线,10秒全自动开服!
|
2月前
|
API 网络安全
阿里云视觉智能平台中人脸搜索功能在长时间不使用后第一次使用时出现连接失败
阿里云视觉智能平台中人脸搜索功能在长时间不使用后第一次使用时出现连接失败
228 2
|
2月前
|
消息中间件 监控 Cloud Native
阿里云云原生微服务高级工程师认证(ACP级-Alibaba Cloud Certification Professional)考试大纲
介绍阿里云云原生微服务高级工程师认证(ACP级-Alibaba Cloud Certification Professional)所需具备的知识及学习方法等。
259 0
|
2月前
|
Kubernetes 监控 Cloud Native
阿里云云原生容器高级工程师认证(ACP级-Alibaba Cloud Certification Professional)考试大纲
介绍阿里云云原生容器高级工程师认证(ACP级-Alibaba Cloud Certification Professional)所需具备的知识及学习方法等。
168 2