Question

我正在尝试为组视频广播配置存档，但是我做不到。组成文件及其开始/停止的归档工作正常，custom布局type和stylesheet的考虑正确，但是我没有得到想要的结果。

我的样式表当前看起来像这样

stream {
  float: left;
  position: absolute;
}

stream:first-child:nth-last-child(1) {
  width: 100%;
  height: 100%;
}

stream:first-child:nth-last-child(2) {
  width: 100%;
  height: 50%;
}

stream:first-child:nth-last-child(2)+stream {
  width: 100%;
  height: 50%;
  top: 50%;
}

stream:first-child:nth-last-child(3) {
  width: 100%;
  height: 50%;
  top: 0;
  left: 0;
}

stream:first-child:nth-last-child(3)+stream {
  width: 50%;
  height: 50%;
  top: 50%;
}

stream:first-child:nth-last-child(3)+stream+stream {
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
}

stream:first-child:nth-last-child(4) {
  width: 50%;
  height: 50%;
  top: 0;
  left: 0;
}

stream:first-child:nth-last-child(4)+stream {
  width: 50%;
  height: 50%;
  top: 0;
  left: 50%;
}

stream:first-child:nth-last-child(4)+stream+stream {
  width: 50%;
  height: 50%;
  top: 50%;
  left: 0;
}

stream:first-child:nth-last-child(4)+stream+stream+stream {
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
}

stream:first-child:nth-last-child(5) {
  width: 50%;
  height: 33.3%;
  top: 0;
  left: 25%;
  object-fit: cover;
}

stream:first-child:nth-last-child(5)+stream {
  width: 50%;
  height: 33.3%;
  top: 33%;
  left: 55px;
}

stream:first-child:nth-last-child(5)+stream+stream {
  width: 50%;
  height: 33.3%;
  top: 33%;
  right: 55px;
}

stream:first-child:nth-last-child(5)+stream+stream+stream {
  width: 50%;
  height: 33.3%;
  top: 66%;
  left: 55px;
}

stream:first-child:nth-last-child(5)+stream+stream+stream+stream {
  width: 50%;
  height: 33.3%;
  top: 66%;
  right: 55px;
}

stream:first-child:nth-last-child(6) {
  width: 50%;
  height: 33.3%;
  top: 0;
  left: 55px;
}

stream:first-child:nth-last-child(6)+stream {
  width: 50%;
  height: 33.3%;
  top: 0;
  right: 55px;
}

stream:first-child:nth-last-child(6)+stream+stream {
  width: 50%;
  height: 33.3%;
  top: 33%;
  left: 55px;
}

stream:first-child:nth-last-child(6)+stream+stream+stream {
  width: 50%;
  height: 33.3%;
  top: 33%;
  right: 55px;
}

stream:first-child:nth-last-child(6)+stream+stream+stream+stream {
  width: 50%;
  height: 33.3%;
  top: 66%;
  left: 55px;
}

stream:first-child:nth-last-child(6)+stream+stream+stream+stream+stream {
  width: 50%;
  height: 33.3%;
  top: 66%;
  right: 55px;
}

例如，

当有5个流时，我希望得到这样的结果：https://tokbox.com/blog/wp-content/uploads/2017/07/multiparty2.png

，当有6个流时，如下所示： https://tokbox.com/blog/wp-content/uploads/2017/07/multiparty1-1.png

广播将显示在手机中，因此布局将完全一样。

我可以在这些图像中获得类似的结果吗？

谢谢

Answer 1

当前，输出画布可以是640x480或1280x720，这两种风景的纵横比都是如此。从样本所需的图像中看来，您需要纵向宽高比。

您可以做的一个技巧是定义一个css，该css仅在具有纵向长宽比的区域内绘制在输出画布内部，因此最终视频的侧面将带有黑带，而相关内容将位于在该肖像长宽比区域中居中。请注意，视频的长宽比仍为横向。因此，当纵向设备播放该广播流时，播放器可以放大以仅关注相关内容，而忽略视频的黑条

具有自定义布局的Tokbox组视频存档

1 个答案: