用技术提升美好事物发生的概率。Technologically, for greater probability to be happy
只要在 HTML5 中使用过视频播放的同学对 video 标签一定不会陌生，不过很多同学只使用了 video 的基础功能，实际上 video 拥有强大潜能的，只要姿势正确就能让其拥有超能力。不妨从下面几个场景来逐渐了解下video 未曾被发掘的神秘空间：
清晰度无缝切换节省视频流量点播领域里 mp4 是最普遍、兼容性最好的视频容器，不过 mp4 也有它的局限性，比如常见的清晰度切换，我们是无法像youtube那样做到无缝切换的。我们可以看下普通的mp4播放的网络请求和youtube视频播放的网络请求的区别。
图1.1 普通mp4的下载请求过程
图1.2 Youtube视频下载请求过程
这两张图不难看出，在默认情况下 mp4 使用一次 http 请求所有的视频数据，Youtube 则分次请求。当然这个描述很不专业，但确实形象。造成这种差异的是 video 不支持流式的视频数据，Youtube 采用的是流式的视频容器 webm，而 mp4 是非流式的。那如何解释清楚流式的视频数据呢，从专业的角度三言两语很难说清楚，但用大白话翻译过来就是流式的视频数据支持分段独立播放，非流式的不可以。换句话说一个10M的视频文件，流式的视频可以把0~1M的数据请求回来单独播放，但是非流式的不可以。
上面我们描述了视频格式的不同，接下来我们要说的是第一张图中的视频加载是浏览器来控制的，通过给 video 的 src 属性配置视频地址，触发播放之后浏览器就会开始下载了，JS干涉不了。而 Youtube 的视频加载是通过JS来控制的，各位可以再次看下第二张图的网络请求类型：xhr，足以证明这一点。
上面两点搞清楚之后我们就该说下清晰度切换的事情了。这个需求大家都不陌生，但是直接使用 mp4 格式做无缝清晰度切换，难度还挺大的。先解释下“无缝清晰度切换”的概念：从播放一个分辨率的视频到另一个分辨率且保证画面、声音不停顿的平滑切换过程。了解了这个概念，大家应该知道了用 video 无缝切换 mp4 有多难。一方面，video 是不支持流式的视频格式的，一方面，video 的加载是不受JS控制的。通过切换 video 的 src 属性，必然会导致画面中断、重新请求视频数据等。有的同学想到说利用两个 video 再结合 z-index 来搞，但是当你生成另一个video去加载视频的时候，无法保证两个画面是严格一致的，即使将原来的画面暂停到一个时刻，用另一个视频通过 currentTime 属性与之同步，切换仍然看到画面闪烁，基本无法和 Youtube 无缝切换的体验匹敌。而且还会造成更多流量的浪费，背后的原因大家可以研究下 mp4 容器和 webm 容器的异同，也可以看下视频解码相关的文章。
还有一种方法就是将 mp4 格式统统转码到流式的视频格式比如 hls、webm 等。不过这种看上去可行的方式实际上会带来很大的成本开销，如将大量视频做转码会消耗高昂的机器资源、双倍存储的费用、CDN的双倍费用等等。其实我们也是在这种背景下研究出来新的技术问题解决清晰度无缝切换的。
首先，我们改变对 mp4 视频的播放流程，不再直接使用 video 的 src 来播放，因为我们没有任何可以操作的空间。video不仅支持 src 属性还支持 Blob 对象，我们就是利用后者。播放的流程如下：
图1.3 mp4 视频新播放流程
来请求 mp4 视频数据，这样可以结合视频 Range 服务，做到精确加载。编写解析器将加载回来的部分 mp4 视频数据进行解复用将解复用的视频数据转成 fmp4 格式并传递给 MediaSource使用 video 进行解码完成播放然后在做清晰度切换的时候流程如下：
图1.4 mp4视频清晰度切换原理示意图
播放视频A，过程同上在某个时刻，用户切换到播放视频B，首先解析B的索引文件（moov），反向计算mp4的range区间加载B的视频区间数据解复用把数据转换成fmp4格式并传递给MediaSource删除A的部分Buffer在下一个关键帧自动完成画质的切换图1.5 mp4视频清晰度切换流程示意图
这个过程看上去比较繁琐，但是所有的操作都是在浏览器端完成，也就是说都是JS来实现的。这样之前说的所有成本问题都不存在，还能做到youtube相同体验的无缝切换。如果大家也想使用这个功能不需要自己再去实现一遍上述流程，可以使用如下代码：
如果对这段代码有什么疑惑，或者想深入了解下它背后是如何实现的，可以参考 Github：https://github.com/bytedance/xgplayer 或 阅读原文：https://techblog.toutiao.com/
使用 video 的同学基本上都是这样用的，如下：
利用src属性2.利用source标签
这样就可以播放视频了，不过前面我们讲过这样使用 video ，视频的加载是受浏览器控制的，可以看下浏览器在视频刚开始播放的时候下载了多少数据：
图2.1 video默认下载截图
我随便找了个视频，大家看下视频总长度是 02:08,在播放到 00:05 的时候，浏览器已经下载到 01:30 了，如果用户终止观看，下载的视频就这样被浪费掉了。当然，如果不断的 seek 也会造成较多的流量浪费。按照我们之前的统计在短视频领域，用户 seek 的频率在 80%，所以这部分流量是可以节省掉的。具体原理如下:
图2.2 播放器加载视频原理
设置每次加载的数据包大小设置预加载时长开启加载队列，完成第一次数据包下载，判断缓冲时间和预加载时长是否满足，不满足请求下一个数据包具体实现代码如下：
这样就实现了视频在播放过程中永远只预加载10秒的数据，进而保证节省流量。
扩展链接，了解超能力西瓜视频是怎样炼成的。
概念车，属于汽车开发领域中的引导者，读者朋友们也可以将其理解成“未来车辆”。因为一般的概念车在设计上都极富未来感(说白了就是外形怪异)，并且未来某款车型就可能借鉴概念车的某方面设计。
而赛车，不具备什么未来感，它所追求的一向都是制造业的顶尖科技。在汽车领域拥有地球最强科技结晶的莫过于F1赛车。它身上搭载的某些配置由于目前成本过于高昂所以无法适应于民用车，但一般10-20年后，民用车就有机会用上某项顶级技术。
可以说，概念车和F1赛车就是汽车界的两位领航员。但今日，超跑制造商迈凯伦公司将这两位领航员融为一体。他们设计出了一部“概念F1赛车”。也就是说，既充满未来的设计幻想，又在理论上可以成为现实。它的名字是迈凯伦MP4-X。
看过车辆的图片后，我想很多玩过“GT”系列游戏的朋友们应该感到眼熟，游戏中有一辆红牛F1赛车，百公里加速一秒多，极速接近500km/h的时速。这辆MP4-X外观与其非常相似。都采用了与目前F1赛车不同的全包覆式车身。这辆概念F1被设计出来的目的就是为了展示未来科技在赛车领域中的作用。
细心的朋友们也许早已发现，这辆概念F1赛车上印有“HONDA”(本田)字样。不必抱有疑问，虽然迈凯伦公司并未多说，不过本田和迈凯伦合作已长达数十年。本田也是赛车黑科技界的老大，技术实力不容小觑。因此小编分析，很有可能这款车是由本田与迈凯伦合作设计的。
迈凯伦公司表示，他们设计出的这款概念车被“赋予”了诸多高科技设备，包括电脑控制的空气动力学套件，太阳能电池，动能回收系统，甚至在地面上铺设电网，以便它可以边行驶边补充能源。
编辑点评：虽然目前只是概念阶段，迈凯伦公司也并未制造出该车，但一切想象都是有机会变为现实的，尤其是迈凯伦这样专注于极致的赛车领域好手，相信未来的他们有能力达成愿望。
买车上团车 不做冤大头，4S店全国联保，买贵就赔三倍差价,点击下方图片了解更多信息，也可关注团车微信公众号：qichetuangou
相关问答
EdiusX是一款非线性视频编辑软件,用于编辑和处理视频素材。要输出MP4格式的视频,您可以按照以下步骤操作:1.在EdiusX中完成您的视频编辑和处理,确保您的...
明基这款性价比非常的好,显示效果一流,老牌投影厂商的产品稳定性,合理性是经得住市场考验的,对于颜色的调校,有积淀,稳。新技术为什么不用,是一个厂家的良...
xmp4是电脑在下载安装“迅雷”时产生的文件夹。xmp4文件夹中含有xmp4文件,xmp4文件是“迅雷看看”的精简版。在用迅雷下载视频文件时,使用边下边播功能会用到...
支持AVI格式的,如果下载了其他格式的视屏,可以用自带的视屏转换器转换后播放支持AVI格式的,如果下载了其他格式的视屏,可以用自带的视屏转换器转换后播放
AMV格式看起来相同实际上码元不一定是相同的~~原因是这样的以mp4为例他们的音频编码格式可能都是MP4的码型当时排列方式可能有所区别比如断行排列紧凑排列这两...
[最佳回答]国内比较有名的就这几个,如果你都觉得不好的话,可以用格式转换器转格式
就是说支持1920*1080分辨率以下的RM,RMVB格式,以及分辨率在1920*1080分辨率以下的,由H.264编码,MKV,AVI格式封装的视频,Highprofile是指高码率,一般码率越....
X90Pro+举报MP4清晰3人讨论4609次围观关注问题写回答讨论回答(3)642735497avi占的容量大,MP4的质量较好有用(0)回复a0000013AVI的会好...
cpu是cortexa9架构,双核,三星exynos4212改,制程32nm,锁频950mhz。gpu是4xsgx543mp2,4颗sgx543mp2。4颗sgx543mp2拼连,不是sgx54...
两个思路。1,用dos命令将文件夹的属性修改为正常。2,修改文件夹全局选项,改为显示隐藏文件。1:开始-运行-cmd回车,输attribx:/*.*-h-s/s/d回车。注意...
