javascript - 在全屏模式下如何在Plyr(html5视频播放器)上显示覆盖图？

我有一个播放SVG的应用程序，该应用程序覆盖了HTMl5 vido标签（使用Plyr HTML5播放器）。在用户单击“输入全屏”选项之前，此方法非常有效。使用以前的已停用播放器时，此功能有效。我会收到通知并相应地调整覆盖，但这不适用于Plyr。

我认为Plyr正在使用浏览器（特别是chrome）全屏API来完成某些工作，这使得其他任何事情都无法全屏显示（通过z-index等）。

我想弄清楚如何在全屏模式下进行叠加。这可能涉及：
1）我对Plyr错过或误解的事情，或者
2）强制Plyr进入后备模式（任何想法如何做到这一点？）

寻找有关如何完成此操作的好的建议。

最佳答案

好的，花了一点时间，然后我忘记了这个问题，所以我将以我所做的回答。

let plyrVideoWrapper = document.getElementsByClassName('plyr__video_wrapper')
if (plyrVideoWrapper) {
    let myPluginCollection = document.getElementsByClassName('svg-embedded')
    if (myPluginCollection) {
        plyrVideoWrapper[0].appendChild(myPluginCollection[0])
    }
}

基本上，这会将我的叠加插件移动到具有<video>标记的plyr区域中。我的'svg-embedded'使用以下CSS：

.svg-embedded {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

一切都按预期工作。

关于javascript - 在全屏模式下如何在Plyr(html5视频播放器)上显示覆盖图？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52747919/