首度揭秘：这款GitHub 3400星的播放器是如何开发出来的

在字节跳动，有这样一支技术团队：

他们开源的项目在GitHub摘得3400多颗星，除了字节跳动，不少其他互联网公司也在用他们的产品；

他们经历过不少极限操作，《囧妈》2020年春节期间网络首播的一套技术解决方案，他们在36小时内就完成了；

他们拥有交叉领域稀有技能，据说是「前端里最懂多媒体的，多媒体里最懂前端的」。

他们，就是字节跳动的web多媒体团队。

GitHub 3400星的前端开源播放器

Web多媒体团队的组建者郭辉2016年加入字节跳动，当时他负责的是今日头条网页版前端。

有一天，郭辉的leader给他提了一个问题：

为什么有些网站的播放器里，从720p切换到高清是连续播放的；而在今日头条的网站里切换清晰度，就会黑屏一会儿才能切换成功呢？

整个视频行业不少产品也面临着类似的问题。

郭辉研究之后发现，今日头条的视频是mp4格式，而那些流畅切换的网站则是用的流式传输的webm格式：

“用大白话说，就是人家1分钟的视频可以切成6个10秒钟，用户从720p切换高清的时候，当前720p的10秒钟片段继续播，等到下一个10秒钟的时候就无缝切换成1080p；而mp4是一个完整文件，从720p的视频切换到高清，需要重新打开另一个文件，中间肯定会黑屏。”郭辉说。

想要流畅切换清晰度，当然也可以把视频都转换一次格式。

但请教了相关同事之后，郭辉意识到这件事情根本划不来：

当时的今日头条有上亿个视频，每个都转变一次格式，虽然用户体验可以有微小的提升，但付出的存储、带宽成本实在过高。

一边是高额的投入，一边是用户体验，两难之间，郭辉决定做一个开创性的尝试：

把修改视频格式这件事儿，从存储视频的服务端，挪到浏览器前端，从底层开始，自研一套新的播放器。

要知道，从底层开始开发一个网页上的播放器，并不是传统前端的工作范围，这意味着郭辉要从一个单纯的前端跨行到多媒体领域。

郭辉要吃的“苦头”，也就从这时开始了。

底层的研发，往往要从最底层的原理开始，郭辉首先要搞懂的是视频容器的底层协议。由于缺少这方面的中文资料，需要研究长达数百页的英文协议原文，郭辉一边用翻译器查询协议中专业术语的意思，一边自己试验并理解，一条一条搞懂其中的原理。

当他终于啃完了厚厚的协议，按照协议的内容开始开发浏览器之后，却发现问题一个接一个地出现：

一开始，画面不完整，屏幕上一片黑一片白；

调试好了之后，画面有了，音频却消失了；

再度修改，音频终于有了，但音画并不同步……

最艰难的时候，他需要在20MB的数据里找二进制级别的bug，来让播放器能够正常播放。

把20MB换算成二进制，就是超过1.6亿个1或者0。1.6亿分之一的概率，这无异于海底捞针，很长一段时间里，郭辉对这个bug束手无措，他每天早上一睁眼，就很绝望：

Bug怎么解？

问题到底出在哪儿？

今天会不会又是毫无进展的一天？

他每天看着堆积如山的资料，脑袋嗡嗡作响毫无头绪，代码、文字、视频，在他的脑袋里煮成了一锅粥。

两周后，他终于借助第三方工具，从二进制的层面上寻找差异，推测出了问题可能出在哪儿，用逆向推理解决了它。

一个bug解决了，但播放器还没那么容易做好。郭辉觉得不能再单打独斗了，他需要队友。

奈何，懂前端也懂多媒体的人实在太少，郭辉找了很久，也没有找到合适的人。

这时，前端同学于浩出现了。

于浩当时刚刚加入字节跳动不久。从山东大学毕业一年半后，因为想做一个“真正的前端工程师”，他从一家老牌软件公司跳槽到了字节跳动。

认识他的字节跳动同学可能不在少数，毕竟他也是字节跳动黑轴乐队的主唱+脱口秀演员，如果你看过前不久的字节跳动吐槽会，可能会记得于浩回应别人调侃他“程序员发际线”的段子：

因为渴望从技术的底层原理上获得更多的知识和成长，他找到郭辉，表示希望一起研发播放器。于是，一个秘密计划开始了：

在中航广场矮楼，白天的上班时间里，郭辉自己研究学习做播放器的知识，于浩完成自己的日常工作；然而一下班，两人就离开各自的办公区，悄悄聚到一间会议室里，郭辉把自己研究明白的东西告诉于浩，然后两人分工做不同视频格式的播放器。

这个过程持续了半年，二人周末也不曾停歇，终于完成了各自方向的自研任务。随着更多同学的加入，web多媒体团队正式成立，补充了字节跳动技术团队内视频架构Web多媒体的能力。

由于他们研发的这款播放器刚好被西瓜视频所用，也就被命名为了「西瓜播放器」，并在GitHub开源，目前已经获得了超过3400颗星，是国内唯一一个从底层开始做的开源前端播放器。

现在，西瓜播放器已经支撑了字节跳动体系内抖音、今日头条、技术学院、图虫、字节圈、CEO面对面、瓜瓜龙、GoGoKid、住小帮等数百个业务和场景。

而在字节跳动公司之外，有道云协作、爱学习、网易云音乐、淘车网等其他公司的业务也都选用了西瓜播放器的开源版本。

《囧妈》网络首播背后的开发者

西瓜播放器的开源，意味着web多媒体团队终于有了一个广受认可的产品。他们并没有停下脚步，随时准备迎接更大的挑战。

2020年初疫情爆发后，一个艰巨的挑战突然出现。那天是腊月二十九，web多媒体团队的绝大多数同学都已经离开北京回到家乡。

中午12点，正在天津和老家亲人们一同吃饭的郭辉接到了leader电话：“郭辉，有个会你接入下吧。”

原来，疫情导致春节档下线后，字节跳动决定在抖音、今日头条、西瓜视频线上请全国人民看贺岁电影《囧妈》。

抖音视频一般只有几分钟，要播放长达2个多小时的电影，不适配的可能性非常高。

因此，技术leader们决定准备多套技术方案，web多媒体团队需要做一套兜底方案，用H5的方式实现电影播放。

但大年初一零点，《囧妈》的线上播放就要开始了，留给web多媒体团队的时间只有36小时。用一天时间做一套方案，还要保证全国观众的体验，这对效率的要求极高。

接下任务后，郭辉在飞书群通知团队所有人：

Web多媒体团队24小时待命，保持电话畅通，做好应急准备。

他先找到的是定居北京不需要回老家的张星。张星小组首先要做的是确定合适的视频播放格式，保障用户观看电影的流畅体验。

而没有被叫到的同学纷纷主动请缨：“郭辉，请给我分配点任务，大家都这么着急，我在家闲坐着很不舒服。”那一刻，郭辉心里十分感动。

第二天，大年三十的早晨，因为家里网络不好，张星一起床就迅速赶到了办公区，和抖音同学一起配合测试，准备上线。

由于demo中用到的SDK在移动端使用比较少，兼容性没有被完整地测试过，张星需要在现场与抖音前端、测试团队合作，在iOS和安卓的不同版本上测试，确认可行性。

测试的过程中，一个新的问题出现了：

抖音本身是竖屏播放的，很难实现良好的横屏播放效果。

于是，中午1点，于浩被紧急呼唤，做横屏的用户体验优化。

他当时正在老家湖南的叔叔家里。接到要求后，于浩把自己锁在了弟弟的房间开始紧急开发。

南方没有暖气，电脑和手指都是冷冰冰的，于浩却很激动：终于找到了一个机会，让家人理解自己在做多么厉害的事情。

离开播还有11个小时，于浩需要开发一个在抖音里铺满全屏的横屏效果，还要保证操作顺滑。抖音当时并没有在前端层面做过横屏，这是一次从无到有的开发。

于浩需要充分保证兼容性，一方面是横屏旋转的兼容：“竖屏变横屏要旋转90度，前端会让视频旋转90度，系统可能也会旋转90度，在不同的兼容环境下，很可能用户把手机横过来之后，内容却旋转了180度。”他找到抖音的同事协商，抖音系统关掉横屏，所有横屏从UI层靠前端来实现。

另一方面则是机型和系统版本的兼容，他必须规避一切在新的系统版本中的特性，“连2015年的安卓5都要兼容。”

开发在继续，但新问题还在不断地涌现。

离开播还有3个小时，因为播放电影的H5页面在UI层实现横屏，抖音系统并没有横屏，因此视频进度条和原本的情况并不适配。于浩又临时来修复了进度条的坐标系，最终选用了系统默认原生进度条，降低兼容性风险。

H5播放页面顺利在最新版的iOS和安卓上线后，开播前2个小时，老旧版本的兼容工作也完成了。

经过更多的调整，直到开播前1小时，H5播放器终于稳定，这套兜底方案开发成功。

Web多媒体团队就这样5个人在一天的时间里，完成了这项平常要一个星期的时间才能做完的工程。

那年，张星是第一次没有和家人一起吃年夜饭 。夜里，大家集中开发的大会议室里供应了饺子，他拿起一小盒饺子，在角落里快速吃完又去跟进新进展了。

0点，于浩的家人还在守岁。他把《囧妈》投到家里的大屏幕，但完全没有在看电影的内容，一边死死地盯着播放器，一边盯着飞书群，害怕出现什么未知的问题。

大年初一凌晨2点，《囧妈》首轮播放圆满结束。

于浩发了一条朋友圈，自豪地宣布：大家在抖音看《囧妈》的时候，发现了什么问题都可以找我反馈。

凌晨3点，张星也终于坐上了回家的出租车。“总算做成了一件大事”，他心里非常满足。

前端 × 多媒体交叉团队

看到这里，你可能明白了，web多媒体团队属于拥有前端×多媒体交叉领域的稀有技能，是「造轮子」的开发者，更是细分领域的佼佼者。

现在，web多媒体团队已经有了十余名同学，技术影响力也随着开源的西瓜播放器一起，辐射字节跳动和国内一系列其他互联网公司，新同学不断加入进来。

郭辉说，他们的团队非常稳定，因为每个人都是抱着坚定的信念来的，比如有的同学在入职之前就把团队的开源代码从头到尾看了一遍，甚至还提出了优化点。

除了工作，团队成员都很有主动学习的意识，业余时间也常常在精进技术，图片、RTC、云游戏等多个方向都是他们正在扩充的能力范围，甚至有同学只用了一周就完成了云游戏的SDK。

也许正是这股不断精进、追求极致的信念，让更多优秀的前端开发者，在字节跳动的技术团队中不断涌现出来。

了解更多：

西瓜播放器开源地址

https://github.com/bytedance/xgplayer

 点击查看更多内容 

 ↓点击「阅读原文」，加入web多媒体团队