解决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”然而通过地址栏 ...
随机推荐
- as_matrix、保存训练模型
#-*- coding: utf-8 -*- #构建并测试CART决策树模型 import pandas as pd #导入数据分析库 from random import shuffle #导入随机 ...
- Pandas三个数据结构
系列(Series) 数据帧(DataFrame) 面板(Panel) 这些数据结构构建在Numpy数组之上,这意味着它们很快. 考虑这些数据结构的最好方法是,较高维数据结构是其较低维数据结构的容器. ...
- python中常用的九种数据预处理方法分享
Spyder Ctrl + 4/5: 块注释/块反注释 本文总结的是我们大家在python中常见的数据预处理方法,以下通过sklearn的preprocessing模块来介绍; 1. 标准化(St ...
- tomcat启动失败问题总结
一.端口占用 linux下启动tomcat的时候,如果服务启动不成功,可以到查看logs文件夹下的catalina.out 日志文件,cat我的日志文件可得到如下的错误信息:(Caused by: ...
- jenkins--svn+Email自动触发2(jenkins系统配置)
jenkins系统配置-SonarQube servers配置: 邮件通知设置: 邮件调试问题: 在 系统设置 --> Extended E-mail Notification: 找到 Enab ...
- BZOJ3456 城市规划(多项式求逆)
设f[i]为连通图的数量,g[i]为不连通图的数量,显然有f[i]=2i*(i-1)/2-g[i],g[i]通过枚举1所在连通块大小转移,有g[i]=Σf[j]*C(i-1,j-1)·2(i-j)*( ...
- Maven整理
第一章 Maven安装 1.1 下载Maven库 下载地址:http://maven.apache.org/download.cgi 1.2 解压下载的库,认识Maven库目录 备注: 解压文件尽量不 ...
- Python3网络爬虫(1):利用urllib进行简单的网页抓取
1.开发环境 pycharm2017.3.3 python3.5 2.网络爬虫的定义 网络爬虫,也叫网络蜘蛛(web spider),如果把互联网比喻成一个蜘蛛网,spider就是一只在网上爬来爬去的 ...
- Hdoj 1009.FatMouse' Trade 题解
Problem Description FatMouse prepared M pounds of cat food, ready to trade with the cats guarding th ...
- 09 Zabbix Item类型之Zabbix SNMP类型
点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 Zabbix Item类型之Zabbix SNMP类型 SNMP是监控服务器以外设备的非常好的方式 ...