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

Question

我正在尝试创建一个 UI 订阅者（对手）视频应该在全屏模式下的背景中，发布者（自己）视频应该在订阅者之上的一个小盒子里右上角，我试图在这两个视频层上方显示几个按钮。每当我连接会话时，有时视频会按预期显示，有时发布者会在订阅者后面呈现。但在任何时候，按钮都是 invisible/behind 视频。现在，我已经以正确的方式设置了 dom 元素的 z-index，即订阅者 z-index：1，发布者 z-index：11 和按钮 z-index：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);

N.B。我的 UI 不必依赖于谁先加入会话。我总是想要自己的视频在对方的视频之上。

Answer 1

当您与 Cordova OpenTok plugin, the video is not a part of the DOM because it's an iOS/Android view that's created in the native layer and exposed via JavaScript. The plugin also does not support Z-Index which is why you're having issues with overlaying controls. You can track the issue here on the repo: https://github.com/opentok/cordova-plugin-opentok/issues/128

一起工作时

谢谢！

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

OpenTok Ionic 3 - the z-index of subscriber and publisher videos not working on Android

tokbox

opentok

ionic-framework

ionic3