HTML5中的audio在手机端和微信端的不能自动播放

再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流量所设置的

通常解决方法是给一个交互事件:

标签:
<audio loop src="/photo/aa.mp3" id="audio" autoplay preload="auto">
该浏览器不支持audio属性</audio>解决方法:
//--创建页面监听,等待微信端页面加载完毕 触发音频播放document.addEventListener('DOMContentLoaded', function () {function audioAutoPlay() {var audio = document.getElementById('audio');audio.play();document.addEventListener("WeixinJSBridgeReady", function () {audio.play();}, false);}audioAutoPlay();
});
//--创建触摸监听,当浏览器打开页面时,触摸屏幕触发事件,进行音频播放
document.addEventListener('touchstart', function () {function audioAutoPlay() {var audio = document.getElementById('audio');audio.play();}audioAutoPlay();
});
还有一种针对苹果的手机微信端的解决方法
第一步:引入js文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

第二步:配置文件

<script>function autoPlayVideo(){wx.config({debug:false,appId:"",timestamp:1,nonceStr:"",signature:"",jsApiList:[]});wx.ready(function(){var autoplayVideo=document.getElementById("audio");autoplayVideo.play()})};autoPlayVideo();
</script>
这样在网络稳定的情况下是可以自动播放的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407327.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

我的makefile写法(一)

程序演示了一个通过tcp/ip通讯的server/client程序&#xff0c;都是简单的C程序。源码&#xff1a; server.c #include <stdio.h>#include <sys/types.h>#include <sys/socket.h>#include <netinet/in.h>#include <sys/types.h>#include <e…

DataNode,NameNode,JobTracker,TaskTracker用jps查看无法启动解决办法

查看tasktracker的50060的地址无法正常查看&#xff0c;主要有两个原因&#xff0c;一个是在/tmp目录下有以前使用2.02版本留下的文件没有删除&#xff0c;二个是因为端口被占用了 解决方法&#xff1a; 一、删除/tmp目录下所有文件 [rootlocalhost hadoop]# su -[rootlocalhos…

Git之简介

Git是什么&#xff1f; Git是目前世界上最先进的分布式版本控制系统&#xff08;没有之一&#xff09; 那什么是版本控制系统&#xff1f; 如果你用Microsoft Word写过长篇大论&#xff0c;那你一定有这样的经历&#xff1a;想删除一个段落&#xff0c;又怕将来想恢复找不回…

控Proxool连接池的活动连接变化情况

/Files/pony/ConnDB.txt(我用到的一个例子) 下面是摘抄的 研究了Proxool连接池的源代码后完成下面的程序&#xff0c;Proxool连接池的配置过程略。 网管u家u.bitscncom /**//* 网管bitscn_com *author 我为J狂 建立日期 2007-4-18 * */ package net.blogjava.lzqdiy; import j…

React开发(118):报错处理

意思大概为&#xff1a;在一次改变state或者props值后&#xff0c;触发render()方法执行&#xff0c;重新渲染DOM的过程中&#xff0c;react不允许再有其他的state或者props值的改变。render()方法必须是纯函数&#xff01;&#xff01;&#xff01;。我的理解就是&#xff1a;…

vue-cli3.0 开发环境构建

一. 若已全局安装vue-cli (1.x 或 2.x)&#xff0c;需先卸载 npm uninstall vue-cli -g 二. 全局安装 vue-cli3.0 npm install -g vue/cli三. node版本要求 Node >8.9,可以使用 nvm 管理多个 Node 版本。 安装nvm https://github.com/coreybutler/nvm-windows/releases安…

不要以为学java,.net或VB的就很牛

我现在是自己做&#xff0c;但我此前有多年在从事软件开发工作&#xff0c;当回过头来想一想自己&#xff0c;觉得特别想对那些初学JAVA/DOT .NET技术的朋友说点心里话&#xff0c;希望你们能从我们的体会中&#xff0c;多少受点启发(也许我说的不好&#xff0c;你不赞同但看在…

Git之集中式vs分布式

集中式&#xff1a; 集中式版本控制系统&#xff0c;版本库是集中存放在中央服务器的&#xff0c;而干活的时候&#xff0c;用的都是自己的电脑&#xff0c;所以要先从中央服务器取得最新的版本&#xff0c;然后开始干活&#xff0c;干完活了&#xff0c;再把自己的活推送给中…

HDU 1244 Max Sum Plus Plus Plus

虽然这道题看起来和 HDU 1024 Max Sum Plus Plus 看起来很像&#xff0c;可是感觉这道题比1024要简单一些 前面WA了几次&#xff0c;因为我开始把dp[22][maxn]写成dp[maxn][22]了&#xff0c;Orz 看来数组越界不一定会导致程序崩溃&#xff0c;也有可能返回一个错误的结果 dp[…

谁优谁劣?——AMD与Intel产品对比分析

谁优谁劣&#xff1f;——AMD与Intel产品对比分析1. AMD与Intel的产品线概述AMD目前的主流产品线按接口类型可以分成两类&#xff0c;分别是基于Socket 754接口的中低端产品线和基于Socket 939接口的中高端产品线&#xff1b;而按处理器的品牌又分为Sempron、Athlon 64、Optero…

IDEA控制台乱码

报错情况&#xff1a; 报错原因&#xff1a;Idea的vm用的编码格式不一致&#xff1a;需要修改为UTF-8 你看Tomcat我之前下在后修改果&#xff0c;就没有报错&#xff0c;新人刚下载也有乱码问题 问题解决&#xff1a; 按我步骤来一定对 下面这俩文件打开输入&#xff1a; -D…

在Hibernate的session中同时有两个相同id的同类型对象,修改失败

若在Hibernate的session中同时有两个相同id的同类型对象&#xff0c;修改会失败&#xff0c;报错&#xff1a;a different object with the same identifier value was already 解决方案&#xff1a; 使用merge() 如下情景&#xff1a; User u dao.getUser(...) ; User u2 ..…

[Linux] undefined reference to `itoa'

在linux写了个简单的C程序&#xff0c;里面用到了itoa&#xff0c;但是编译时提示“undefined reference to itoa”&#xff0c;本以为加上-lc就行了&#xff0c;可结果还是一样。上网发现&#xff0c;有人说这个函数在linux中是不存在的&#xff0c;一般用sprintf来代替。看下…

React开发(119):代码原因

<Form.Item label"协议" name"模板文件" required>{getFieldDecorator(agreementFilePath[${k}], {})(<Uploadmultiple{false}onChange{this.handleFileChange}beforeUpload{this.beforeUpload}customRequest{(data) > this.onUpload(data, k)…

Git之创建版本库

什么是版本库呢&#xff1f;版本库又名仓库&#xff0c;英文名repository&#xff0c;你可以简单理解成一个目录&#xff0c;这个目录里面的所有文件都可以被Git管理起来&#xff0c;每个文件的修改、删除&#xff0c;Git都能跟踪&#xff0c;以便任何时刻都可以追踪历史&#…

显示环境变量的值

/*功能&#xff1a;显示环境变量的值*/#include <stdio.h>extern char **environ;// 查找环境变量的值&#xff0c;与系统调用getenv()功能相同char* findenv(char *name) // 在环境变量中查找指定的变量名&#xff0c;如找到&#xff0c;则返回其值(后的字符串){int l…

reading notes -- Amazon.com Recommendations: Item-to-Item Collaborative Filtering

中英译本及下载&#xff1a;http://blog.sina.com.cn/s/blog_586631940100pduh.html 以下是摘要笔记&#xff1a; 算法应当结合用户的习惯&#xff0c;用户特点的分类 观影习惯是比较单一 还是比较分散 这是不同的 一、推荐的宗旨&#xff1a;推荐应该要帮助顾客找到和发现新的…

Leetcode刷题(3)整数反转

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1题目 给你一个 32 位的有符号整数 x &#xff0c;返回将 x 中的数字部分反…