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 ...
随机推荐
- LVS + keepalived + nginx + tomcat 实现主从热备 + 负载均衡
前言 首先声明下,由于这两天找资料,看了不少博客 ,但是出于不细心,参考者的博客地址没有记录下来,所有文中要是出现了与大家博客相同的地方,那么请大家在评论区说明并附上博客地址,我好引用进来:这里表示抱 ...
- TortoiseGit安装教程
TortoiseGit 是Windows下的可视化Git界面. 下载Git 网站地址: http://code.google.com/p/tortoisegit/ 安装前必须装上msysgit才能在W ...
- 如何用eclispe远程调试tomcat--转载
原文地址:http://jingyan.baidu.com/article/0320e2c1f4ef6b1b87507b06.html tomcat是一种非常常见的java web应用服务器,有时候服 ...
- SQL Server 之 在数据库之间进行数据导入导出
1.同一服务器上数据库之间进行数据导入导出 (1).使用 SELECT INTO 导出数据 在SQL Server中使用最广泛的就是通过SELECT INTO语句导出数据,SELECT INTO语句同 ...
- Ubuntu中useradd和adduser的区别
在Ubuntu中创建新用户,通常会用到两个命令:useradd和adduser,虽然作用一样,但用法却不尽相同.本文接下来便为读者带来具体的解释. AD:51CTO学院:IT精品课程在线看! 在Ubu ...
- cocos2d-x lua table与json的转换
cocos2d-x lua table与json的转换 version: cocos2d-x 3.6 1.引入json库 require("src/cocos/cocos2d/json&qu ...
- Java设计模式11:常用设计模式之代理模式(结构型模式)
1. Java之代理模式(Proxy Pattern) (1)概述: 代理模式的作用是:为其他对象提供一种代理以控制对这个对象的访问. 在某些情况下,一个客户不想或者不能直接引用另一个对象,而代理对象 ...
- [改善Java代码]Java的泛型是类型擦除的
泛型可以减少强制类型的转换,可规范集合的元素类型,还可以提高代码的安全性和可读性,正是因为有了这些优点,自从Java引入泛型之后,项目的编码规则上便多了一条,优先使用泛型. Java泛型(Generi ...
- Netty学习链接
Netty实战精髓请参见:https://waylau.gitbooks.io/essential-netty-in-action/content/GETTING%20STARTED/Introduc ...
- 实现TableLayout布局下循环取出TableRow控件中的文字内容到list集合
布局方式为TableLayout,利于实现表单样式展现. <!-- 详情内容区域 --> <ScrollView android:layout_above="@id/id_ ...