前言

在做视频直播应用过程中，就视频流尺寸和道具的放置方式，在观众侧进行不同的抉择，会有优点和缺点，本文是开发过程中进行权衡的一个总结。

直播流尺寸（Stream Size）

由于主持人侧的视频流尺寸跟观众侧的手机屏幕分辨率和长宽比不可避免会有一定的差异，在观众侧，有两种方式来展示实时视频流，类似于CSS中的BoxFit值：

1. Cover ： 裁切视频流，以达到覆盖整个屏幕的目的，但边缘视频内容在观众侧可能丢失。
2. Contain ： 视频流不裁切，内容完整可见，但上下或左右会有黑边。

道具的放置方式(Interactions)

道具是直播过程中的另一个重头戏，可以增加主持人和观众之间的互动。同样由于手机尺寸差异，同样需要进行抉择。一般是按照比例进行放置，但是比例基于谁有两种选择。

1. 基于手机屏幕尺寸 ： 可以保证所有的道具都完全可见，但位置相对于主持人的描述可能发生偏移，比如主持人说：请看我头顶的道具，此时观众看到的道具很可能并不在他头顶。
2. 基于视频流的尺寸 ： 可以保证所有的道具都基于视频内容放置在同样位置，比如主持人把一个道具放置在他的头顶，不管观众使用什么手机尺寸，看到的道具都会放置在主持人头上；缺点也很明显，如果道具放在视频流边缘，那部分视频内容正好不幸被全部/部分裁切，那么道具只能看到部分甚至全部不可见。

组合的优缺点

这两个选项各有2种选择，产生了四种不同组合。我整理了一个表格，为了表述准确，使用了英文。

阅读表格前，想象主持人在使用一个长宽比1：1的平板电脑，观众使用五花八门的手机设备(长宽比大致为16:9)，这样主持人的视频流大致为正方形，而观众的屏幕是长方形。

帮助抉择的例子

用产品经理和开发者的对话来帮助理解抉择的过程：

产品经理：我不想要黑边，我想视频流填充满观众的屏幕

开发者：没问题！使用对视频流使用”Cover“，但是道具可能会部分/全部不可见。

产品经理：但我不想道具被部分/全部砍掉

开发者：使用屏幕尺寸作为道具的相对定位基准。但是道具跟视频内容的关系就脱钩了，主持人放在头上的道具，在观众侧并不在头上。

产品经理：但是我想所有道具可见，而且跟视频内容完全挂钩。

开发者：没问题！对视频流使用”contain“，对道具基于视频流进行定位，但这不可避免会产生黑边。

产品经理：我不想要黑边！有没有一个办法，能解决上述的缺点？

开发者：有一种方法，那就是把视频流拉伸到撑满屏幕！但这样的话视频在观众侧看起来真的很丑…

其他App是怎么做的

Mobile-first App

抖音和Instagram使用了”Cover“，并且只允许手机尺寸的视频流。

Desktop-first App

Youtube和Twitter使用了”Contain“，保留了黑边，但是把这些空间用作其他用途，比如聊天室功能。