定位在OpenTok视频上的HTML元素不可点击。

Question

使用cordova-plugin-opentok插件，我能够在cordova应用中建立并运行一个视频聊天会话（在iOS上测试）。 使用负Z-index，我可以将视频放置在背景中，并在上面叠加控件。 然而，这些控件是无法点击的。

插件。https:/github.comopentokcordova-plugin-opentok。

文档。https：/github.comopentokcordova-plugin-opentoktreemasterdocs。

相关问题。https:/github.comopentokcordova-plugin-opentokissues164

我已经研究了插件JS和iOS代码，但我还没有确定到底发生了什么。我感到困惑的是，图形被正确绘制（HTML元素位于视频顶部），但事件的处理方式不同。我可以确认，如果我停止发布视频，按钮就会变得可以点击。

<div style="position: absolute; width: 100%; height: 100%">
    <div class="fullscreen-video" style="z-index: -20;">
        <div id="session-fullscreen" style="width: 100%; height: 100%; z-index: -20"></div>
    </div>
    <div class="thumbnail-video" style="z-index: -10;">
        <div class="material-icons muted-icon" style="display: none">mic_off</div>
        <div id="session-thumbnail" style="width: 100%; height: 100%; z-index: -10;"></div>
    </div>

    <div class="session-controls" style="z-index: 100;">
        <div data-behavior="quit">Exit</div>
        <div data-behavior="toggle-audio" class="audio-state">Audio</div>
        <div data-behavior="toggle-video" class="video-state">Video</div>
    </div>
</div>

我希望控件是可以点击的，特别是考虑到它们显示在视频组件的顶部。

然而，一旦我开始在缩略图或全屏元素上显示视频，控件就不再对交互作出反应，尽管它们确实出现在视频的顶部。

Answer 1

我最终使用了官方资源库的一个分支（iOS）。对于安卓系统，我能够使用官方的网络版本（cordovaandroid版本不能正常工作）。

为了确保选择正确的版本，根据不同的平台，我在cordova应用的index.html文件中使用了以下代码（从其他线程复制的，我现在不记得了）。

<script type="text/javascript" charset="utf-8" src="opentok.js"></script>
<script type="text/javascript">window.OT || document.write(`<script src="https://static.opentok.com/v2/js/opentok.js">\x3C/script>`)</script>

我自己的叉子在这里。https:/github.comphiferdcordova-plugin-opentok）。 与一些额外的错误修复。请注意，我已经删除了Android插件代码，以确保在Android设备上使用Web版本。

然而，我正在进行的项目已经不再启动和运行，所以我不可能做出任何改变。