Question

我以实时广播rtmp模式发布了2个流。布局为自定义类型。这是样式表：

stream.block1{
  position : absolute;
  top : 0;
  left : 0;
  height : 100%;
  width : 50%;
  z-index : 1;
}

stream.block2{
  position : absolute;
  top : 0;
  right : 0;
  height : 100%;
  width : 50%;
  z-index : 1;
}

但是，当我在youtube上观看直播时，两个块都不会占用屏幕的所有空间： https://www.noelshack.com/2018-30-2-1532386693-capture-ecran-test-event-youtube.png

每个块的css属性指定高度为100％，右上角或左上角为0。

将分辨率更新为1280x720可使块的尺寸更大，但仍不能占据所有空间。

如何使积木占据所有空间？

Answer 1

输入指定区域的视频填充方式由CSS的“对象适合”属性控制。在opentok中，我们支持两个可能的值： “ cover”和“ contain”（默认）。

在两种情况下，输入视频都不会修改其宽高比以适合画布中的空间。

对于“包含”，这意味着如果您在DOM中指定一个长宽比为1：1的区域，而传入视频的长宽比为4：3，则最终的合成将尝试填充包括视频的所有表面时，尽可能多地使用1：1的区域。由于长宽比不匹配，因此会有一些未使用的空间。

如果您使用“覆盖”，则将填充所有指定区域，但需要修剪掉原始视频的某些部分

请查看有关“对象适合”参数的更详细说明：https://www.w3schools.com/css/css3_object-fit.asp 这是css中所有支持的参数的列表，这些参数用于opentok中的布局控制：https://tokbox.com/developer/guides/archiving/layout-control.html

如何使两个区块流占据所有位置？

1 个答案: