opentok Tokbox广播HLS视频删除黑色背景色

Question

我正在使用hls集成opentok广播。

在hls视频中，我需要删除黑色背景色，

请参阅所附的屏幕截图

如何去除这种黑色？

Answer 1

HLS / HTML5视频和OpenTok SDK均未提供处理视频的任何方法。如果要将实际视频限制在某个区域，则需要在源位置执行此操作。

在浏览器中，您可以通过像对待其他HTML元素一样对待video元素并将其巧妙地放置在一个较小的框内来缩放和平移视频。

如果黑色背景始终在视频的同一部分，而不是动态的，则可以通过将视频标签放在固定大小的块级元素内，将视频的可见区域缩小为实际图像大小。

即：

<div class="videobox"><video src="..." /></div>

然后继续将视频元素放置在块元素（div）中，以使黑色部分将从div中流出。

即（您的可见图像在顶部居中居中，尺寸为625x465px，整个框为1875x708）：

.videobox {
  position: relative;
  width: 625px;
  height: 465px;
  overflow: hidden;
}

.videobox video {
  position: absolute;
  right: 625px;
}

有关如何放大视频和剪切多余部分的更多详细信息，可以从Mozilla的本指南中找到：https://hacks.mozilla.org/2011/01/zooming-and-rotating-for-video-in-html5-and-css3/

[他们在有关在舞台区域内旋转视频的示例中演示了截止点，但是由于这只是普通的HTML + CSS，因此它以相同的方式应用于“只是缩放/平移”。