html5 的<audio> 音频 audio的“坑”
<audio>标签是html5的一个非常有意义的特性。告别的flash的时代。它的属性有:
autoplay:音频就绪后马上播放
controls:出现该属性,向用户显示播放的控件。
loop:是否在音频结束时候从新播放
preload:如果出现该属性,则在页面加载时候进行加载。
src:要播放的音频的URL。
方法有:
load():从新加载资源。
play():开始播放。
pause() :暂停播放。
这些都是基础的知识点。如果我们需要让音频自动播放的时候。在iphone中,我们发现是无法实现的 。
这里解决方案是在此页面的
document.addEventListener('touchstart', function(){ document.querySelector("#musicBox").play()
}, true);
能够实现播放的功能(意思是必须手动的触发)。
要是自动触发,必须事件机制有所了解。
在Mouse事件中:
var Elem = document.getElementById('pp');Elem.addEventListener('click', function(){ alert(111)}, true);var evt = document.createEvent('MouseEvent');evt.initMouseEvent( 'click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );Elem.dispatchEvent(evt);
同理在touch的事件中:
var Elem = document.getElementById('pp');
Elem.addEventListener('touchstart', function(){
alert(111)
}, true);
var evt = document.createEvent('TouchEvent');
evt.initTouchEvent( 'click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );
Elem.dispatchEvent(evt);
实现一个类似于jquery 的trigger的功能点
html5 的<audio> 音频 audio的“坑”的更多相关文章
- HTML5视频Video 音频Audio
视频协议 视频格式 Flash HTML5 HTTP flv HTTP f4v HTTP mp4 HTTP m3u8 HTTP webm HTTP ogg RTMP flv RTMP f4v RTMP ...
- HTML5音视频播放(Video,Audio)和常见的坑处理
1. 前言背景 在HTML5出现之前,Web页面访问音视频主要是通过Flash,Activex插件,还有微软后来推出的silverlight来展现的,尽管FLASH曾经风靡全球,但是随着互联网的不断发 ...
- HTML5 音频 <audio>
HTML5 提供了播放音频的标准. 一.Web 上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插 ...
- html5 audio音频播放全解析
序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...
- HTML5之Audio音频标签学习
HTML5中的新元素标签 src:音频文件路径. autobuffer:设置是否在页面加载时自动缓冲音频. autoplay:设置音频是否自动播放. loop:设置音频是否要循环播放. control ...
- HTML5无插件多媒体Media——音频audio与视频video
文件日志地址 http://blog.csdn.net/q1056843325/article/details/60336226 音频与视频现在已经变得越来越流行 各个网站为了保证跨浏览器的兼容性 ...
- Html5视频播放器-VideoJS+Audio标签实现视频,音频及字幕同步播放
一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href=”http://vjs.zencdn.net/c/video ...
- HTML5 学习07——Video(视频)Audio(音频)
<video> 元素:提供了 播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...
- css总结16:HTML5 多媒体音频(Audio)视频(video )
1 显示嵌入网页中的 MP3 文件: <embed height="50" width="100" src="horse.mp3"&g ...
随机推荐
- Windows 7中使用Eclipse 使用CDT and WinGW 开发C/C++(转载)
以前使用visual studio 2010编写C/C++,后来接触了Eclipse后,据说eclipse也可以编写C/C++,以前觉得Visual studio 2010还蛮不错的,也没有多大好奇心 ...
- 安装DirectX SDK时出现Error Code:s1023 的解决方案
刚刚安装DXSDK_Jun10时(下载地址:http://download.microsoft.com/download/A/E/7/AE743F1F-632B-4809-87A9-AA1BB3458 ...
- struts2.1笔记04:struts2优点
- MYSQL基础笔记(六)- 数据类型一
数据类型(列类型) 所谓数据烈性,就是对数据进行统一的分类.从系统角度出发时为了能够使用统一的方式进行管理,更好的利用有限的空间. SQL中讲数据类型分成三大类:1.数值类型,2.字符串类型和时间日期 ...
- Maven 仓库
Maven仓库分为本地仓库和远程仓库(中央仓库,私服,其他公共仓库)一张图就可以很清楚的看出结构 本地仓库:本地仓库是在我们当前电脑系统盘的user-administrator-m2-reposito ...
- DataTable 的数据导出到 Excel
如果有个DataTable类型的数据,可以这样导出到Excel中: public static void ExportToExcel(DataTable dt, string fileName) { ...
- Android图片选择器--仿QQ
当做一款APP,需要选择本地图片时,首先考虑的无疑是系统相册,但是Android手机五花八门,再者手机像素的提升,大图无法返回等异常因数,导致适配机型比较困难,微信.QQ都相继的在自己的APP里集成了 ...
- Java之MS SQL数据库连接
一 1.首先,到微软官方下载jdbc驱动包 Microsoft JDBC Driver 4.0 for SQL Server 2.运行sqljdbc_4.0.2206.100_chs.exe,把文件 ...
- VbCrlf的相关说明
今天从别人发来的手顺书中发现了这几个字母,一头雾水,下面查了一下相关资料. vbCrLf是Visual Basic中的一个字符串常数,即“Chr(13) & Chr(10)”(回车符与换行符连 ...
- 学习ajax 总结
一.服务器客户端基础知识 通信是指不同计算机程序的通信,单单通过ip地址就能知道你找的是哪一台计算机,但是不知道是计算机上的哪个应用程序,要想知道是哪个程序就必须通过端口.这时候就可以问端口到底是什么 ...