针对移动端媒体自动播放方法 -----audio

1. audio,video作为H5新秀,给前端开发带来很大便利得情况下,同时也带来了无线多得兼容问题。移动开发过程音频自动播放,因为移动策略支持问题,autoplay就变成了一个废物。在微信端我们还可以借力进行。

例: <audio src="http://image.liwuhez.com/gift/20191226/a7b64dabae37436ca330dfc3e124b002.mp3" ref="audio1" id="audio1" class="audio" controls="controls"></audio>

    在需要得时候,我们判断浏览器是否支持该方法:

if(document.addEventListener){

       document.addEventListener("WeixinJSBridgeReady", this.playWxBgMusic(), false);

}       

在methods:{

            playWxBgMusic(){

                this.$nextTick(()=>{

                    console.log('播放背景音乐')

                    console.log(this.$refs.audio1)

                    this.$refs.audio1.play();

                })

            },

}

这样就完成了我们得自动播放功能,然并卵,微信降级处理,或者时低版本得微信压根没办法调用该方法。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一直想开通一个blog,但是由于工作太忙(此处写给领导看),还有自己的有三个原因,一是懒,二是懒,三是懒,把这个事...
    Luc汤阅读 17,472评论 12 18
  • 先从内网搬运一段同事写的前序调研成果。 自动播放的目前现状是:第一个视频会自动播放,向下滑动页面时,非第一个视频需...
    fapiaopiao阅读 1,770评论 0 0
  • _________________________________________________________...
    fastwe阅读 1,301评论 0 0
  • 简述JavaScript起源起源于美国的Netscape公司,原名为LiveScript,后改为JavaScrip...
    3ab670b99521阅读 3,021评论 0 0
  • 北京2018年4月1日上午,NBA常规赛勇士客战国王的比赛中,发生了令人痛心不已的一幕。比赛进行到第三节还有41...
    Curry_宇阅读 1,238评论 1 1