audio微信自动播放以及自定义样式
audio标签如下:
<audio id="audioTag" src="" autoplay="autoplay" controls="controls" preload="auto" loop="loop" > 您的浏览器不支持 audio 标签。</audio>
上面写入了基础属性


①微信端自动播放
目前加入autoplay属性之后在大部分的移动端都可以自动播放,但是我遇到的问题是在用苹果手机在微信上打开却没有自动播放解决办法,调用微信一个借口:
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
//移动端自动播放还可以通过mousedown/mouseup/click/touchstart来触发
②自定义样式
可以在audio标签外加一个标签然后通过点击来改变样式(建议是通过添加class来改变样式)给audio增加hidden='true'使它本身样式隐藏
var aduio = document.getElementById('audioTag');
controlsPlay.click(function() {
//改变暂停/播放icon
if (audio.paused) {//class为播放时候样式 暂停时候移除
audio.play();
$(this).addClass('class')
} else {
audio.pause();
$(this).removeClass('class')
}
});
③正对ios系统auido无法自动播放,目前我的解决办法是:在进入页面不会自动播放音乐,而是在进行第一次touchstart时,开始播放audio
-------------------------------------------------------------------------------------------------------分界线-------------------------------------------------------------------------------------------------------------------------------------
有audio还有video之前也遇到过video没有办法自动播放现在看到这个地址(http://www.phptext.net/article_view.php?id=621)发现在ios端有iso自身的属性功能没有开启
虽然没有测试过纪录下:
(在视频标签加入 webkit-playsinline x5-playsinline playsinline就可以解决播放弹出窗口问题包含自动播放。)
<video id="player" width="480" height="320" webkit-playsinline>
也有js代码:
if ("wView" in window) {
window.wView.allowsInlineMediaPlayback = "YES";
window.wView.mediaPlaybackRequiresUserAction = "NO";
}
后续遇到问题在继续更新。。。。。。
audio微信自动播放以及自定义样式的更多相关文章
- 摇一摇—微信7.0.8版本audio无法自动播放问题
近日有一个项目出现audio无法自动播放,查看原因才发现是微信版本更新为7.0.8版本,需要有交互行为,第一次播放需要用户手动点击一下,无法使用DOM中的play()进行直接播放操作,那怎么办呢? 通 ...
- 100%解决ios上audio不能自动播放的问题
由于ios的安全机制问题,不允许audio和video自动播放,所以想要使audio标签自动播放那是实现不了的,即使给play()也是播放不了. 解决方法: 首先,创建audio标签:<audi ...
- 微信的audio无法自动播放的问题
一.问题 最近做了一个html5的项目,里面涉及到音乐播放,项目要求音乐进入页面就自动播放,于是我就想到了html5的audio标签,将mp3引入进去. 1.在audio标签里引入了autoplay属 ...
- 微信video和audio无法自动播放解决方案
//音频,写法一<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio> // ...
- ios audio不能自动播放
今天做了一个简单的落地页项目,就是类似于手机微信上经常看到的滑动效果.因为公司要求需要自己开发,所以我就用swiper+swiper.animate开发,开发速度很快,只不过最后音乐哪里出现了一点小b ...
- 【转】h5页面audio不自动播放问题
1.audio:html5音频标签 <audio loop src="/photo/aa.mp3" id="audio" autoplay preload ...
- android audio无法自动播放
audio无法在android4.4+和ios6以上的版本自动播放,因为他们出于安全考虑,做了限制.必须用户自己手工点击才能播放,程序是控制不了播放的. 整死我了,整整搞了2天,查不出所以然,原来就这 ...
- ios html5 audio 不能自动播放
//修复ios 浏览器不能自动播放音频的问题 在加载时创建新的audio 用的时候更换src即可 Xut.fix = Xut.fix||{}; if (Xut.plat.isBrowser & ...
- audio的自动播放报错解决
使用audio标签时,当前页面没有进行交互时,比如用户刷新了页面后,play()调用就会报错,如下图 查找资料后,发现是2018年4月以后,chrome浏览器对这块进行了优化,为了节约流量,禁止了自动 ...
随机推荐
- 分布式 PostgreSQL 集群(Citus)官方示例 - 实时仪表盘
Citus 提供对大型数据集的实时查询.我们在 Citus 常见的一项工作负载涉及为事件数据的实时仪表板提供支持. 例如,您可以是帮助其他企业监控其 HTTP 流量的云服务提供商.每次您的一个客户端收 ...
- Mysql-关系型数据库与非关系型数据库
一.什么是数据库 数据库是数据的仓库. 与普通的"数据仓库"不同的是,数据库依据"数据结构"来组织数据,因为"数据结构",所以我们看到的数据 ...
- Re:《Unity Shader入门精要》13.3全局雾效--如何从深度纹理重构世界坐标
如何从深度纹理重构世界坐标 游戏特效,后处理是必不可少的,而后处理经常需要我们得到当前画面的像素对应世界空间的所有信息. 思路 通过深度纹理取得NDC坐标,然后再通过NDC坐标还原成世界空间坐标 // ...
- C# 线程与任务
线程 线程:对于所有需要等待的操作,例如移动文件,数据库和网络访问都需要一定的时间,此时就可以启动一个新的线程,同时完成其他任务.一个进程的多个线程可以同时运行在不同的CPU上或多核CPU的不同内核上 ...
- jdbc action 接口示例
package com.gylhaut.action; import java.sql.SQLException;import java.util.ArrayList;import java.util ...
- Redis 中的 set 和 sorted set 如何使用,源码实现分析
set 和 sorted set 前言 set 常见命令 set 的使用场景 看下源码实现 insert dict sorted set 常见的命令 使用场景 分析下源码实现 ZADD ZRANGE ...
- Kubernetes 使用kubeadm创建集群
镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 实践环境 CentOS-7-x86_64-DVD-1810 Docker 19.03.9 Kubernetes version: v1.20.5 ...
- ansible 四常用模块
常用模块 Ansible默认提供了很多模块来供我们使用.在Linux中,我们可以通过 ansible-doc -l 命令查看到当前Ansible支持哪些模块,通过 ansible-doc -s [模块 ...
- luoguP6623 [省选联考 2020 A 卷] 树(trie树)
luoguP6623 [省选联考 2020 A 卷] 树(trie树) Luogu 题外话: ...想不出来啥好说的了. 我认识的人基本都切这道题了. 就我只会10分暴力. 我是傻逼. 题解时间 先不 ...
- Markdown初识及基本使用
Markdown初识及基本使用 由Typora编写. 一.初识Markdown 允许人们使用易读易写的纯文本格式编写文档. 是一种轻量级标记语言 编写的文档可以导出 HTML .Word.图像.P ...