整合营销服务商

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

免费咨询热线:

解密HTML5未来行业发展方向

TML5作为一个火遍了2016年互联网的网红,前方无疑是开阔而平坦的大道。那么HTML5未来主要会应用在哪些方向上呢?

在智能手机和平板电脑爆炸的今天,移动端明显干掉了PC端成为主流,所以无论开发什么,必定是移动先行。

➤➤➤ 1. HTML5小游戏

未来的Facebook应用生态系统是基于HTML5的,尽管在HTML 5平台开发出游戏非常困难,但游戏开发商却都愿意那么做。HTML5开发将h5小游戏推上巅峰,投入少,变现快,融合产品营销更是易于传播。

➤➤➤ 2. 手机页游的3D化

随着硬件能力的提升、WebGL标准化的普以及手机页游的逐渐成熟,大量开发者需要创作更加精彩的3D内容。

➤➤➤ 3. 视频应用

不管你是想开发出新型视频应用的开发商如Brightcover还是想开发新型音频应用的开发商如Soundcloud,不论是桌面应用还是移动应用,HTML5都是创新的主旋律。

➤➤➤ 4 轻应用、WebApp、微站

轻应用、WebApp、微站HTML5开发移动应用更灵活。采用HTML5技术的轻应用、WebApp以其开发成本低、周期短、易推广等优势,将迅速普及。小程序算是轻应用里的领头羊了,其实在小程序之前也有很多类似的轻应用出现。

➤➤➤ 5. 动漫、二次元

HTML5技术的成熟,将个宅男们带来福利。

动漫元素可通过HTML5来强化创意,动漫形式将具有富媒体的高度交互、MV影音功能,为受众带来更加场景化的二次元体验。

宅男的钱向来是最好赚的,这已经多次被证明。

➤➤➤ 6. HTML5移动营销

游戏化、场景化、跨屏互动,HTML5技术满足了广告主对移动营销的大部分需求,从形式到功能、到传播。

HTML5移动营销的范围更是广泛,从互联网行业,到传统行业,这种营销无疑将带来大量的精通HTML5移动营销的岗位空缺。

➤➤➤ 7. 在线直播

要说HTML5火了整个2016的it圈,那直播就火了整个2016的互联网圈。

HTML5技术将会革新视频数据的传输方式,让视频直播更加高清流畅。而且,视频还将与网页真正的融为一体,让用户看视频如浏览动图一般简单轻松。此外,HTML5可以为视频实现任意平台播放,甚至是人画交互。

直播或成为HTML5领域的爆发点之一。

➤➤➤8 VR

AR、VR也算是当之无愧的2016热词了。

Web VR就是通过HTML5将虚拟现实场景嵌入到网页,目前已受到谷歌、Facebook等巨头的拥护。

Web扩展了VR的使用范围,很多生活化的内容纳入了VR的创作之中,如实景旅游,新闻报道、虚拟购物等,其内容展示、交互都可以由HTML5引擎轻松创建出来。

HTML5这一行业正在走上升的阶段,

各大公司都将会有自己的H5工程师,有自己的H5页面和网站,

也将会通过H5小游戏,H5页面营销来为品牌做推广宣传。

相信H5,把握未来。

频是网页承载内容很重要的一个元素,也是必不可少的网页表现形式(图、文、表、视、音)之一。曾经网页要想播放视频、制作游戏,必须得用第三方插件flash。不仅编写代码要使用额外的语言,浏览器也必须得装第三方插件,非常不方便。随着html5标准逐渐普及,移动端、pc端开始抛弃flash,如今几乎所有的浏览器都使用html5来制作视频。

目标

  1. 了解Flash为何会被淘汰?
  2. 如何设置视频播放?
  3. 视频播放支持哪几种视频格式?

flash崛起--网页标准的耻辱

flash是Adobe公司其中之一的产品。它发起于W3C与WHATWG的第五代web标准之争,它捡了个大便宜,乘机定义网页媒体标准。

W3C与WHATWG的第五代web标准之争

flash填补了当时网页只有文字和图片的单调世界,将媒体(视频、音频、游戏)引入了网页,将网页带进多彩的世界。

Flash能够用仅仅十几K到几百K的体积,呈现出放大也不会失真的矢量彩色动图,甚至还能够做出足以令人沉迷一整天的Flash小游戏。

火柴人

Flash用第三方插件的身份,几乎制霸了网页媒体的标准,让W3C尴尬不已,甚至从某种程度上说,让真正的网页标准推广受阻。

flash衰败--HTML5崛起并全面普及

2010年4月,苹果CEO公开表示从此苹果所有产品不再支持flash。flash从此慢慢丧失移动端的市场和地位。

乔布斯支持html5

2012年,安卓宣布不再支持Flash,从此flash彻底失去了移动端市场和地位。

2012年html5标准确立,html5在逐渐制霸移动端的地位时,也直接冲击了flash仅剩的桌面市场,flash桌面市场的份额在逐步下降。

各大浏览器逐步默认禁用Flash,现2019年几乎都全部禁用。

默认禁用Flash

Adobe将在2020年停止开发和更新flash。

2020年停止开发和更新flash

flash兴起衰败皆因自己

Flash以第三方插件的身份,做着平台该做的事情,但没有推动行业标准统一化,反而企图私立标准。

随着功能的增多,能解码编码H.264,能进行3D渲染,能播放7.1声道环绕声等,功能集于一身变得臃肿,效率变得低下。

Flash非常不安全。Flash能够运行相当复杂的代码,这让Flash非常容易被渗透。加上Adobe在安全方面的不上心,这令Flash安全问题频发。

Flash很不稳定。作为一个插件,它自身频频崩溃也就罢了,还经常拉着浏览器乃至操作系统一起殉情。

Flash加剧了手机的耗电量。

html5媒体新标准--Video标签

作用是在 HTML 页面中嵌入视频元素。Video定义视频,比如电影片段或其他视频流。

视频播放

Video标签的属性

  • src 视频的播放源
  • controls 浏览器自带的控制条
  • width 视频宽度
  • height 视频高度
  • poster 视频封面
  • autoplay 自动播放
  • preload 预加载

有四个是必须的属性:src、controls、width、height属性。

视频播放代码

source标签

<video> 元素支持三种视频格式: MP4, WebM, 和 Ogg。

<source> 元素可以链接不同格式的视频文件。浏览器将使用第一个可识别的格式。

  • src 视频的播放源
  • Type 视频格式 MP4, WebM, 和 Ogg

支持多格式的视频

总结

video标签体系

照相机、留声机诞生,解决了人们记录影像、声音的需求以来,人们就不断地追求着在有限的条件下尽可能地提高这些记录的品质,而从模拟时代过渡到数字时代以后,这方面的追求有一部分变成了在尽可能小的空间中提供尽可能好的内容质量,这就催生出了一系列不断演进着的媒体压缩技术。

不过这期课堂的主题尚未来到媒体编码的历史,在讲音视频图像的压缩算法进化之路前,我们先来了解一下这些媒体内容的载体——容器格式的进化历程。

首先需要区分清楚的,就是容器格式与媒体编码格式。

何为容器(Container)

对于数字媒体数据来说,容器就是一个可以将多媒体数据混在一起存放的东西,就像是一个包装箱,它可以对音视频数据进行打包装箱,将原来的两块数据整合到一起,也可以单单只存放一种类型的媒体数据。它就像电影胶片一样,中央是一帧一帧的图像,而两旁则印有对应的音轨。



举个简单的例子,常见的MP4就是一种媒体容器格式而不是编码格式,它里面的视频编码可以是现在最常见的AVC/H.264,也可以是它的前任H.263或者下一任——HEVC,音频编码可以是常见的AAC也可以是AC-3。

另一个生僻点的例子:最常见的图片格式——JPEG,它其实只是一种压缩方式,而它的存放方式其实叫做JFIF(JPEG File Interchange Format),虽然在JPEG标准中定义了一种名为JIF(JPEG Interchange Format)的容器格式,但是因为其缺乏某些关键要素,造成了使用的不便而被后来第三方开发出来的JFIF容器给取代了,今天我们能够看到的JPEG文件几乎都是装在JFIF容器中的。

虽然今天我们能够直接拿到的MP4文件里面装的几乎都是AVC+AAC的组合,但还是不能混淆了两者的概念,容器就是个容器,它没得灵魂。

AVI: 老而弥坚

AVI可能是和笔者年龄相仿的朋友最早接触的一个格式。确实,它推出的时间相对较早,也是许久以前最为常见的一种容器格式。它全称叫做音频视频交错( Audio Video Interleave),顾名思义,它就是简单地将视频与音频交错在一起,几帧视频之后就是对应的音频段,这样重复,直到结束。



AVI文件的结构示意图

它由三部分组成,头部、主体以及位于文件尾部的索引。头部中含有文件的元数据(metadata),比如视频的分辨率、码率总帧数等信息。主体部分是媒体数据的存放区,它使用了块(chunk)的概念,将原本的视频流和音频流分成块状进行交错放置,就是上面讲的一段视频一段音频交错放置,而尾部则是用来放置索引,它用来记录每个数据块在文件中的偏移位置。



红框标注为对轨道的标识

讲到AVI,还可以联动一下WAV和苹果那边的AIFF,这些容器格式其实是同源的,来自于EA(对,就是现在那个做游戏的EA)为了让不同公司开发出来的软件之间进行数据交换而在1985年开发出来的IFF(Interchange File Format)格式。苹果在IFF的基础上开发出了AIFF,而微软与IBM将IFF格式使用的大端序改成小端序就成了RIFF(Resource Interchange File Format),也就是AVI、WAV这两个容器的基本原型。




AVI虽然老,但是因为它以帧为单位把数据切成块来存放的特性,使得它几乎支持市面上几乎所有的音视频编码。而它的缺点也有很多,首先因为索引在文件尾部的关系,所以它并不适合用来流传输;另外在容器中也没有时间戳,只能通过帧数和帧率信息来进行计算,在索引里面并没有写明时间戳—媒体位置的数据,所以要在播放AVI时进行快速跳转还需要额外的技术手段;而媒体数据分块存放也使得它对很多使用运动预测特性的视频编码的支持并不是太好,因为这些帧,比如P帧和B帧,都是通过I帧进行计算得到的,这就需要访问当前帧以外的数据了。

MPEG-PS:VCD、DVD的功臣

用电脑播放过VCD的朋友一定还记得会在目录里寻找那个最大的.DAT文件来播放,而DVD则是找那个最大的.VOB。其实这两个格式都是MPEG-PS容器规范的一种,此PS非彼Photoshop,而是指Program Stream,是MPEG组织在1993年发布的一个容器标准,并且随后写入ISO/IEC国际标准,除了以上两种后缀名之外,还有.mpg也用的是这个标准。

MPEG-PS标准中引入了包的概念,整个文件由一个个包组成,每个包的大小并不相等,包里面含有这个包的时间码以及对应的音视频数据。

MPEG-PS已经随着时代的进步被废弃了,它只能存放MPEG-1、MPEG-2、MPEG-4这些出自同门的视频编码,限制性较大。但因为VCD和DVD的广泛流行,实际上它还是被用的相当多的。

MPEG-TS:专为流传输而生

MPEG组织不仅仅为音视频文件的存储制定了容器标准,还早早地顺应时代潮流,为它们的传输准备了相应的容器。我们的数字电视和IPTV用的就是MPEG组织在1995年制定的Transport Stream,也就是TS容器,当然它也并不限于这两个场景,在现在的低延时直播系统中,MPEG-TS仍然占据了绝对主流的地位,原因就是它的整个结构就是为了流传输而设计的。



从IP层到TS包内部的结构

一个TS文件中可以容纳多个TS流,不同的流上面可以带有不同的音视频数据,这样通过接收一个TS文件,用户方面可以自由地在这个TS文件中的多个子TS流之间进行切换,非常适合用于传输电视节目。而它同时针对复杂的传输环境进行了针对性的优化,TS流的基础单位是一个个大小仅为188字节的包,每个包都有自己的独立时基,并且由于采用了固定大小,所以在传输过程中即使遭遇丢包也很快就可以恢复正常播放。

发展到今天,TS仍然在网络流传输时代中发挥着自己重要的作用,在苹果主导的HLS(Http Live Streaming)协议中使用的就是TS流,它比MPEG-DASH更加通用,因为后者对于MP4文件进行了一定的修改,在老平台上面支持不太好,而HLS使用的TS仍然是规范中的,可以被大多数设备兼容。

不过也因为TS分包较多的特性,会产生一些数据冗余,所以在存储场景中一般不会使用TS作为容器。

M2TS:专为高清时代而生

M2TS多见于Blu-ray光盘和高清录像(AVCHD)中,它由MPEG-TS修改而来,加入了对于高清时代新的音视频编解码支持。



一张Blu-ray视频光盘中的M2TS

并且由于TS文件的特性,每一个小片上都有自己的独立时间戳,这使得文件中一部分数据即使遭到破坏也不会影响到其他部分的正常播放,而且可以从中随意的进行切片操作。

ASF:先进却早夭

见过ASF格式视频的朋友我想应该不会太多,但是见过WMV和WMA这两个微软以前主推的媒体编码格式的朋友肯定有很多。其实WMV和WMA就是存放在ASF容器之中的,它全称高级系统格式(Advanced Systems Format),微软原本计划是用它来作为AVI容器的后继者的,它具有诸多先进的特性,比如说它可以包含视频除了规格以外的元数据,如导演、电影名这些,它也可以提供数字版权管理(DRM),还有非常好的流传输支持——仅需要加载文件的最小部分即可开始播放,这点小编感受过一次。




ASF文件开头会用这32个字节来标识自己是个ASF文件

ASF身上的这些特性在当时还算是比较先进的,但不过这于事无补,微软建立它那套封闭媒体格式体系的做法并没有得到太多厂商和用户的支持,大家仍然更喜欢用其他更为开放一点的标准,比如MP3就是一个很好的例子。ASF容器也随着微软媒体格式的衰亡而渐渐消失了,我们今天已经几乎看不到WMV、WMA这两个曾经还很常见的格式的影子了。

RM:昔日王者,如今不见踪影



与ASF差不多同时代流行的就是RM和RMVB了,在那个AVC尚未开始普及,DivX和XviD应用较少的年代中,RMVB在国内的各大下载站中都占据了绝对主流的地位,很多视频站也大多使用RM来提供“网络视频点播”的服务。



RM容器的内部结构

不过RM容器本身并不出彩,索引仍然位于文件尾部,不过由于数据段里面有加入时间戳,所以在流传输时还是可以应付用户的跳转操作的。因为这个容器本身与RM编码息息相关的原因,它本身也只能容纳RM编码的视频流,所以在RM编码没落之后我们就很少再看到这些昔日王者了,一个容器格式想要长存,要么在设计上有其独到之处,要么就是要开放,在众多平台上面提供支持。而RM两个理由都不占,效果又比不过新兴的AVC,所以它的没落也是必然了。

FLV:前高清时代的宠儿

还记得十年前的土豆网吗?彼时它还被称为“国内的Youtube”,当时视频网站普遍都还在用Flash写播放器实现流视频播放,而自然而然地,Adobe制定的Flash Video格式就成了这些视频网站主要使用的容器格式,也就是我们熟知的FLV。



FLV格式是在Flash Player 6中引入的,当时更多的是被存放在SWF文件的内部,不过后来因为体积越来越大而直接独立了出来,它的结构相对而言比较简单,主要分为两块,位于文件头部的元数据信息和后面的音视频数据。不过在数据的存放上面,FLV是将数据分为多个标签进行存储的,每个标签都带有自己的时间戳,所以这就保证了流传输时的音画同步。

由于FLV结构简单但是功能足够用,并且被Flash Player天然支持,所以在当时的视频网站上面普遍都使用它作为容器,直到今天还有很多网站没有放弃它,虽然其中的视频编码早已升级,它也有衍生出来的F4V作为后继者,虽然后者的血统已经不是Flash家族的了。

F4V:换了血的继任者

小编还记得土豆网在2009、2010年左右在国内率先开始使用H.264编码,当时如果将清晰度切换到“高清”就会播放这些用H.264编码的视频。而用飞速土豆加速会缓存到一些.f4v扩展名的文件,乍一看还以为它就是FLV,但其实不然,F4V其实是MP4所在的ISO标准容器家族的,但也是Adobe搞出来的FLV的后继者。关于后者的详情,请往下看。

MOV:苹果向业界作出的贡献

MOV格式的正式名字叫QuickTime File Format。看到这个QuickTime第一反应肯定是“哦,这是苹果的东西”。确实,QuickTime File Format是由苹果在1998年推出的,它引入了原子(atom)的概念,在QTFF格式中,atom是基本的数据单元,它可以用来容纳实际的音视频数据,也可以放置元数据和字幕等文本信息,atom中所容纳的数据类型和大小在每个atom的头部进行描述,经过一层层的嵌套之后,整个数据文件呈现了一种树状的结构,并且保留了强大的可扩展性。



MOV和MP4这些ISO标准容器格式的开头都有一个ftyp用于标记格式

MOV作为苹果QuickTime编码的成员,在目前仍然被苹果设备广泛使用着,并且对于它的支持非常好。1998年推出QTFF的同时,苹果将这个格式交给了ISO组织,后者将它标准化为国际通用容器格式,而基于这个标准衍生出来的容器,又可以叫做ISO/IEC base media file format,同时被MPEG组织采纳,写入MPEG-4 Part 12标准中。

ISO标准容器格式

ISO标准容器格式是一个规范,它代表符合这个规范的容器类型,而不是特指某个格式。它是由苹果的QuickTime File Format发展而来的,在MPEG-4 Part 12中被最终确定并被ISO/IEC组织写入标准。它虽然没有具体实现,但是它定义了基于时间码的多媒体文件的通用结构,并由此成为了MP4、3GP等格式的基础。



3GP、MP4与ISO标准容器格式的关系

MP4:标准,泛用

MP4肯定是现在最通用最流行的媒体容器,甚至可以说没有之一。但其实现在的MP4和早期的并不是同一个标准,目前常见的MP4标准是在2003年完整的的MPEG-4 Part 14规范中制定的,到今天为止也经过了多次的修订。它其实与MOV之间并没有太大的区别,基本上就是把MOV的atom改了个名字,叫成box,然后加了一点别的佐料。



MP4的内部结构

苹果建立iTunes Store卖数字音乐的时候选择了AAC-LC作为他们的音频编码格式,而容器格式上面他们并没有选择与AAC-LC处于同一时代(MPEG-2)的ADTS,而是选择了比AAC-LC大一辈的MPEG-4标准容器,也就是MP4,不过因为它只含音频所以我们看到的扩展名就是.m4a,iTunes Store还卖一种只有视频没有音频的MV,它用的也是MP4,扩展名为.m4v,本质上它们就是同一种东西。

目前很多视频网站已经从FLV切换到MP4上面了,而且还有一种新的MPEG-DASH格式就是借助于MP4可分割的特性实现的,它将一整段视频切成许多段小块,方便浏览器进行加载,减少HTTP长连接对服务器的压力。

这里说一句题外话,当年某站刚上HTML5播放器的时候,因为他们原来的视频几乎全部都用的是FLV存储的,而HTML5标准并不支持它,所以要进行一个容器转换,某站当时一位非常年轻的程序员写出了一个在浏览器内实时将FLV文件转成MP4并喂给浏览器的媒体播放器的脚本,名为flv.js,这个脚本可能给某站省下了非常大的格式转换成本。不久之后这位程序员因为受不了某站的低薪而离职。这件事曾经引起了很多社区的热烈讨论,因为今天是程序员日所以特地写了这么一段。

3GP:精简小巧,手机最爱

3GP是MP4的同族兄弟,一样是基于ISO标准容器格式,用过3GP的兄弟肯定还记得这格式最多出现的地方是哪里——以诺基亚为代表的前智能手机时代,手机录像出来的文件大多都是3GP格式的。

3GP这个容器格式标准其实不是由以往的MPEG啊这类专注于多媒体编码的组织搞出来的,而是3GPP,对没错就是制定通信行业标准的那个组织制定的。它在容器支持的格式上进行了精简,只面向于手机可以进行的编码,比如MPEG-4 Visual、H.263这些比较老的视频编码和AMR、AAC这两种前智能手机时代使用较多的音频编码。

因为前智能手机时代的手机性能并不强大,一般也不需要支持很多种格式,不用像MP4那么全面,所以3GP最终成为了一种被广泛支持的格式,不过也因为它支持的格式过于有限,最终在智能手机时代被同门大哥MP4给取代了。

MPEG-DASH

面对时下流行的流媒体,MPEG组织对MP4文件进行了魔改,由于MP4天生可以进行无损切割的特性,DASH方式将原本媒体文件中完整的文件头的元数据信息和片段Box中的信息抽取出来单独写在一个文件(MPD)中,同时还包含了片段的URL等信息,播放器可以自适应选择需要的片段进行播放,在自适应程度上面比HLS更强一些。(其实MPEG-DASH也可以用TS作为容器,但用MP4更多一些)



目前MPEG-DASH已经成为了一项国际标准,人们比较熟悉的应用平台就是Youtube和Netflix,在这些平台上面你会发现浏览器在不断地加载一些小的视频文件,但是视频的播放是连续的。

MKV:强大无需多言,免费让它受爱

说到MKV,喜欢收藏高清电影的朋友肯定不会陌生,这种容器格式大概是和高清时代一起发展起来的,但其实它在2002年底就已经完成制定了,不过推广的很缓慢,到了高清时代和UHD时代人们才开始发现这种容器的强大,并用的越来越多,连微软都在Windows 10的初始版本中加入了对它的支持。



MKV的内部结构

MKV全名Matroska,它身上最大的特点就是开放标准、免费使用,而且它可能是目前地球上最强大的数字媒体容器格式,一个文件中可以放音频、视频、字幕、字体还有章节信息等等等等,前面东西都是不限数量任你放多少都可以吃得下的,而且它是目前唯一一个支持封装ASS字幕的格式。

值得一提的是,这玩意儿是俄罗斯组织матрёшка搞出来的,其实本身是用于盗版的,俄罗斯的网络情况跟我们挺像的,网络上盗版横行,而MKV也帮助了文件的传播,目前来看,MKV可能是众多容器格式里面最好用的,无论是编辑元数据还是抽取轨道重新封装都有GUI工具支持,不过可惜的是众多视频编辑剪辑软件还是没有提供对它的支持。

总结

其实读到最后你会发现,这些容器格式内部对于音视频数据的处理都是大同小异的,区别点其实并不大。更多的差距在于它们对于不同编码格式的支持程度、元数据的详细程度以及对于是否能够支持音视频以外的数据。

而发展到至今,MP4仍然够用,在互联网时代扮演着非常重要的角色;MKV在下载党那里被奉为圭臬;而TS格式仍然在数字电视系统中被广泛使用。但在他们之前的格式也不是说非常弱或者不好,只不过可能是他们支持的那些格式没落了顺带着把它们也带没了,真正像AVI那样确实在技术规格上落伍的容器并不多。

而对于各种容器之间无损互转的事情,小编这里推荐mp4box、mkvtoolnix和强大的ffmpeg这些工具。下一篇系列课堂,我们会转向在如今多媒体领域中扮演无可替代角色的视频编码的变迁史,并且会看一看未来的AV1和VVC这两种对于大众来说还很陌生的下一代视频编码。