HTML5视频与音频

@(HTML5)[HTML5视频与音频]

[TOC]

十二、HTML5视频与音频

简单介绍
HTML5 对视频和音频特性规范文档的制定是被讨论最多的。除浏览器自带支持的明显好处外,评论点集中在浏览器提供商对音频/视频格式 的不同选择。如果你准备使用HTML5的

音频: ogg (ogg, oga), mp3, wav, AAC
视频: ogg (ogv), H.264 (mp4)

另外你还需要留意一下 Google 的 VP8 视频解码,这个将被作为一个开源格式来结束(格式选择的)纷争。HTML5 提供的一个解决方案是 ,让你可以指定多个不同格式的源文件,以便于用户浏览器选择它认识的文件。对于 < IE9 和旧浏览器,你将需要一个折衷的解决方案。

当你第一次尝试 HTML5 的音频/视频,你可能会想知道这些可能对你有帮助的东东:

你的服务器必须支持你打算提供的音频/视频的 MIME 格式。你将需要检查一下其在本地服务器上是否被支持。

如果你使用 Safari 来检测 HTML5 的音频/视频支持,需要安装 QuickTime Player,没有QuickTime Player 的 Safari 什么都不能播放。

音频 - audio

关于音频的格式

ogg

Ogg全称应该是OGGVobis(oggVorbis)是一种新的音频压缩格式,类似于MP3等的音乐格式。Ogg是完全免费、开放和没 有专利限制的。OggVorbis文件的扩展名是.OGG。Ogg文件格式可以不断地进行大小和音质的改良,而不影响旧有的编码器或播放器。

mp3

MP3是一种音频压缩技术,其全称是 动态影像专家压缩标准音频层面3(Moving Picture Experts Group Audio Layer III),简称为MP3。 它被设计用来大幅度地降低音频数据量。利用 MPEG Audio Layer 3 的技术,将音乐以1:10 甚至 1:12 的压缩率,压缩成容量较小的文件,而 对于大多数用户来说重放的音质与最初的不压缩音频相比没有明显的下降。它是在1991年由位于德国埃尔朗根的研究组织Fraunhofer-Gesellschaft 的一组工程师发明和标准化的。用MP3形式存储的音乐就叫作MP3音乐,能播放MP3音乐的机器就叫作MP3播放器。

wav

WAV为微软公司(Microsoft)开发的一种声音文件格式,它符合RIFF(Resource Interchange File Format)文件规范,用于保存Windows平台的音 频信息资源,被Windows平台及其应用程序所广泛支持,该格式也支持MSADPCM,CCITT A LAW等多种压缩运算法,支持多种音频数字,取样频率和 声道,标准格式化的WAV文件和CD格式一样,也是44.1K的取样频率,16位量化数字,因此在声音文件质量和CD相差无几! WAV打开工具是WINDOWS 的媒体播放器。

acc

AAC(Advanced Audio Coding),中文称为“高级音频编码”,出现于1997年,基于 MPEG-2的音频编码技术。由Fraunhofer IIS、杜比实验室 、AT&T、Sony(索尼)等公司共同开发,目的是取代MP3格式。2000年,MPEG-4标准出现后,AAC 重新集成了其特性,加入了SBR技术和PS技术, 为了区别于传统的 MPEG-2 AAC 又称为 MPEG-4 AAC。

使用

<audio controls autoplay loop src="audio/after the afterparty.mp3">
        <!-- <source src="audio/after the afterparty.mp3" type=""> -->
</audio>

属性

HTML5 Audio/Video 方法

addTextTrack():向音频/视频添加新的文本轨道
canPlayType():检测浏览器是否能播放指定的音频/视频类型
load():重新加载音频/视频元素
play():开始播放音频/视频
pause():暂停当前播放的音频/视频

HTML5 Audio/Video 属性

audioTracks:返回表示可用音轨的 AudioTrackList 对象
autoplay:设置或返回是否在加载完成后随即播放音频/视频
buffered:返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller:返回表示音频/视频当前媒体控制器的 MediaController 对象controls:设置或返回音频/视频是否显示控件(比如播放/暂停等)crossOrigin:设置或返回音频/视频的 CORS 设置 currentSrc:返回当前音频/视频的 URLcurrentTime:设置或返回音频/视频中的当前播放位置(以秒计)defaultMuted:设置或返回音频/视频默认是否静音 defaultPlaybackRate:设置或返回音频/视频的默认播放速度duration:返回当前音频/视频的长度(以秒计)ended:返回音频/视频的播放是否已结束 error:返回表示音频/视频错误状态的 MediaError 对象loop:设置或返回音频/视频是否应在结束时重新播放mediaGroup:设置或返回音频/视频所属的组合(用于连接多个音频/视频元素)muted:设置或返回音频/视频是否静音networkState:返回音频/视频的当前网络状态paused:设置或返回音频/视频是否暂停playbackRate:设置或返回音频/视频播放的速度played:返回表示音频/视频已播放部分的 TimeRanges 对象 preload:设置或返回音频/视频是否应该在页面加载后进行加载 readyState:返回音频/视频当前的就绪状态 seekable:返回表示音频/视频可寻址部分的 TimeRanges 对象 seeking:返回用户是否正在音频/视频中进行查找src:设置或返回音频/视频元素的当前来源startDate:返回表示当前时间偏移的 Date 对象 textTracks:返回表示可用文本轨道的 TextTrackList 对象 videoTracks:返回表示可用视频轨道的 VideoTrackList 对象volume:设置或返回音频/视频的音量`

HTML5 Audio/Video 事件

abort:当音频/视频的加载已放弃时
canplay:当浏览器可以播放音频/视频时
canplaythrough:当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange:当音频/视频的时长已更改时
emptied:当目前的播放列表为空时
ended:当目前的播放列表已结束时
error:当在音频/视频加载期间发生错误时
loadeddata:当浏览器已加载音频/视频的当前帧时
loadedmetadata:当浏览器已加载音频/视频的元数据时
loadstart:当浏览器开始查找音频/视频时
pause:当音频/视频已暂停时
play:当音频/视频已开始或不再暂停时
playing:当音频/视频在已因缓冲而暂停或停止后已就绪时
progress:当浏览器正在下载音频/视频时
ratechange:当音频/视频的播放速度已更改时
seeked:当用户已移动/跳跃到音频/视频中的新位置时
seeking:当用户开始移动/跳跃到音频/视频中的新位置时
stalled:当浏览器尝试获取媒体数据,但数据不可用时
suspend:当浏览器刻意不获取媒体数据时
timeupdate:当目前的播放位置已更改时
volumechange:当音量已更改时
waiting:当视频由于需要缓冲下一帧而停止

注意:为了兼容性。一般使用source标签加载多个音频

利用AudioContext绘制

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,377评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,390评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,967评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,344评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,441评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,492评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,497评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,274评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,732评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,008评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,184评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,837评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,520评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,156评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,407评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,056评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,074评论 2 352

推荐阅读更多精彩内容