Flash的兴衰史和HTML5的崛起

原标题:Flash的兴衰史和HTML5的崛起

随着电子产品和网络化越来越深入普通人的生活,手机与平板基本已经变成了随身装备,新型号的手持电子设备越来越迅速地被投入到市场中,这些电子设备与前代相比,往往有更为便捷的操作界面,同时也提供了更多带有新功能的手机软件让用户在市场中下载。

商务用户通常使用手机来作为个人信息管理软件,例如收发电子邮件,合理安排自己的日历项目,和他们的联系人互动,例如掌上游戏、在手机上看视频、听音乐和广播,以及使用各类社交软件。

目前手机端市场份额主要占有者是苹果的IOS系统以及安卓系统,微软也正期盼使用Win7手机来打开市场,这为应用开发者提供了很大的机会,开发、销售他们软件的渠道将变得更为多样化。

同样的,对于需要通过互联网来销售产品的电商,HTML5编写而成的手机客户端也让用户操作起来更为方便,闲时只要点几下手机,立马就能把自己想要的商品买下送回家。而逢年过节,各大电商也不用等着客户都更新好客户端才能开始活动,只要更新完HTML5页面,客户看到的自然是最新版。

1. 时代的更迭

1994年10月,麻省理工学院计算机科学实验室内,20世纪最伟大的发明家之一——蒂姆·伯纳斯·李先生,创建了万维网联盟。从此,互联网席卷全球的大潮拉开了序幕。世界各地的人们即使足不出户也可以共享全世界任何角落的信息,各种Web应用使人类的生活变得丰富多彩。尤其是在最近的20年,全世界互联网在诸如微软、苹果、谷歌、Facebook等众多知名公司的带领下高速发展,多个领域都发生了日新月益的变化。21世纪初,随着移动互联网时代的到来,许多互联网相关技术的发展犹如乘了诸葛孔明草船借箭的东风,势头扶摇而上,直冲云宵。我们有幸生在这个时代,能亲眼目睹一次真正意义上的行业变革。每时每刻都有大量的新技术出现,同时也伴随着许多技术被替代掉。而HTML的下一个标准HTML5,可以说是未来发展前景突出的技术之一。作为本次论文的论述对象,要在视频直播领域提及HTML5,就无法跨过它的前辈Flash。追随历史的印迹,拂去时光的尘埃,让我们的思绪回到从前。

2. 昔日王者Flash的兴衰史

  • 初啼,划破黑暗的利剑

初啼,划破黑暗的利剑

故事的主角——乔纳森·盖伊,孩童时代沉迷于建筑,常幻想成为伟大建筑师,整日坐在桌前为设计一间小屋而写写画画。因不满足局限于纸上的设计,他在自家屋后盖起了真正的小屋和车库。因为要设计油漆房间,于是他买了一台苹果电脑,并使用古老的BASIC语言进行编程。一天,他对着电脑屏幕发呆,脑中突然火花闪现,产生了一个“让电脑把人的设计思维以图像等形式表现”的念头。传奇就是这样开始的。1993年,乔纳森·盖伊成立了自己的公司FutureWave Software,致力于图像的研究。次年,他决定将绘图软件转移至矢量绘图上。后又根据用户意见,投向了动画软件的制作。

1995年,互联网Web应用兴起,人们对于在互联网上获取图像和动画的需求变得强烈。盖伊认为属于他的时机到来。于是,他采用当时成熟的Java嵌入式播放器作为动画播放的第一方案。由于Java速度太慢,动画效果并不令人满意。因此盖伊再次投入开发和研究工作,试图找到更方便制作动画的方案。最终,FutureSplash Animator发行,也就是Flash的前身。1996年11月,Macromedia收购FutureWave公司,并将其改名为Macromedia Flash 1.0。

  • 成长,一骑绝尘的英雄

成长,一骑绝尘的英雄

1998年5月,Flash 3.0发布,支持影片剪辑,Java插件,透明度和独立播放器。

1999年6月,Flash 4.0发布,支持变量,文本输入框,增强的Action,流媒体。从4.0版本开始,Flash有了自己专用的播放器,称为Flash Player,原本的Shockwave播放器仅供Director使用。不过为了向下兼容,Flash制作的动画仍旧沿用”.swf”作为文件名。

2000年8月,Flash 5.0发布。支持XML和Smart Clip。Action被定位为发展成一种完整的面向对象的语言,且遵循ECMA 的标准。

2002年3月,Flash MX推出,支持对外部JPG和MP3的调入,提供了对HTML文本更为精确的控制,改进了swf文件的压缩技术。

2003年9月,Flash MX 2004发布。

2005年9月,Flash 8.0发布,增强了对视频的支持。可将其打包成flv文件。同年,Adobe耗资34亿美元并购Macromedia。Flash正式成为Adboe公司旗下的产品。

  • 崛起,低速时代的救赎

崛起,低速时代的救赎

在2000年前后,尽管互联网已经开始了普及,但是当时的互联网还是以静态内容为主。由于带宽限制,那时的互联网主要以文字为主,图片使用也需要注意尺寸,打开大点的图片就要等上一段时间,下载一首MP3需要十多分钟甚至二十分钟。至于视频,看一段清晰度很差的视频等上20分钟。并且还得先安装第三方插件。

九十年代的浏览器还不支持CSS,而Flash的优点是可以在浏览器播放动画。Flash当时技术特点是超高压所比的文件格式,矢量绘图,边下边播。正是在这样的背景下,Flash开始异军突起,因为Flash是矢量动画,一个好处是空间占用小,另一个好处是可以无限放大不失真。空间占用小,因此用户打开快,可以在互联网上动起来。可以无限放大,因此用户可以看到清晰的动画。于是Flash就火了起来,几乎每台电脑都要安装Flash插件。而网站也找到了好的广告载体,当年的互联网本来就靠广告生存,体积小、效果炫的Flash天生就是给广告准备的,于是任何一个网站都是大面积的Flash广告栏。Flash正式兴起,闪客成为时尚。

  • 辉煌,视频时代的王者

辉煌,视频时代的王者

当然,互联网的带宽不会一直窄下去,到了21世纪,有了宽带,带宽增加了,视频需求增加。而Flash没有沉浸在胜利的喜悦中固步自封,从Flash MX(Flash Player 6)开始,Macromedia 给Flash加入了支持播放视频的能力。当时可以在SWF格式的文件中嵌入视频数据,并依然支持流播放。然后Flash MX 2004(Flash Player 7)开始把视频单独作为一种文件格式提出来,这就是大名鼎鼎的FLV格式。Flash的FLV容器格式和VP6和VP7视频压缩算法的横空出世,引爆了视频流媒体整个行业。

07年左右,Flash 9 alpha阶段的时候,开始支持Action 3,运行效率大幅提升。随着Flash交互技术的进步,各种Flash的网页游戏兴起。07年上线的Flash9的游戏凤毛麟角,08年蓬勃发展,加之后来社交游戏的浪潮席卷全球,Flash再次成为网页游戏的标配,很多之前在客户端都做不到的绚丽效果都能展现在web中,大量公司依赖Flash开发的产品赚的盆满钵满。各种Flash的网页游戏兴起,很大程度替代了以前的安装版小游戏,打开网页就能玩游戏成为当时很多人的娱乐方式。

于是,在一段时间内,Flash达到巅峰,似乎整个互联网离不开Flash。

  • 黯淡,移动领域的危机

黯淡,移动领域的危机

如果PC时代一直这样发展下去,也许Flash也会继续兴盛,而不幸的是移动时代来了。

2007年,苹果发布了iPhone;

2008年3月针对iPhone的SDK提供免费下载;

2008年7月11日,APP Store正式上线;

2008年9月,谷歌正式发布了Android 1.0系统。

2010年6月,苹果正式发布iPhone4智能手机。

随着苹果安卓智能手机飞速发展,全世界进入智能移动时代,Flash的悲剧开始上演。2008年-2010年是Flash技术在PC页游领域快速崛起后如日中天的几年。而这个时间点恰恰是苹果 iOS生态体系要起飞的时代。作为一家只会赚企业钱的公司,卖拷贝,是这家公司骨子里的基因。当时移动端要支持Flash是不容易的,因为Flash 9的功能更强大,语法升级,类库升级,虚拟机升级,导致内存占用大很多。此外,Flash 9的AVM2虚拟机+Action3类Java语言,语言和性能都远远落后于Java和C#虚拟机,导致CPU功耗也比较高。因此移动端无论对浏览器还是对本地应用,Flash都显得力不从心。

2007年6月,iPhone发布后,大家发现iPhone与Adobe Flash播放器不兼容。当时Flash已经得到成功推广,几乎全球所有主要手机厂商都付费从Adobe获得授权,将其用于普通手机、智能手机和其他手持设备。Adobe很希望苹果的iPhone也能用上Flash播放器,可乔布斯迟迟不表态。虽然用户们强烈呼吁苹果支持当时还在互联网世界处于统治地位的Flash,但是准备自己管理内容向用户收费的乔布斯不为所动,之后乔布斯于苹果官网2010年4月发布了公开信。

由于苹果当时已经具有非常高的地位,乔布斯的公开信对Flash的打击几乎是致命性的。后来,Adobe另辟蹊径,2011年推出flash移动端原生应用的开发,受限于语言和虚拟机,无论CPU效率还是内存,都没法和原生相比,而移动端系统对内存管理及其严格,加之Flash程序员整体内存控制意识较弱,Flash始终没有成为主流。从此以后Flash开始不再将移动领域作为重点,而这几年的趋势是移动领域快速增长,PC萎缩,Flash也就逐渐边缘化了。

  • 没落,迟暮英雄的悲歌

没落,迟暮英雄的悲歌

Flash是曾经的辉煌,为不支持CSS,dhtml视频的浏览器带来了不可替代的体验。Flash在移动时代的失败,并不是Flash的技术没有HTML5先进。苹果不让Flash进入iOS平台,也是利益之争。苹果从一开始就建立了App Store的封闭分发生态策略,怎么可能允许一个第三方插件进入自己的生态领域?

而至于Flash的失误,很大一部分是其本身造成的。Flash在AIR支持GPU和Stage3D之前都是CPU渲染的,而没有在底层改成GPU架构,但作为普通用户的大多人不懂GPU。CPU渲染肯定比GPU慢且费电。这个体验相信每一个用过Macbook看优酷的用户都有,风扇响和耗电非常的明显,而大家都知道iPhone是不可以换电池的。理论上在底层把Flash架构改成GPU优先会比CPU优先迅速和省电很多,但adobe并没有做。当然这事也不能全怪adobe。据说Flash代码相当乱,导致积重难返。Stage3D虽然性能好,但是程序员/美术里面没有几个是人会用Stage3d,无非就是专业做3D游戏的人懂,其他人都不懂。所以才有了在移动端节节败退的情况。

3. 新王者HTML5的崛起与兴盛

2015年,微软宣布鼓励网站停止使用该公司的 Silverlight技术,转而使用更新的、基于HTML5 技术的媒体播放系统。

2015年1月,YouTube彻底抛弃了Flash,实现向HTML5的全面过渡。

2015年7月23日,Twitch宣布将逐渐放弃基于Flash的直播技术,全面转向HTML5。

2016年2月9日,Google宣布自7月后,将不再接受Flash展示广告,所有广告必须100%使用HTML 5格式。

虽然互联网巨头各家有各家的利益,但是大家还是希望有一个标准化的东西。自1999年12月发布的HTML4.01后,后继的HTML5和其它标准被束之高阁。HTML5一直没有出现,业界没有一个统一的标准,而互联网又一日千里的发展,这才造成了Flash的兴起。而从2004年开始,人们就在为HTML5而努力。在HTML5中,Flash几乎所有的功能都可以实现,而与Flash不同的是,HTML5是一个开放的标准,而Flash是Adobe公司的。无论是苹果,还是谷歌、微软都不希望被一家公司所左右,它们更喜欢一个开放的东西。当微软、苹果、谷歌三大巨头的浏览器都支持HTML5的时候,这个标准事实上就建立起来了。随之,各个网站都开始从Flash转向HTML5,Flash也不仅仅是在移动市场没落的问题,而是全面走向边缘化。取而代之的,则是HTML5,终于以挑战者的姿态,站在了舞台之上。

初次了解HTML5的人可能会非常惊讶,HTML5规范早在8年前就开始制定了,但是直到2014年10月才有了第一版标准语言规范。HTML 5 诞生多年以来,受到多数主流浏览器的支持。如今尽管HTML5规范草案已经非常好,但何时能真正成为标准却仍然不确定。接下来,这门互联网编程语言也将走上更加规范化的道路。关于如何改进浏览器和改进Web世界,不管是浏览器供应商还是其他人都有太多的想法,而这些都要汇聚到HTML5规范中并达成一致,这需要时间。

不过最近的消息是W3C组织最新宣布,正在编写 HTML 5.1 的语言标准规范,预计6月中旬完成初稿,9月份正式发布。据悉,相比于 HTML 5 ,即将到来的 HTML 5.1 不仅功能更强,而且更加友善,执行效率更高。HTML5,像任何已经发展了几十年的标准一样,隐含了各式各样的问题,而5.1旨在解决这些问题。

那么,即将成为新标准的HTML5将会把我们带向哪里?下面收集了互联网一些从业者的看法,从中可以了解到HTML5如何改变互联网。

· 降低插件的重要性

· 支持动态生成图像

· 允许Web程序利用本地存储

· 简化Web开发中的数据提取

· 支持位置服务

· 让Web视频播放更流畅

· Widget将更丰富

· 提高浏览器的安全性

· 简化Web开发

相比于Flash,HTML5不需要安装插件,目前注流的浏览器基本上都支持HTML5。(数据来自http://caniuse.com/#cats=HTML5)

身处今日的互联网,大部分普通用户都有一个基本的需求,那就是视频观看。各大视频网站花费巨资引入视频资源,证明网络视频市场是一块很大的蛋糕。再加上最近兴起的直播平台,让原本竞争激烈的视频网站战场更是风起云涌。

出于便携的考虑,现今的笔记本电脑越做越薄,与之损失的就是某些方面的性能,比如显示方面。很多拥有苹果笔记本的用户在基于Flash视频网站观看视频时,不得不忍受风扇狂转的痛苦折磨。而以YouTube为例,视频播放已全面转向HTML5,不论是点播还是直播。再加上最大的视频直播平台之一Twitch也宣布转向HTML5技术,终于让国内万年不变的视频网站稍微有了压力。经测试乐视目前已支持HTML5的视频播放。为什么国内各网站仍坚守Flash阵地而不去拥抱HTLM5,其中必然有商业利益上的考量,但或许也有技术上的困难。

6年前,YouTube开始尝试HTML5技术,当时HTML5缺乏对自适应码率技术的支持,无法更快地缓冲视频。如今,借助于ABR技术减少缓冲,VP9更高效的编解码技术,WebRTC的视频直播技术和全屏幕API支持,YouTube终于可以全面转向HTML5。

在技术层面上,视频无论是点播还是直播,大致有两种协议可选,一种是由Adobe公司开发的RTMP(Real Time Messaging Protocol)和由苹果公司开发HLS(HTTPLive Streaming)。RTMP的优点是全球大约90%以上的电脑都安装了Flash,Chrome浏览器更是内置Flash。可以不用下载,直接观看网站服务器上的视频。支持点播,也支持直播。HLS的优点是可变码率,通过HTTP Server分发节目,同时提供合适的缓存。

目前大多数国内视频网站在实现视频点播或直播时,PC端使用Flash+RTMP技术,移动端因为苹果设备的优势,一般使用HTML5+HLS技术。而HTML5的video标签只支持MP4、webM、ogg三种格式。H.264已经占领视频市场的80%。如果移动应用视频,建议编译成264格式,有好的高压缩比、高画质。webM作为Google力推的视频标准,虽然免费,但在硬件解码器上存在短板。HLS协议基于HTTP,一个提供HLS的服务器需要做两件事:

·编码:以 H.263 格式对图像进行编码,以 MP3 或者 HE-AAC 对声音进行编码,最终打包到 MPEG-2 TS(Transport Stream)容器之中

·分割:把编码好的 TS 文件等长切分成后缀为 ts 的小文件,并生成一个 .m3u8 的纯文本索引文件

浏览器使用的是 m3u8 文件。m3u8文件是指UTF-8编码格式的M3U文件。M3U文件是记录了一个索引纯文本文件,打开它时播放软件并不是播放它,而是根据它的索引找到对应的音视频文件的网络地址进行在线播放。播放器按顺序逐个播放,全部放完再请求一下 m3u8 文件,获得包含最新 ts 文件的播放列表继续播,周而复始。整个直播过程就是依靠一个不断更新的 m3u8 和一堆小的 ts 文件组成。一个典型的 m3u8 文件格式如下,其中,#EXTM3U是每个M3U文件第一行必须是这个tag,请标示作用,#EXT-X-ENDLIST为切片终止标记,如果没有该标记,浏览器会在文件读取完后再请求索引文件,如果有更新则继续下载新文件,以此达到直播效果。

#EXTM3U

#EXT-X-TARGETDURATION:11

#EXT-X_VERSION:3

#EXTINF:10.133333

fileSequence0.tx

#EXTINF:10.000666

fileSequence1.ts

#EXTINF:10.667334

fileSequence2.ts

#EXTINF:9.686001

fileSequence3.ts

#EXT-X-ENDLIST

而支持HTML5的浏览器,都支持HTML5的<video>标签。简单的调用代码如下:

<video poster=”movie.jpg” controls>

<source src=”movie.webm” type=’video/webm;codecs=”vp8.0, vorbis”’>

<source src=”movie.ogg” type=’video/ogg;codecs=”theora, vorbis”’>

<source src=”movie.mp4” type=’video/webm;codecs=”avc1.4D401E, mp4a.40.2”’>

<p> This is fallbackcontent</p>

</video>

以下代码借助Bing首页的MP4文件,实现了基于HTML5中<video>标签的调用。其中,<video>中的内容会在浏览器不支持HTML5的<video>标签时显示。

<!DOCTYPEHTML>

<html>

<title>HTML5视频播放演示</title>

<head>

<metacharset="UTF-8">

</head>

<body>

<videowidth="540" controls="controls">

<sourcesrc="http://az29176.vo.msecnd.net/videocontent/GareSaint-Lazare_TrainStationRM_GettyImages_492605867_768_ZH-CN.mp4">

yourbrowser does not support the video tag

</video>

</body>

</html>

效果如下图:

还可以调用<audio>标签实现音频的播放。

默认情况下,HTML5会调用浏览自定风格的播放器。当然,也可以调用第三的播放器。如:

<src="//api.html5media.info/1.1.8/html5media.min.js"></>

除了上述介绍的技术外,还可借助于HTML5+WebSocket实现。原理是利用HTML5的 WebSocket做传输基础,然后Canvas绘图,来实现视频实时传输。WebSocket是下一代客户端-服务器的异步通信方法。该通信取代了单个的TCP套接字,使用ws或wss协议,可用于任意的客户端和服务器程序。它提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法,从客户端使用简单的语法有效地推动消息到服务器。在支持WebSocket的浏览器中,可以直接在Java中通过WebSocket对象来实现通信。WebSocket对象主要通过onopen,onmessage,onclose即四个事件实现对socket消息的异步响应。WebSocket对于大多数客户机-服务器的异步通信是理想的,在浏览器内聊天是最突出的应用。WebSocket由于其高效率,被大多数公司所使用。

<!DOCTYPEhtml>

<htmlxmlns="http://www.w3.org/1999/xhtml">

<metahttp-equiv=Content-Type content="text/html;charset=utf-8">

<head>

<title></title>

<type="text/java">

var wsServer ='ws://localhost:9999/webSocket.ashx';

var websocket = newWebSocket(wsServer);

websocket.onopen = function (evt) {

alert("已经建立连接");

};

websocket.onclose = function (evt) {

alert("已经关闭连接");

};

websocket.onmessage = function (evt) {

evt.stopPropagation()

evt.preventDefault()

writeToScreen(evt.data);

};

websocket. = function (evt) {

writeToScreen(evt.message);

};

function sendMsg() {

if (websocket.readyState ==websocket.OPEN) {

msg =document.getElementById("msg").value;

websocket.send(msg);

writeToScreen("发送成功!");

} else {

writeToScreen("连接失败!");

}

}

function writeToScreen(message) {

var pre =document.("p");

pre.style.wordWrap ="break-word";

pre.innerHTML += message;

output.(pre);

}

</>

</head>

<body>

<div>

<input type="text"id="msg" value="beyond is number one!" />

<buttononclick="sendMsg()">send</button>

</div>

<divid="output"></div>

</body>

</html>

- END -

东航IT百分百”返回搜狐,查看更多

责任编辑:

声明:该文观点仅代表作者本人,搜狐号系信息发布平台,搜狐仅提供信息存储空间服务。
阅读 ()
免费获取
今日搜狐热点
今日推荐