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 ...
随机推荐
- 使用 T4 文本模板生成设计时代码
使用设计时 T4 文本模板,您可以在 Visual Studio 项目中生成程序代码和其他文件. 通常,您编写一些模板,以便它们根据来自模型的数据来改变所生成的代码. 模型是包含有关应用程序要求的 ...
- Java中的DeskTop类
在Jdk1.6以后新增加了一个类--DeskTop,在JDK中它的解释是这样的: The Desktop class allows a Java application to launch a ...
- MyISAM表锁
MyISAM存储引擎只支持表锁,这也是MySQL开始几个版本中唯一支持的锁类型.随着应用对事务完整性和并发性 要求的不断提高,MySQL才开始开发基于事务的存储引擎,后来慢慢出现了支持页锁的BDB存储 ...
- Qt focusoutevent 不响应的解决方法
一般利用focus(焦点)来实现弹窗自动关闭效果. Qt的focus貌似是自己的bug, 经常无法接收到focusout的事件 例如: widgetA 中执行 widgetB->show(); ...
- lisener在web.xml中设置
/* * servlet监听器开发步骤: * 1.写一个类实现XXXListener接口(6个=3个容器+3个对容器中属性进行操作) * 2.在web.xml中配置<listener> - ...
- Storm中的LocalState 代码解析
官方的解释这个类为: /** * A simple, durable, atomic K/V database. *Very inefficient*, should only be * used f ...
- Java基础知识强化101:Java 中的 String对象真的不可变吗 ?
1. 什么是不可变对象? 众所周知, 在Java中, String类是不可变的.那么到底什么是不可变的对象呢? 可以这样认为:如果一个对象,在它创建完成之后,不能再改变它的状态,那么这个对 ...
- obj 转为Json 时间格式自定义
var tb = evnWarningBll.GatWarning(); var timeFormat = new IsoDateTimeConverter(); ...
- Oracle 追踪回话SQL几种方法
生成sql trace可以有以下几种方式: 1.参数设置:非常传统的方法. 系统级别: 参数文件中指定: sql_trace=true 或 SQL> alter system set sql_t ...
- [改善Java代码]优先使用整型池
建议28: 优先使用整型池 看如下代码: public class Client { public static void main(String[] args) { Scanner input = ...