海外高性能视频你得这么玩

2019-09-11 admin

作者:忘语 转载自:公众号 方凳雅集

一、流媒体与RangeRequest

1. 流媒体

对于一般的数据请求,我们要等整个请求数据完全返回才能做后续的处理,但是对于视频这种大文件,等整个响应结束再处理显然不合理。流媒体就是对文件按时间纬度进行切片并顺序存储,网络传输时,客户端可以接收一个切片展示一个切片。 image.png 视频的流媒体编码格式有很多,其中浏览器支持最好的是 mp4,它得到了 PC / 无线端所有主流浏览器的支持: image.png 一般的视频文件,为了画面连续,一秒会采集30帧的画面;在这么短的时间内,每帧的画面变化其实很少。mp4文件针对视频的这种特性,会将画面中连续差别不大的帧分为一组,分组开始的帧称为关键帧(I帧),对关键帧只做常规的图像压缩,保存完整的图像信息;然后在分组中的其它帧里取几个断点作为P帧,P帧不保存完整的图像信息,只保留当前帧跟关键帧(或者上一个P帧)之间的差异信息;分组内其它帧(B帧)在关键帧和P帧之间,保存当前帧跟前后两帧之间的差异信息;这样可以在不影响画面质量的情况下,得到非常高的压缩率,这也是 mp4 文件能够这么普及的主要原因。 image.png mp4很好,但是这个协议并不开源,商业使用需要专利授权;为此apple开发了mov格式,chrome则直接推出了开源的webm格式,两个格式都在mp4的压缩原理基础上做了进一步的优化,有更好的清晰度和压缩率。

2. RangeRequests

对于视频播放来说,还有一个很重要的就是要支持用户调整播放进度,支持让用户选择直接跳到中间部分开始播放。这就需要 HTTP Range Requests 协议了,这个协议很简单,支持客户端在 http 请求时通过 Range 请求头指定要请求文件的起始和结束位置。

curl http://test.video -H "Range: bytes=0-1023"

如果服务器支持 Range Requests 协议,会读取 test.video 文件,并将他的第 0~1023 字节提取出来,并以状态码 206 响应请求; 如果服务器不支持,直接忽略 Range 头,读取整个文件内容,以状态码 200 响应即可。 当我们在 html 中放一个 video 标签,浏览器会直接发起一个 Range: bytes=0- 的请求,向服务器请求从开始到结尾的完整文件,如果服务器不支持 Range Requests,响应码为 200,浏览器会正常按流式加载整个视频文件; 如果服务器支持 Range Requests,响应码为 206,则浏览器会在接收到足够字节(一般是比当前播放进度往后推20s)时结束掉请求,以节省网络流量;当播放进度继续往前,缓存不够时,浏览器会发起一个新的 Range Requests 请求,请求的 Range 直接从缓存结尾的字节开始,只加载剩余的部分文件; image.png 类似的,在我们调整播放进度,跳过一部分内容时,浏览器会把当前的 Range Requests 结束,从选择的播放进度开始重新发起新的 Range Requests,接收到分段内容后直接从新的进度开始播放。

二、视频按流量计费与防盗流

1. 视频按流量计费

我们前面提到,如果服务器支持 Range Requests,浏览器会在缓存足够时提前结束请求而不是加载整个视频文件。这主要是因为一般视频服务器都是按流量计费的,流量套餐跟我们手机的网络流量套餐类似,你可以选择一个保底的月流量总量,超过总量的,每G加多少钱,下面是我们 icbu 跟 akamai 签订的流量套餐,大家可以感受一下: image.png

2. 防盗链

既然视频流量这么金贵,我们必须限制视频只在我们自己的网站上播放。防盗链也比较简单,视频的 cdn 地址里会有一段定期失效的加密串,加密串校验失败时,cdn 不返回内容。我们在网站上不直接使用视频 cdn 地址,而是一个带视频 id 的鉴权链接,鉴权成功后 302 到实时生成的带加密串的 cdn 地址。 image.png

三、视频性能指标

1. 有效播放率

前面我们已经介绍了视频相关的一些基础知识,在开始进行视频性能优化之前,先要确定好能反应视频性能的几个关键指标。 首先,我们看的最根本的指标是视频的有效播放率,icbu 这边定义视频正常播放 3s 为一个有效播放(这个还有宽窄口径之分,窄口径下在可视区域的播放才算),同个视频 有效播放的 uv / 开始播放 uv 称为视频的有效播放率

2. 首帧播放时间

有效播放率是一个偏业务的指标,很大程度上受视频质量的影响,首帧播放时间则是实打实的纯性能指标了。这个计算比较简单,视频在播放中或者进度信息调整时会触发 timeupdate 事件,当视频在播放状态时,第一个 timeupdate 事件跟上一个播放事件的时间差就是首帧播放时间了。 对于自动播放的视频,可以将视频节点插入 dom 的时间作为起始时间,这样可以避免视频预加载的影响,也可以把鉴权,302跳转等时间计算在一起,衡量整个链路的加载时间。

3. 卡顿率

除了首帧的加载速度,还有一个非常影响体验的是视频的流畅度。卡顿率的计算稍微复杂一些,不能简单计算视频的卡顿次数,因为一个小时的视频卡顿 10 次跟 10s 的视频卡顿 10 次体验是完全不一样的。一般的计算方法是:

(总卡顿时长 / 总播放时长)* (卡顿次数 * 权重)

打点的时候注意要分段打点,每次卡顿都要记录卡顿前后的播放片段时长和卡顿时长。最终数据统计的时候再按视频 id 和 session 进行加合。

4. 错误率

这个不用多解释,我们要尽量将视频的加载错误率降到最低。视频出错一般有几种情况:客户网络问题、视频源问题和 cdn 回源超时。 视频源问题,一般是视频源被用户删除,导致视频不可用。这一类问题服务器一般会返回 404 等错误;注意我们在 html 中插入 video 时最好使用 <source> 标签指定视频地址并监听 <source> 元素本身的错误事件,直接通过 <video> 的 src 属性指定视频地址时,对于资源 404 的错误,<video> 元素无法捕获到。

四、视频性能优化

1. 流媒体 CDN 支持

经过以上的分析,我们可以开始进行视频的性能优化了。与其它前端资源一样,第一步要通过 cdn 提升资源的加载速度。不同于普通的静态资源 cdn,流媒体需要专门的 cdn 支持,他与普通的cdn主要有两方面的差别: 1)流媒体 cdn 回源超时时间更长

 由于流媒体文件普遍很大,回源时间会很长

2)流媒体 cdn 支持分段 cache 和回源

 比如客户端请求一个视频文件的 0~1024 字节,而 cdn 节点上已经有完整文件的时候,节点直接从缓存文件中取对应字节返回而不会回源到源站;另一方面,如果节点上只有 0~512 字节的缓存,节点会只向节点请求 512~1024 分段的内容,而不会整体回源;

2. 鉴权服务和源站本地化部署

为了防盗链,用户不能直接访问 cdn 链接,而是要经过一层鉴权服务;这层鉴权服务必须本地化部署,否则首帧播放时间会慢很多。另一方面,视频文件的缓存命中率很低(ICBU这边的视频缓存命中率只有65.5%),会有大量的客户请求回源,我们必须把视频源站也进行本地化部署。 image.png 19年初,ICBU这边在淘宝视频同学的大力支持下,将所有视频源文件进行了中美OSS同步,将鉴权服务部署到了美国机房,采购了海外的 akamai cdn,整个视频播放流程改造如下: image.png 美国部署改造后整个海外视频的首帧播放时间提升了1s+

image.png

3. 视频内容压缩

3.1 使用压缩率更高的文件格式

mov 和 webm 格式压缩率更好,而且 ios 和 android 端分别支持两种格式,对于移动端场景可以尝试使用。不过格式不统一会让 cdn 命中率进一步降低,具体效果我们也还在测试验证中。

3.2 视频分辨率

视频分辨率指视频的宽高尺寸,类似图片的尺寸,1920x1080 代表视频宽 1920 像素,高1080像素;常见的几种视频分辨率有:1280x720(别名720P)、1920x1080(别名1080P)、2048x1080(别名2K)、4096x2160(别名4K) 如果我们的视频播放窗口只有350像素,而卖家上传的视频是 1080P 的,这无疑会浪费大量的带宽,视频性能也会很差。目前淘宝视频会在视频上传完成后进行简单的处理,生成低清、标清和高清三种分辨率的视频,分别对应720、540 和 360 三个尺寸断点。例如一个 1920x1080 的视频,转出高清视频时会限制视频宽或者高为720像素,这样转换得到的高清视频分辨率为 1280x720;类似的转出标清视频为 960x540,低清视频为 640x360。这样我们根据不同的播放需要选择加载不同清晰度的视频即可。

3.3 视频帧率

我们知道视频是利用人眼的视觉暂留现象,通过一张张图片来实现动态效果的: image.png 每秒展示多少张图片(帧),叫做视频的帧率(FPS),fps越高,视频看起来就越顺畅: image.png 对于一般的视频,24~30 的帧率已经足够,人眼基本看不出卡顿,事实上 24FPS 已经是 80 多年的电影帧率标准。目前淘视频还没有专门处理视频帧率,线上也有一些卖家上传的高帧率视频文件。

3.4 音、视频内容分离

另一个能有效压缩视频体积的办法是将音、视频文件分离,因为我们有很多场景是把视频作为底图或者 gif 来用的,加载音频文件非常浪费

4. 分段请求优化

浏览器内置的视频播放器只能满足基本的视频播放需求,我们无法通过 js 来控制分段请求的大小或者操作视频缓存。比如我们拖放视频进度到第 3s 开始播放,浏览器加载到第 5s 时,我们又将进度跳回第 1s 开始播放,这时第 3~5s 的内容已经缓存完毕,但是浏览器内置播放器发起的分段请求是请求从第 1s 直到文件结束的所有数据信息。 通过 H5 的 MediaSource API,可以很方便地通过 js 来控制视频的加载与播放:

// 1\. video 的 src 不是某个特定的 url,而是 mediaSource 对象的内存地址
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

// 2\. 通过 mediaSource 创建一个 mp4 编码的视频缓存区
const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

// 3\. 请求所需的视频分段,将数据放入缓存中
fetch('/video', {
    headers: {
        'Range': 'bytes=1024-2048',
    }
})
.then(response => response.blob())
.then(buffer => sourceBuffer.appendBuffer(buffer));

// 视频有足够的缓冲后即可以开始播放视频了
video.play();

[转载]原文链接:https://segmentfault.com/a/1190000020358501

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74867.html

文章标题:海外高性能视频你得这么玩

相关文章
移动端网页设计经验与心得
智能手机发展确实很迅速,像今年,我的大部分工作就都在移动端网页上。 再往前些年,看到的手机版/移动版网页,限制于浏览器与手机性能,2g网络速度等 网页设计无非是蓝、黑、白,界面单调,并且要尽可能的设计简单。 现在情况就大不相同了,软件上we...
2015-12-23
2014年,你是不是被这5个HTML5技术刷屏了?
如今,几乎每天都有HTML5页面的推广以及小游戏、小测试在微信上传播,用户也逐渐习惯被各种HTML5轰炸。那么在刚刚过去的一年究竟有哪些HTML5技术堪称火爆,让人们的微信频频被刷屏呢? 1、2048 2048 在4x4的棋盘上,用方向键选...
2015-11-12
7个你可能不认识的CSS单位
浼楁墍鍛ㄧ煡CSS鎶€鏈�鎴戜滑铏界劧寰堢啛鎮夛紝鍦ㄤ娇鐢ㄧ殑杩囩▼鍗村緢瀹规槗琚�鍥颁綇锛岃繖璁╂垜浠�鍦ㄦ柊闂�棰樺嚭鐜扮殑鏃跺€欏彉寰楀緢涓嶅埄銆� 闅忕潃web缁х画涓嶆柇鍦板彂灞曪紝瀵逛簬鏂版妧鏈�鏂拌В鍐虫柟妗堢殑瑕佹眰涔熶細涓...
2015-11-11
为你的 VS Code 搭建远程开发环境
开篇先说一下自己遇到的烦恼,介绍下写这篇文章的背景。我有一台低配的 MacBook 和 一台性能强悍的台式机。之前自己都是在 Mac 上跑前端项目的,那台台式机基本上处于闲置状态,偶尔用来看看文档。后来随着自己需要做服务端开发,有时候需要同...
2018-02-26
vue-video-player 更改视频源
背景:根据用户的信息来显示不同的视频源 &lt;template&gt; &lt;div class=&quot;video-box-wrap&quot; v-show=&quot;video.show&quot;&gt; ...
2018-05-05
YouTube抛弃Flash,将HTML5视频设为默认
YouTube在今天宣布,它终于停止继续使用Adobe Flash作为默认设置了。YouTube网站现在将在Google Chrome、微软的IE 11、苹果的Safari 8浏览器,以及Mozilla的Firefox浏览器的测试版中使用H...
2015-11-12
性能与生态双突破 HTML5重现爆发曙光
走过早熟的WebAPP,也经历过概念性的“轻应用”,HTML5这个被视作移动互联网未来的技术标准,终于在2015年看到了爆发的曙光。1月 15日,搜狐发布基于HTML5的“手机搜狐网3.0,加上微信几天前开放HTML5接口,HTML5很可能...
2015-11-12
4种方法帮你的网站创建更丰富的Web体验
现在的网站已经从一个简单的文本页面开始进化了很多,我们可以制作出丰富的视觉效果来增加用户在桌面浏览器和移动浏览器的体验。 今天这篇文字就给大家分享4个实用的方法,来帮助你创建更好的Web体验。 对于那些还在用IE6的朋友,我只想说一句:go...
2016-01-13
15个提高编程技巧的JavaScript工具
JavaScript鑴氭湰搴撴槸涓€涓�棰勫厛鐢↗avaScript璇�瑷€鍐欏ソ鐨勫簱锛屽畠鏂逛究浜嗘垜浠�寮€鍙戝熀浜嶫avaScript鐨勫簲鐢ㄧ▼搴忥紝鐗瑰埆閫傚悎AJAX鍜屽叾浠栦竴浜涗互Web涓轰腑蹇冪殑鎶€鏈�銆侸avaScr...
2015-11-12
回到顶部