洞察 video 超能力系列——玩转 mp4

简介: 只要在 HTML5 中使用过视频播放的同学对 video 标签一定不会陌生,不过很多同学只使用了 video 的基础功能,实际上 video 拥有强大潜能的,只要姿势正确就能让其拥有超能力。不妨从下面几个场景来逐渐了解下video 未曾被发掘的神秘空间。

只要在 HTML5 中使用过视频播放的同学对 video 标签一定不会陌生,不过很多同学只使用了 video 的基础功能,实际上 video 拥有强大潜能的,只要姿势正确就能让其拥有超能力。不妨从下面几个场景来逐渐了解下video 未曾被发掘的神秘空间:

  • 清晰度无缝切换
  • 节省视频流量

清晰度无缝切换

点播领域里 mp4 是最普遍、兼容性最好的视频容器,不过 mp4 也有它的局限性,比如常见的清晰度切换,我们是无法像youtube那样做到无缝切换的。我们可以看下普通的mp4播放的网络请求和youtube视频播放的网络请求的区别。

__20180727095213

图1.1 普通mp4的下载请求过程

__20180727095225


图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 对象,我们就是利用后者。播放的流程如下:

__20180727095229

图1.3 mp4 视频新播放流程

1.来请求 mp4 视频数据,这样可以结合视频 Range 服务,做到精确加载。

2.编写解析器将加载回来的部分 mp4 视频数据进行解复用

3.将解复用的视频数据转成 fmp4 格式并传递给 MediaSource

4.使用 video 进行解码完成播放

然后在做清晰度切换的时候流程如下:

__20180727095233

图1.4 mp4视频清晰度切换原理示意图

1.播放视频A,过程同上

2.在某个时刻,用户切换到播放视频B,首先解析B的索引文件(moov),反向计算mp4的range区间

3.加载B的视频区间数据

4.解复用

5.把数据转换成fmp4格式并传递给MediaSource

6.删除A的部分Buffer

7.在下一个关键帧自动完成画质的切换

__20180727095237


图1.5 mp4视频清晰度切换流程示意图

这个过程看上去比较繁琐,但是所有的操作都是在浏览器端完成,也就是说都是JS来实现的。这样之前说的所有成本问题都不存在,还能做到youtube相同体验的无缝切换。如果大家也想使用这个功能不需要自己再去实现一遍上述流程,可以使用如下代码:

1

节省视频流量

使用 video 的同学基本上都是这样用的,如下:

利用src属性

2

利用source标签

3

这样就可以播放视频了,不过前面我们讲过这样使用 video ,视频的加载是受浏览器控制的,可以看下浏览器在视频刚开始播放的时候下载了多少数据:

__20180727095331

图2.1 video默认下载截图

我随便找了个视频,大家看下视频总长度是 02:08,在播放到 00:05 的时候,浏览器已经下载到 01:30 了,如果用户终止观看,下载的视频就这样被浪费掉了。当然,如果不断的 seek 也会造成较多的流量浪费。按照我们之前的统计在短视频领域,用户 seek 的频率在 80%,所以这部分流量是可以节省掉的。具体原理如下:

__20180727095335


图2.2 播放器加载视频原理

1.设置每次加载的数据包大小

2.设置预加载时长

3.开启加载队列,完成第一次数据包下载,判断缓冲时间和预加载时长是否满足,不满足请求下一个数据包

具体实现代码如下:

__20180727095338

这样就实现了视频在播放过程中永远只预加载10秒的数据,进而保证节省流量。

原文发布时间为:2018-07-27
本文作者:银国徽
本文来自云栖社区合作伙伴“前端大学”,了解相关信息可以关注“前端大学”。

相关文章
|
前端开发
react-router中的render、children、component
react-router中的render、children、component
445 1
|
对象存储
阿里云OSS 服务端签名后直传之分片上传(结合element-ui的upload组件)
阿里云OSS 服务端签名后直传之分片上传(结合element-ui的upload组件)
841 0
|
12月前
|
资源调度 运维 JavaScript
使用electron创建桌面应用及常见打包错误解决
使用electron创建桌面应用及常见打包错误解决
1277 3
|
12月前
|
Android开发 开发者
FFmpeg开发笔记(五十七)使用Media3的Transformer加工视频文件
谷歌推出的Transformer,作为Jetpack Media3架构的一部分,助力开发者实现音视频格式转换与编辑。Media3简化了媒体处理流程,提升了定制性和可靠性。Transformer可用于剪辑、添加滤镜等操作,其示例代码可在指定GitHub仓库中找到。要使用Transformer,需在`build.gradle`中添加相关依赖,并按文档编写处理逻辑,最终完成音视频转换任务。具体步骤包括配置剪辑参数、设置空间效果以及监听转换事件等。
190 0
FFmpeg开发笔记(五十七)使用Media3的Transformer加工视频文件
|
JSON Go API
使用Go语言和Gin框架构建RESTful API:GET与POST请求示例
使用Go语言和Gin框架构建RESTful API:GET与POST请求示例
|
网络协议
tcp套接字和udp套接字可以共用一个端口吗?
tcp套接字和udp套接字可以共用一个端口吗?
242 1
|
12月前
|
Web App开发 前端开发 安全
前端研发链路之测试
本文由前端徐徐撰写,介绍了前端测试的重要性及其主要类型,包括单元测试、E2E测试、覆盖率测试、安全扫描和自动化测试。文章详细讲解了每种测试的工具和应用场景,并提供了选择合适测试策略的建议,帮助开发者提高代码质量和用户体验。
266 3
前端研发链路之测试
|
Kubernetes Docker 微服务
构建高效的微服务架构:基于Docker和Kubernetes的最佳实践
在现代软件开发中,微服务架构因其灵活性和可扩展性而受到广泛青睐。本文探讨了如何利用Docker和Kubernetes来构建高效的微服务架构。我们将深入分析Docker容器的优势、Kubernetes的编排能力,以及它们如何结合实现高可用性、自动扩展和持续部署。通过具体的最佳实践和实际案例,读者将能够理解如何优化微服务的管理和部署过程,从而提高开发效率和系统稳定性。
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(21)--- 省市区县联动处理的组件使用
循序渐进VUE+Element 前端应用开发(21)--- 省市区县联动处理的组件使用
|
存储 缓存 Unix
xdg - 获取 XDG 标准目录路径
xdg - 获取 XDG 标准目录路径
444 0