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:///#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./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./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 -