解决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”然而通过地址栏 ...
随机推荐
- vue为app做h5页面,如何做到同域名对应不同版本的h5代码
1.当我们在做混合开发的时候,app端可以有无数多个版本,一般情况h5页面只有一套代码.应该如何部署多套代码呢? 2.业务场景 当出现这种情况的时候,其实前端可以部署多套代码.比如: www.stat ...
- CSS 范围选择器(自编)
选择第一个到第六个li元素ul li:nth-child(n+3):not(:nth-child(n+6)){} 选择第二个到最后一个ul li:nth-child(2)~li{} 选择除了第一个和最 ...
- SAP顾问岗位要求
岗位职责: 1.负责SAP系统各模块日常运维工作,解决用户在系统操作过程中遇到的问题: 2.评估用户需求(新需求.功能优化)的可实现性,完成SAP系统及相关系统的配置调整及功能实现: 3.负责CRM等 ...
- PSP(5.11——5.17)以及周记录
1.PSP 5.11 14:30 20:00 130 200 Cordova A Y min 5.12 9:00 14:00 100 200 Cordova A Y min 5.13 13:30 15 ...
- python之tkinter使用-滚动条
# GUI:tkinter使用 # 通过调节滚动条改变标签中字体大小 import tkinter as tk def resize(ev=None): '''改变label字体大小''' label ...
- 类的三大方法 与__init___
静态方法 存储在类中 实例方法 与类方法都能调用 不需要 传递self 相当于在类里面写了一个函数 类方法 存储在类中 只能是类调用 普通方法 存储在类中 由实例对象使用 在实例化类的时候 就相 ...
- sorted 返回字典的所有键
- 【Linux】Centos配置ssh无密码登录
[测试环境] 刚好重新做mgr就搞下吧,主要论文好长~想多做几遍再看~ master1 192.168.13.111 master2 192.168.13.112 master3 192.168. ...
- day27 多态 多继承 接口类 抽象类
简单来说:多态就是指一个相同的方法名在不同的对象调用的时候实现一样或者不一样的方法实例1: 动物类有个方法 "嚎叫" 狗类也有个方法 "嚎叫" 猫类继承了动物类 ...
- day26 单继承
继承是创建新类的一种方式,目的就为了减少代码.表达了子类是父类的关系,比如狗是动物,教授是老师一个类可以多个类继承,所有语言都是这样的一个类可以继承多个父类 ,只有python支持多继承子类可以找到父 ...