美文网首页
H5背景音乐自动播放解决方案

H5背景音乐自动播放解决方案

作者: ddai_Q | 来源:发表于2017-12-14 13:44 被阅读111次

    之前这篇文章还是写的挺糙的,后来整理了一遍

    相信做移动端项目的同学,都有遇到过 audio 标签明明加了 autoplay 却不能自动播放的问题,小编今天就来跟大家聊聊怎样搞定 H5 项目的自动播放问题。

    需求

    用户一进入页面就自动播放背景音乐。当然,目的是为了用户一进入页面就能感受到活动的主题氛围,提高用户感知。

    对了,话说,PM是不是介么说的:

    image

    问题

    1. 除了较老的 IOS 系统和少部分安卓系统能支持自动播放外,其他的都禁止了 audio 的 autoplay 属性。原因是为了用户的流量着想,必须要有用户行为才能加载。

    2. 用户环境多种多样,怎样做好兼容?比如:微信,微博,手机浏览器,内嵌 APP 等等。

    解决方案

    用户环境多样,其实主要分为:微信环境 and 非微信环境。不支持自动播放的浏览器使用 touchstart 事件处理播放(算是降级的自动播放,用户只要 touch 屏幕即可播放)直接上代码:

    请看原文:【干货】H5背景音乐自动播放全新解决方案-看这一篇就够了

    话说小主开了一个微信公众号:[民间程序员],分享H5相关知识点,H5踩坑记,H5实战案例分享等,欢迎大家关注~

    博主小号-欢迎关注

    相关文章

      网友评论

          本文标题:H5背景音乐自动播放解决方案

          本文链接:https://www.haomeiwen.com/subject/rthkwxtx.html