整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
中关村在线软件资讯】12月21日消息：Adobe Flash正在被逐渐被抛弃，现在Facebook也实现了将全站视频默认从Adobe Flash切换到了HTML5。
Facebook前端工程师Daniel Baulig在一篇博客中表示：“我们仍将继续与Adobe合作带来更加安全可靠的Flash平台游戏体验，但会在所有浏览器上默认改变视频内容”。
HTML5
Bauig表示：“我们决定一开始只向小部分浏览器用户推出HTML5版本，不过随着改进和修复，今后还会不断向更多版本的浏览器和操作系统进行推送。”
这也可以说明HTML5才是未来的归宿，Adobe Flash注定要被淘汰，在有条件的情况下网站们还是尽早部署吧。
2016年10月(Chrome 54)开始，Chrome不再内置flash，而是改为用户第一次访问flash资源时提示安装。从Chrome62开始，不再提供“click to play的选项”，改为点击视频box后，左上方弹出
这意味着，flash作为过时的标准将被新技术所取代。
前言
从我们可以在网站上播放视频开始，到h5播放器们如火如荼地发展之前，使用flash一直都是web播放视频的不二之选。甚至于说得更加广泛一些，在html5成为主流之前，网站的多媒体能力，包括动画、游戏和视频一直都是adobe生态在掌控。那么随着html5标准的推出，这一切都成为了过去式。
flv的全程是 Flash Video，顾名思义，就是专门给flash播放器提供的播放格式，这种格式具有结构简单、清晰的优点，最早出现是为了解决flash导出的swf文件体积过大，不适合在web中播放的问题。随着flash的逐渐淘汰，新的video标签自然是不支持flv格式的，人们开始把web视频的重点放在mp4或者hls上，但是随着直播这种视频形式的火热兴起，flv迎来了新一轮的生机。
我们来横向对比一下可用的直播方案：
flv播放实现·跳转·清晰度切换
可以看到，flv由于其编码格式的特点，只需要一个MetaData 以及音视频Track各自的Header就可以在任意的时间点播放，极大地符合实时直播的需求，在GOP足够小的情况下甚至可以达到0延迟，可以说在现有的技术方案里，http-flv是最理想的一个，正是因此，flv依然是web播放器不可或缺的一个格式支持。
首先我们通过一张图了解一下前端播放flv的过程
从上图可以看到，flv播放的过程其实是从flvt中提取元信息、音视频header以及数据，然后转码成fmp4盒子结构的过程，再通过MSE交给video的过程。因为flv的结构本身就是流式的，也就是说，它的数据被拆分到了很多个小的tag中，所以我们可以很方便地做数据的封装，也就是说将一段flv tag数据封装成一个独立的moof_mdat盒子对，然后就可以直接交给MSE处理，非常的方便。这里我们讨论flv是如何处理加载、跳转播放、重放及清晰度切换问题的
数据加载 数据加载直播和点播两种模式，首先来聊一下点播：针对点播的数据获取，我们采用Range这个参数作为分段加载的控制参数
如上图，Range这个参数向服务器描述了希望加载一个flv文件的 100000 到 3987705 个字节 这段数据，相应的，服务器也需要能够根据Range参数正确返回这段数据。这里展示一个极简的服务端代码：
从上述代码可以看到，服务端是先是解析range，根据range切出文件分段，然后返回一个readableStream交给前端。
再看一下直播：直播跟点播是非常不一样的数据流动结构，我们看一下简单的直播流程
可以看到，直播的流程是一个 推流->服务端格式编码-> 终端播放 的一个流程。那么这里就带来了一个问题，我们不可以像点播时那样去加载数据了。因为服务端实际上保存的是一个文件流，不断有数据推到服务端，播放器也不存在缓存一段数据这样的情况，而是不断向服务器请求，只要有新的流到达服务端，播放器就要拿到这一段进行解码播放，达到推流和拉流同步进行的一个直播效果。为了实现这种效果，在播放器内，我们使用 fetch+ streamReader，简单的实现如下：
从上述代码我们可以看到，我们通过一个reader递归地从流里面读取数据，再将数据交给解码器进行处理。关于直播的数据加载还有更加先进的websocket方式，这里不再深入探讨，有兴趣的同学可以自行查阅相关资料。
播放时跳转 播放时点击进度条跳转（下称seek）是一个非常高频的操作，尤其是在长视频中。用户遇到不想看的部分，或者想重看的片段，都会点击进度条触发seek。举个例子，一段视频，可能用户实际观看的部分只占不到50%， 如果我们将整段视频加载，那剩下加载的50%就浪费掉了。所以我们要做的事情就是精确地加载用户希望播放的部分，节约流量。解决方法如下：
这里说起来简单，但是涉及到了一个跟flv格式紧密相关的问题，那就是flv的onMetaData信息里是否具有keyframes这个属性。我们上述所提到的，基于时间点计算某一帧位置的算法，是完全依赖keyframes这个属性的，它记录了flv中所有关键帧的时间点和文件偏移量，keyframes大概长这个样子：
times中每一个时间点都对应着同位置的fileposition的偏移量，正是基于这一点，我们可以计算需要加载的数据Range。值得注意的一点是，并不是所有flv文件都携带了keyframes头，flv文件缺失部分onMetaData属性是很常见的事情。缺失了keyframes信息，我们就没办法做跳转了，因此我们需要借助额外的工具帮我们补全flv的onMetaData。这里推荐使用yamdi，一个轻量级的工具，有兴趣的同学可以看一下它的使用。
清晰度切换 清晰度切换是一个非常重要的功能，为什么重要呢，因为用户会根据网速的快慢，去选择更清晰或者更流畅的视频。假设没有这个选项，用户看视频卡顿了没法切换清晰度，就只能愤愤地关掉窗口了。那么多个清晰度的视频源我们如何做到无缝的切换呢？我们分情况来讨论一下：
点播中的清晰度切换方案 点播的切换清晰度是比较容易实现的，流程如下
如图，简而言之，就是尝试加载视频B，通过从视频B的onMetaData中提取关键帧信息，推算出当前应该加载哪一个关键帧，然后加载这个位置之后的数据，直到数据加载到之后，将视频B的数据交给MSE，同时，清除掉之前视频A在buffer中的缓存。
直播中的清晰度切换方案 直播清晰度切换目前还没有发现无缝的方案，因此建议在切换时，直接重建解码器以及MSE，关于这方面的问题我们还在探究。更多内容请关注我们的开源播放器
http://h5player.bytedance.com/
欢迎来我们github提issue （下方扩展链接）
取前端学习资料及视频进群：532018971
HTML 很容易写，但创建网页时，您经常需要重复做同样的任务，如创建表单。在这篇文章中，我收集了10个超有用的HTML 代码片段，有 HTML5 启动模板、空白图片、打电话和发短信、自动完成等等，帮助你提高开发速度。
一、HTML5 启动模板
当启动一个新的项目的时候，你需要一个启动模板。这里是一个简洁干净的模板，可以作为 HTML5 项目的基础。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
</head>
<body></body>
</html>
二、Base64 编码的空白 GIF 图片
我不推荐使用透明的 GIF，但我知道，即使在2013年，很多人都还在使用他们。如果你是其中之一，你可能会享受这个 Base64 编码的 1 * 1px的空白 GIF。这种方式比使用的图像更好。
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">三、获取方位的表单 (Google Maps)
这里是一个简单但功能强大的表单代码，用户可以输入他的位置指示到特定的地方。对于联系页面非常有用。<form action="http://maps.google.com/maps"method="get"target="_blank"><label for="saddr">Enter your location</label>
<input type="text" name="saddr" />
<input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" />
<input type="submit" value="Get directions" />
</form>
四、嵌入 Flash
获取前端学习资料及视频进群：532018971
*请认真填写需求信息，我们会在24小时内与您取得联系。
