Используя плагин 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>
Я ожидаю, что элементы управления будут активными, особенно если они отображаются в верхней части компонента видео.
Однако, как только я начинаю показывать видео на миниатюре или в полноэкранном элементе, элементы управления перестают реагировать на взаимодействие, хотя они отображаются в верхней части видео.