Question

我正在尝试创建一个UI，在该UI中，订阅者（对手）视频应以全屏模式显示在后台，发布者（自己）视频应在订阅者的顶部（位于右上角的小方框中），并且我试图在这两个视频层上方显示一些按钮。每当我连接会话时，有时视频会按预期显示，有时将发布者呈现在订阅者之后。但是在任何时候，按钮始终不可见/在视频后面。现在，我已经以正确的方式设置了dom元素的z索引，即订户z索引：1，发布者z索引：11和按钮z索引：111。有人有任何想法吗？我的理解有什么吗？

CSS文件：

.video-subscriber {
width: 100% !important;
height: calc(100vh - 110px) !important;
top: 46px !important;
z-index: 0 !important;
}
.video-publisher {
width: 80px !important;
height: 120px !important;
background-color: gray;
z-index: 1 !important;
position: absolute;
top: 20px;
right: 20px;
}
.controls-btn-outer {
position: fixed;
bottom: 0;
background-color: white;
width: 100%;
height: 64px;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}

HTML文件：

<ion-content>
    <div id="subscriber" class="video-subscriber"></div>

    <div class="controls-btn-outer">
      <!-- buttons -->
    </div>

    <div id="publisher" class="video-publisher"></div>

</ion-content>

.ts文件：

//publisher
let publisherOptions = {
insertMode: "append",
publishAudio: this.publishAudio
};
currentScope.publisher = OT.initPublisher("publisher", publisherOptions);
currentScope.session.publish(currentScope.publisher);
// subscriber
let subscriberOptions = {
insertMode: "replace"
};
currentScope.subscriber = currentScope.session.subscribe(event.stream, "subscriber", subscriberOptions);

我的UI不必依赖谁先加入会话。我总是希望将自己的视频放在对手的视频之上。

Answer 1

使用Cordova OpenTok plugin时，视频不是DOM的一部分，因为它是在本机层中创建并通过JavaScript公开的iOS / Android视图。该插件也不支持Z-Index，这就是您在覆盖控件时遇到问题的原因。您可以在此仓库中跟踪问题：https://github.com/opentok/cordova-plugin-opentok/issues/128

谢谢！

OpenTok Ionic 3-订阅者和发布者视频的Z索引在Android上不起作用

1 个答案: