整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html5常见的音视频格式和解决方案

图网长期致力于web前端开发,难免会和各种视频、音频打交道,除了常见的mp4、mp3等格式,其实还有m3u8、oga等等其他没有那么常见的格式,那么你都了解了吗?下面介绍一下html5常见的音视频格式和解决方案。



万能播放插件js

1.ckplayerhttp://www.ckplayer.com/

2.Sewise Player

一款专业的免费网页HTML5视频、流播放器,它功能强大,体积小,跨平台,兼容性好,使用方便简洁。确定html5与flash播放的优先级。支持跨终端播放,不仅适用PC端播放,也适配ipad、iphone、android手机、平板电脑等移动终端。 支持多系统多平台,PC端支持Window、MacOS、Linux 等,移动端支持Android、IOS、Window Phone等。 兼容HTML5,确保98%的互联网用户可以看到您的视频。 支持多浏览器兼容,IE6/7/8/9/10、Chrome、Firefox、Safari、Opera等。 接收来自任何地方的音视频流 支持mp4、m3u8、oga、webm、theora、flv、f4v等视频格式播放。 支持Flash播放m3u8文件,以及AES-128解码播放。 支持播放地址AMF, AJAX, JOSNP类型请求。 支持PC与Mobile平台播放器自动识别功能。 支持浏览器HTML5与Flash特性检测。

3.hls

http://www.bootcdn.cn/hls.js/

仅支持hls(m3u8)地址,不支持flv,mp4,mov,f4v,3gp格式,做了跨平台的适配, 支持PC终端,Android安卓终端,iOS苹果终端,WP终端的正常播放。

m3u8是m3u的一种,是utf-8格式的,Apple 为了提高流播效率开发的技术,特点是将流媒体切分为若干 TS 片段(比如每10秒一段),然后通过一个扩展的 m3u 列表文件将这些 TS 片段集中起来供客户端播放器接收。可以做多码率的适配,根据网络带宽,客户端会自动选择一个适合自己码率的文件进行播放,保证视频流的流畅。

MP4是一套用于音频、视频信息的压缩编码标准,支持所有音频和视频以及高级内容(或它们的混合),编码格式:H.264格式高清

MP4是遵循MPEG-4(ISO 14496-14)的官方容器格式定义的广义文件扩展名。它可以流媒体化并支持众多多媒体的内容(多音轨(multiple audio)、视频流(video)、字幕(subtitlestreams)、图片(pictures)、可变桢率(variable-framerates)、码率(bitrates)、采样率(samplerates)等)和高级内容(advanced content)(官方称之为“Richmedia”(超媒体)或“BIFS”(Binary Format for Scenes/二进制格式场景),类似2D和3D图形,动画、用户界面、类DVD菜单,上述这些AVI搞不定的东西。

其他相关的扩展名:

– .m4v:是.mp4文件的错误扩展名,由apple提出,支持视频+音频,m4v扩展名可以安全地更名为.mp4

– .m4a:是.mp4文件的错误扩展名,由apple提出,只支持音频,m4a扩展名可以安全地更名为.mp4

– .m4p:随iTunes发售的DRM(Digital Rights Management/数字版权保护技术)产权保护的文件,使用Apple开发的DRM sheme

– .m4e:由.sdp修改扩展名的来的文件,Envivio用其于流媒体播放。

– .m4v, -.mp4v, -.cmp, -.divx, .-xvid, .264:raw的mpeg-4视频流(并非内含于mp4)。

– .3gp, -.3g2:手机中使用的格式,其中储存的内容同样在.mp4未被定义(H.263, AMR(Adaptive Multi Rate/自适应多码率))。

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

OGV是html5中的一个名为Ogg Theora的视频格式,起源于ogg容器格式。

webm由Google提出,是一个开放、免费的媒体文件格式。WebM标准的网络视频更加偏向于开源并且是基于HTML5标准的,WebM 项目旨在为对每个人都开放的网络开发高质量、开放的视频格式,其重点是解决视频服务这一核心的网络用户体验。

MOV(QuickTime)它是Apple公司开发的一种音频、视频文件格式,用于存储常用数字媒体类型。QuickTime用于保存音频和视频信息,包括Apple Mac OS,MicrosoftWindows95/98/NT/2003/XP/VISTA,甚至WINDOWS7在内的所有主流电脑平台支持。

WMV微软推出的一种采用独立编码方式并且可以直接在网上实时观看视频节目的文件压缩格式。WMV格式的主要优点包括:本地或网络回放、可扩充的媒体类型、部件下载、可伸缩的媒体类型、流的优先级化、多语言支持、环境独立性、丰富的流间关系以及扩展性等。

MPG/MPEG(.mpg, .mpeg)

Realmedia(.rm, .rmvb)

AVI(.avi)

Flv/swf

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com )切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!

eb 上的多媒体指的是音效、音乐、视频和动画。

现代网络浏览器已支持很多多媒体格式。

什么是多媒体?

多媒体来自多种不同的格式。它可以是您听到或看到的任何内容,文字、图片、音乐、音效、录音、电影、动画等等。

在因特网上,您会经常发现嵌入网页中的多媒体元素,现代浏览器已支持多种多媒体格式。

在本教程中,您将了解到不同的多媒体格式,以及如何在您的网页中使用它们。

浏览器支持

第一款因特网浏览器只支持文本,而且即使是对文本的支持也仅限于单一字体和单一颜色。随后诞生了支持颜色、字体和文本样式的浏览器,图片支持也被加入。

不同的浏览器以不同的方式处理对音效、动画和视频的支持。某些元素能够以内联的方式处理,而某些则需要额外的插件。

多媒体格式

格式 多媒体元素(比如视频和音频)存储于媒体文件中。

确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时,它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件,而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。

多媒体元素元素也拥有带有不同扩展名的文件格式,比如 .swf、.wmv、.mp3 以及 .mp4。

视频格式

MP4是互联网推出新的视频格式。YouTube 推荐使用 MP4 。Flash Players 支持 MP4HTML5 支持 MP4。
格式文件描述
AVI.aviAVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式,但非 Windows 计算机并不总是能够播放。
WMV.wmvWindows Media 格式是由微软开发的。Windows Media 在因特网上很常见,但是如果未安装额外的(免费)组件,就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放,因为没有合适的播放器。
MPEG
  • .mpg
  • .mpeg
MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的,得到了所有最流行的浏览器的支持。
QuickTime.movQuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式,但是 QuickTime 电影不能在没有安装额外的(免费)组件的 Windows 计算机上播放。
RealVideo
  • .rm
  • .ram
RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下(在线视频、网络电视)的视频流。由于是低带宽优先的,质量常会降低。
Flash
  • .swf
  • .flv
Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。
Mpeg-4.mp4Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上,YouTube 推荐使用 MP4。YouTube 接收多种格式,然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4,将其作为 Flash 播放器和 HTML5 的因特网共享格式。
最新的 HTML5 标准只支持 MP4, WebM, 和 Ogg 视频格式。

声音格式

MP3是一种音频压缩技术,其全称是动态影像专家压缩标准音频层面3(Moving Picture Experts Group Audio Layer III),简称为MP3。它被设计用来大幅度地降低音频数据量。如果你的站点是音乐类型的,你可以选择mp3格式。

格式文件描述
MIDI
  • .mid
  • .midi
MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备(比如合成器和声卡)的格式。MIDI 文件不含有声音,但包含可被电子产品(比如声卡)播放的数字音乐指令。点击这里播放 The Beatles。因为 MIDI 格式仅包含指令,所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小,但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。
RealAudio
  • .rm
  • .ram
RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流(在线音乐、网络音乐)。由于是低带宽优先的,质量常会降低。
Wave.wavWave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器(除了 Google Chrome)都支持它。
WMA.wmaWMA 格式 (Windows Media Audio),质量优于 MP3,兼容大多数播放器,除了 iPod。WMA 文件可作为连续的数据流来传输,这使它对于网络电台或在线音乐很实用。
MP3
  • .mp3
  • .mpga
MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。
HTML5 的最新标准支持 MP3, WAV, 和 Ogg 音频格式。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

、厘清概念


formats :视频文件格式(简称:文件格式)

codecs :视频封装格式(简称:视频格式)

codecs 负责在保证视频清晰度的基础上尽可能的压缩视频,所以 codecs 同时需要对应的编码器和解码器

而 formats 只是一个承载被压缩的视频的容器而已。他负责把视频、音频绑定起来,并且高级的 formats 会提供如支持内嵌字母,支持分章节等扩展功能

举例:xxx.avi 的 formats 是 avi,codecs 是 H.264。

码率:视频码率就是数据传输时单位时间传送的数据位数,一般我们用的单位是kbps即千位每秒。码率越高,视频越清晰

但为了节约视频的体积,在画面变化幅度不大或者色调比较单一的时候,主流的做法是采用 VBR 可变码率来收录画面。

二、formats


1、常见的 formats

格式公司备注MP4AVI微软WMV微软MOV苹果QuickTime 影片格式M4V苹果基于 MP4 的封装RM / RMVBrealplayFLVflashWebMgoogle

注:RMVB 比 RM 多了 VB,就是加入了可变码率(VBR)的技术

2、主流视频网站使用的 formats

视频网站格式优酷MP4腾讯视频MP4bilibiliFLVYoutubeWebM

注:html5 中的 <video/> 照理说不支持 FLV 格式,bilibili 是如何做到的呢,答案就在这个库:https://github.com/Bilibili/flv.js/

三、codecs


下面是制定 codecs 视频压缩技术的几个主流组织:

1、MPEG

MPEG (Moving Picture Experts Group):国际标准化组织(ISO)和国际电工委员会(IEC)下属的“动态影像专家组”

MPEG-1(VCD)、MPEG-2(DVD)、和MPEG-4(互联网)

注:没有 MPEG-3

2、ITU

ITU :国际电传视讯联盟( International Telecommunication Union )

3、H.264

MPEG 跟 ITU 合作弄出了 H.26X 系列(H.261 H.262……),其中 H.264 是现在使用最多的

注:一般会跟 MP4 搭配,称之为 MP4 + H.264

比如我电脑上随机找一个视频文件:

不过,H.264 是一种专利视频格式。它的专利被一家 MPEG-LA 公司控制。

既然有专利,那就有专利到期后续费被恶意抬价的风险,所以诞生了民间的开源的 Theora

但为什么现在大家都在用 H.264 而不是 Theora 呢?

第一个原因:没有一家实体公司来承担 Theora 的专利责任

第二个原因:一些主要的大公司,本身就是 MPEG-LA "专利池"的所有者,比如苹果公司和微软公司。

第三个原因:H.264 也有免费授权,前提是你使用得是非商业目的。

4、VP8

在最新的一代 H.265 到来之前,搅局者 Google 带着 VP8 出现了,基于 VP8 的 formats 称为 WebM

VP8 比起前面提到的 Theora 来说,要更加的优秀,而且还有强大的社区作为其后盾,特别是 Google 的支持,所以他率先用在了 Youtube 上。

而且 VP9 也快来到了。

VP8 跟 H.264 比最大的好处应该就是没有专利权问题。

VP8 跟 H.264 比不足的就是,H.264 有众多硬件支持,而 VP8 暂时只能靠软解码,所以谁快谁慢不言而喻。

四、html5支持的视频格式


按热门从上到下排序:

MP4 + H.264

WebM + VP8

Ogg + Theora + Vorbis

五、常用软件操作


1、final cut pro 做好视频后导出为mp4保存

需求:不想默认保存为苹果的 mov 格式怎么办?

2、Aimersoft Video Converter Ultimate —— Mac 下的“格式工厂”

同样是苹果开发的格式转换软件 compressor,竟然不支持转换到 mp4

所以我们用 Aimersoft Video Converter Ultimate


[拓展]

硬解 vs 软解

硬解码是用GPU解码,不会造成过多的CPU负载

软解码是用CPU解码,会导致是CPU占用率很高

推荐看视频打开硬解码,好处如下:

(1)高清视频下硬解码效果会好于软解码

(2)硬解码更省电