阿里云 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 //不可以自动播放
     {
       //显示提示用户点击播放
     }

  });

效果如下:

静音播放

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

时间: 2024-11-06 09:57:07

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

阿里云 Aliplayer高级功能介绍(六):进度条标记

基本介绍Aliplayer在进度条上提示时间和缩略图功能外,还可以进行视频内容的提示打点,当然不止是进度条上显示打点的内容,还提供一组接口,方便用户进行打点时间和内容的获取, 基本UI如下图所示: 接口和属性介绍播放器提供了progressMakers属性,是一个数组类型,每一条记录包含offset时间和text打点的内容,还可以包含其他属性,此属性用于告诉播放器进度条打点记录,记录内容属性说明: 名称 类型 说明offset Number 打点的视频偏移时间,单位:秒text String 打

阿里云 Aliplayer高级功能介绍(三):多字幕

基本介绍 国际化场景下面,播放器支持多字幕,可以有效解决视频的传播障碍难题,该功能适用于视频内容在全球范围内推广,阿里云的媒体处理服务提供接口可以生成多字幕,现在先看一下具体的效果: WebVTT格式介绍 多字幕现在支持HLS的格式,后期会去实现Dash格式的支持. 字幕文件 字幕的内容使用WebVTT的格式,更多的关于WebVTT可以参考WebVTT 格式如下: WEBVTT 00:00:09.960 --> 00:00:12.600 Argentina was among the found

阿里云 Aliplayer高级功能介绍(八):安全播放

基本介绍如何保障视频内容的安全,不被盗链.非法下载和传播,阿里云视频点播已经有一套完善的机制保障视频的安全播放: 更多详细内容查看点播内容安全播放,H5的Aliplayer对于上面的安全机制都是支持的,但是也有一些限制. 访问限制访问限制主要是阿里云视频云提供的安全访问能力, 只需要云端配置, 播放器无需做额外的事情,并且拒绝访问的原因会通过"X-Tengine-Error"Response Header返回,Http请求的错误的Code为403. 开启Referer防盗链后,如果Re

阿里云 Aliplayer高级功能介绍(七):多分辨率

基本介绍网络环境比较复杂.网速不稳定,Aliplayer提供了多分辨率播放的模式,用户可以手工切换分辨率和播放器选择最优分辨率,基本UI如下: 66ccc596257a5db1d0f106b57454e14da6a8f61e Source模式source的方式指定多个清晰度的地址,这个模式在直播场景下使用的比较多,阿里云直播服务可以提供多码率的播放流地址,详细请参考:视频直播转码.Aliplayer提供了下面清晰度的对应关系: Code TextOD 原画FD 流畅LD 标清SD 高清HD 超清

阿里云 Aliplayer高级功能介绍(五):多语言

基本介绍Aliplayer默认支持中文和英文,并且依赖于浏览器的语言设置自动启用中文或英文资源, 除了支持这两种资源外,还提供自定义语言的形式,支持其他国际语言,另外Aliplayer还支持点播服务的多地域,可以支持VideoId的方式播放东南亚和欧洲的视频资源,英文版本播放器: 语言设置属性Aliplayer提供language属性用于指定语言,此属性的优先级高于浏览器的语言设置,默认值为空,代码: var player = new Aliplayer({id: "player-con&quo

Virtualbox 多重加载 高级功能介绍

1. 简介 对于虚拟机,相信对大家来说都不陌生,尤其对一个IT行业的人来讲.让你在现有的操作系统上不需要从新装系统和购买新机器就可以使用其他类型的操作系统.现在主流的虚拟就有VMWare和Virtualbox,virtualbox体系小,也比较稳定,还有一些独到的高级功能比较受用户的青睐. 对于虚拟机中的操作系统,我们大多时候都是用来做实验或者其他用途,但总结起来一句通俗的话,那就是用来折腾的.对于经常使用虚拟机的人来说,可能经常需要将虚拟机中的系统还原到之前的状态,搞不好还需要重新安装.有人会

阿里云 Cent OS 6.3版本自动挂载交换分区失败原因

阿里云服务器默认是没有交换分区的. 而且阿里云服务器在某些版本Linxu系统(Cent OS6.3)中在/etc/rc.d/rc.local脚本中将所有fstab中要求挂载的swap分区都给关闭了.Cent OS6.5就没有关闭. 咨询了阿里云工程师为何关闭swap,回复如下: 您好,swap主要是内存不够用的时候,将内存中不使用的一些内容放到swap中,内存会和swap频繁交换数据.这个可能会引起io的问题.如果内存够用,除非有特殊情况,比如安装oracle.建议不使用swap.请了解. 不过

阿里云助力合作伙伴帮助政府、企业体验云计算大数据魅力!

2015年12月8日,由陕西省咸阳市彬县县政府举办,陕西畅通网络科技有限公司协办“阿里云+蚂蚁金服中小企业扶持大会”是合作伙伴事业部规划合作伙伴用户沙龙第一场会议,合作伙伴团队表示高度重视. 会议在彬县海鑫国际酒店举行,参会相关人员有:咸阳市彬县工商局,中小企业局,商务局,电商办,工商联,金融办,阿里云合作伙伴事业部李洪雷,蚂蚁金服产品经理王晓鹰,陕西畅通总经理王鹏及当地300家中小企业负责人.会上首先由县委领导致辞,感谢阿里对彬县的支持,彬县是陕西省十强县,煤炭等资源丰富,而且领导班子对互联网

zabbix一些高级功能介绍

根据上篇配置的环境,接下来说明在zabbix agent上执行远程命令是如何完成的. 远程命令受到一些限制: (1)在agent执行远程命令必须给zabbix用户定义sudu规则: (2)不支持active模式的agent (3)不支持代理模式 (4)命令长度不得超过255个字符 (5)可以使用宏 (6)zabbix-server仅执行命令,而不关心命令是否执行成功 修改一下agent的配置文件,vim /etc/zabbix/zabbix_agentd.conf  把EnableRemoteC