专栏首页踏浪的文章HTML5视频与音频

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绘制

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter lesson 6: Flutter组件之基础组件(二)

    Row这个Widget其实就是一个布局组件,类似于前端中flex-direction: row;。作用就是可以使Row中的子元素在水平方向上面排列,可以用来做走...

    踏浪
  • 各种IT网站收藏

    踏浪
  • 再看JavaScript,那些遗漏或易混淆的知识点(1)

    , 运算符优先级相当的低,比 = 还低。所以,这里使用括号包裹。使用括号包裹以后,会选择括号中的最后一个元素作为括号运算的返回值。

    踏浪
  • 在线课堂/在线医疗直播点播平台EasyDSS如何将音频和视频数据分离?

    跟所有TSINGSEE青犀视频云边端架构产品一样,EasyDSS视频直播点播平台可以将音视频数据同步传输和录制,但是在部分现场中,项目需要将直播的视频和音频流进...

    TSINGSEE青犀视频
  • 长音频要变天了?

    对于很多人来说,家里的电视已经基本沦为一个做饭、打扫时制造BGM的工具,他们并非特别在乎电视上的新闻或者电视剧,他们只不过是不想让自己的耳朵“闲”下来。

    刘旷
  • IoT中的高音质音频设计

    音频是许多物联网应用不可或缺的组成部分, 包括消费品(如扬声器、耳机、可穿戴设备),医疗设备(如助听器),自动化工业控制应用、娱乐系统和汽车的信息娱乐设备等。

    半吊子全栈工匠
  • 理解音频焦点 (第1/3部分):常见的音频焦点用例

    Android 开发者
  • 笔记60 | Android控制音量与音频播放的学习

    项勇
  • 理解音频焦点 (第 2/3 部分):更多的音频焦点用例

    Android 开发者
  • 探秘VR体验背后的功臣——3D音频技术

    VRPinea

扫码关注云+社区

领取腾讯云代金券