Question

使用cordova-plugin-opentok插件，我可以启动视频聊天会话并在cordova应用中运行（在iOS上测试）。使用负Z索引，我可以将视频放置在背景中，并将覆盖控件放置在顶部。但是，控件不可单击。

插件：https://github.com/opentok/cordova-plugin-opentok

文档：https://github.com/opentok/cordova-plugin-opentok/tree/master/docs

相关问题：https://github.com/opentok/cordova-plugin-opentok/issues/164

我已经研究了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）的分支。对于Android，我可以使用官方网络版本（cordova / android版本无法正常工作）。

为了确保选择正确的版本，具体取决于平台，我在我的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>

我自己的fork在这里：https://github.com/phiferd/cordova-plugin-opentok，其中包含一些其他错误修复。请注意，我已删除了Android插件代码，以确保在Android设备上使用网络版本。

但是，我正在从事的项目不再运行，因此我不太可能进行任何更改。

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

1 个答案: