html5 -audio-移动端如何自动播放
最近在做一些活动类页面或者类似于易企秀类型的轻应用经常遇到关于audio标签的应用,对于audio相关的常用知识点以及一些相关的问题如下:
<audio id="audios" src="xxxx.mp3" autoplay controls="controls">
您的浏览器不支持 audio 标签。
</audio>
不支持audio元素的浏览器会显示标签内文字 audio相关属性:
src:音频地址
autoplay:音频加载完毕后自动播放。
controls:显示播放控制条。
loop:播放完毕后会重复播放。
preload: auto 预加载音频视频。metadata 只预加载音频视频元数据。 有autoplay时此属性无效。 js控制媒体
play() 播放
pause() 暂停
load() 重新加载 相关事件:
oncanplay //在用户可以开始播放视频/音频(audio/video)时触发(页面加载完毕)
onerror //在音频/视频(audio/video)加载发生错误时触发
ontimeupdate //在视频/音频(audio/video)当前的播放位置发送改变时触发 event.currentTime
onended //在视频/音频(audio/video)播放结束时触发 微信端和手机不能支持自动播放问题
原因是:android ios 内部原因 为了节省流量,规定不自动播放音频视频
解决方法:
//--创建页面监听,等待微信端页面加载完毕 触发音频播放
document.addEventListener('WeixinJSBridgeReady', function() {
document.getElementById('audios').play()
}) //--创建触摸监听,当浏览器打开页面时,触摸屏幕触发事件,进行音频播放
document.addEventListener('touchstart', function() {
document.getElementById('audios').play()
})
html5 -audio-移动端如何自动播放的更多相关文章
- [JavaScript] audio在浏览器中自动播放
audio 在浏览器中自动播放 autoplay 属性 autoplay 属性规定一旦音频就绪马上开始播放. 如果设置了该属性,音频将自动播放. 使用 autoplay 属性进行播放 //使用auto ...
- video 在iphone手机的ios系统和微信端无法自动播放
描述:video 在iphone手机,微信端无法自动播放,ios系统下不能自动播放视频.而且如果没有autoplay属性,在微信端点击一次,弹不出视频,要一直触着两秒后才可以打开视频.如果点击播放的话 ...
- HTML5中的audio在手机端和 微信端的自动播放
再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流浪所设置的 通常解决方法是给一个交互事件,一定要是交互事件 标签:<aud ...
- 解决H5微信浏览器中audio兼容-- 背景音乐无法自动播放
我们知道,ios 在safari浏览器中,audio标签不能在没有用户交互的情况下自动播放或有js直接控制播放,这是系统限制的一些原因. 但是背景音乐在微信浏览器可以设置自动播放,config配置一下 ...
- autoplay移动端不能自动播放
本文总结自:https://stackoverflow.com/questions/12496144/can-you-autoplay-html5-videos-on-the-ipad 首先,自动播放 ...
- html5添加视频为背景自动播放
客户想做个打开官网自动播放一段视频,楼主使用了video标签,即下面的代码:: 于是我在video标签上添加了属性 autoplay=“autoplay” loop=“loop” 然而通过地址栏进去的 ...
- 移动端audio自动播放问题
中秋临近,心血来潮想做个手机端贺卡,以前接触的移动端较少,虽然是个简单的贺卡,其实也蛮多坑的,简略说一下在制作贺卡的过程遇到的坑: 一:移动端的屏幕大小不能算作body的大小,因为手机浏览器头部都有网 ...
- html5 audio音频播放全解析
序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...
- HTML5 audio标签自制音乐播放器
相关技能 HTML5+CSS3(实现页面布局和动态效果) Iconfont(使用矢量图标库添加播放器相关图标) LESS (动态CSS编写) jQuery(快速编写js脚本) gulp+webpack ...
随机推荐
- Codeforces Round #342 (Div. 2) B
B. War of the Corporations time limit per test 1 second memory limit per test 256 megabytes input st ...
- c++11新特性之atomic
std::atomic_flag std::atomic_flag是一个原子的布尔类型,可支持两种原子操作: test_and_set, 如果atomic_flag对象被设置,则返回true; 如果a ...
- C++指针与数组
对数组地址的理解,如 int c[2] = {2,3}; int(*cp)[2] = &c; cout << &c[0] << c << cp &l ...
- jQuery日历签到插件
插件比较简单,先来看DEMO吧,http://codepen.io/jonechen/pen/bZWdXq: CSS部分: *{margin:0;padding:0;font:14px/1.8 &qu ...
- [CodeChef - GERALD07 ] Chef and Graph Queries
Read problems statements in Mandarin Chineseand Russian. Problem Statement Chef has a undirected gra ...
- [POI2004] SZP (贪心+拓扑排序)
[问题描述] Byteotian 中央情报局(BIA) 雇佣了许多特工. 他们每个人的工作就是监视 另一名特工. Byteasar 国王需要进行一次秘密行动,所以他要挑选尽量多的信得过的特工. 但 是 ...
- HDU 1070 Milk (模拟)
题目链接 Problem Description Ignatius drinks milk everyday, now he is in the supermarket and he wants to ...
- HDU 1312 Red and Black (深搜)
题目链接 Problem Description There is a rectangular room, covered with square tiles. Each tile is colore ...
- vue router mode 设置"hash"与"history"的区别
router官网的说明如下: ********************************************我是官网说明分隔符--开始**************************** ...
- bzoj 2440 dfs序
首先我们可以做一遍dfs,用一个队列记录每个点进出的顺序,当每个点访问的时候que[tot++]=x,记为in[x],当结束dfs的时候que[tot++]=x,记为out[x],这样处理出来的队列, ...