解决audio和video在手机端无法自动播放问题
各大浏览器都为了节省流量,做出了优化,在用户没有行为动作时(交互)不予许自动播放
<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>
<audio controls="controls">
<source src="music/bg.ogg" type="audio/ogg"></source>
<source src="music/bg.mp3" type="audio/mpeg"></source>
优先播放音乐bg.ogg,不支持在播放bg.mp3
</audio>
//JS绑定自动播放(操作window时,播放音乐)
$(window).one('touchstart', function(){
music.play();
}) //微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false); //注意
//1.audio元素的autoplay属性在IOS及Android上无法使用,在PC端正常;
//2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间;
//3.注意不要遗漏微信的兼容处理需要引用微信JS;
解决audio和video在手机端无法自动播放问题的更多相关文章
- 【转】解决chrome浏览器不支持audio和video标签的autoplay自动播放
声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 ...
- html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案
html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...
- 解决html5 audio iphone,ipd,safari不能自动播放问题
html audio 在iPhone,ipd,safari浏览器不能播放是有原因滴 (在safri on ios里面明确指出等待用户的交互动作后才能播放media,也就是说如果你没有得到用户的acti ...
- Html5-audio标签简介及手机端不自动播放问题
1.audio:html5音频标签 <audio loop src="/photo/aa.mp3" id="audio" autoplay preload ...
- 解决在微信中部分IOS不能自动播放背景音乐
前言在做各种HTML5场景页面的时候,插入背景音乐是一个很普遍的需求.我们都知道,IOS下的safari是无法自动播放音乐的,以至一直以来造成一种错误的认识,iso是无法自动播放媒体资源的.直到微信火 ...
- 解决移动端浏览器 HTML 音频不能自动播放的三种方法
https://blog.csdn.net/PY0312/article/details/90349386 由于Android,IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验,规定不自动播 ...
- video实现有声音自动播放
video实现自动播放有声音 需求:老板见人家可以的,我们的也要可以!!! 前端:自动播放,简单... 要实现:鼠标移入视频播放同时有声音,移出让你暂停,,,,, 问题集合 1- 自动播放实现没有声音 ...
- 微信h5页面audio标签在ios下不能自动播放
背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反应 后来网上一番搜索后了解到时因为iOS不允许自动播放音乐, ...
- html 中video标签视频不自动播放的问题
有个需求,客户想做个打开官网自动播放一段视频,楼主使用了video标签,即下面的代码::于是我在video标签上添加了属性 autoplay=“autoplay” loop=“loop”然而通过地址栏 ...
随机推荐
- Jquery 组 checkbox全选checkbox
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
- aliyun centos14.04 trusty 上安装docker1.12.1
现在apt这边拿到的docker最新版本就是1.12.1 其实本来这次不准备记录了,本以为一帆风顺的安装最后还是遇到了一点坑,aliyun的锅,卡成狗无法下载.青岛机房 1.更新源,然后安装ca-ce ...
- atan和unwrap解卷绕
要计算一个系统相频特性,就要用到反正切函数,计算机中反正切函数规定,在一.二象限中的角度为0-pi,三四象限的角度为0--pi. 若一个角度从0变到2pi,但实际得到的结果是0-pi,再由-pi-0, ...
- BZOJ2938[Poi2000]病毒——AC自动机
题目描述 二进制病毒审查委员会最近发现了如下的规律:某些确定的二进制串是病毒的代码.如果某段代码中不存在任何一段病毒代码,那么我们就称这段代码是安全的.现在委员会已经找出了所有的病毒代码段,试问,是否 ...
- BZOJ2178 圆的面积并(simpson积分)
板子题.可以转一下坐标防止被卡.精度和常数实在难以平衡. #include<iostream> #include<cstdio> #include<cmath> # ...
- VMware Linux虚拟机yum源更换成国内阿里源
[虚拟机系统] Centos 6.8 阿里源:https://opsx.alibaba.com/mirror 网易源:http://mirrors.163.com/ 更换yum源时请保证虚拟机和外网是 ...
- bzoj4571/luogu3293 美味 (主席树+贪心)
首先想到建出可持久化trie树然后在上面贪心,但是它加了一个数所以不能这么做 但依然可以贪心,仿照上面那个的过程,如果设y是在第i位上^b是1的数(前面的位数已经贪好了),我只要在[l,r]范围内能有 ...
- 【codeforces 103E】 Buying Sets
http://codeforces.com/problemset/problem/103/E (题目链接) 题意 给出$n$个数,每个数与一个集合相关联.从其中选出最小的若干个数,选出的数的个数与这些 ...
- 关于程序设计中经常出现的INF和MOD值的设定
摘自:https://www.cnblogs.com/gfvod/p/5548313.html 在取模操作中,我们常把MOD设置为1000000007,模一个大数和模一个质数可以减少冲突,而1e9+7 ...
- SQL语句中 int 溢出 + Asp语句中 Long 溢出
晚上5点多,同事在QQ告诉我,一个用户向他反应,在他登录的时候显示错误信息,我们在管理平台查看该用户的基本信息时,也显示错误信息. 经过初步分析,原来是在执行 SQL语句的时候发生Int溢出: sql ...