获取 html 元素以在 iOS 上覆盖 videojs 播放器

Question

我正在开发一个使用 videoJS 进行视频的网站，并创建了 html 元素，这些元素放置在视频顶部作为记分板。问题是本机 iOS 播放器在进入全屏时会覆盖 videojs。

有没有办法确保 iOS 原生播放器接受 html 覆盖？

<video class="videoPlayer" preload="none" style="display: none;" data-bind="attr: {'id': 'Player_' + ID}, VideoURL: $data" playsinline controls controlsList="nodownload"></video>
<div class="video-preroll" style="display: none;" data-bind="with: $root.currentPreRoll">
    <div class="picture-container">
        <img data-bind="pictureURLforimg: BillboardLandscapePicture" />
    </div>
</div>
<div class="custom-overlay" style="display: none;" data-bind="visible: $root.replayOverlay().Show && $root.hideOverlay">
    <div data-bind="with: $root.replayOverlay">
        <div class="score-time"><div class="score-time-img" data-bind="backgroundPictureURL: HomeTeamLogoURL" /><span data-bind="text: HomeTeamName"></span> <div class="game-score" data-bind="text: $root.gameScore"></div> <span data-bind="text: AwayTeamName"></span><div class="score-time-img" data-bind="backgroundPictureURL: AwayTeamLogoURL" /></div>
    </div>
    <div class="game-time" data-bind="visible: $root.showClock"><span style="border-top-right-radius: 0px; border-bottom-right-radius: 0px;" data-bind="text: $root.periodName"></span><span style="border-top-left-radius: 0px; border-bottom-left-radius: 0px;" data-bind="text: $root.currentTime"></span></div>
</div>

Answer 1

您无法在 iPhone Safari 的本机全屏之上覆盖任何内容。

Video.js 有一个“假”全屏的全窗口模式，可以最大化浏览器中的视频。与真正的全屏不同，但在苹果实现正确的全屏 API 之前你可以做的一切，就像它已经在 iPad 上实现的那样。您可以启用它的设置选项：

videojs(elementOrId, { preferFullWindow: true });