Question

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

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

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

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

Answer 1

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

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;
}

一切正常。

Answer 2

如果您将Plyr与React一起使用，请在此处实现@ Hawkeye64解决方案。

实施您的Overlay组件，并与您的video组件渲染器放在一起：

    <Overlay />
    <video ref={innerRef} className="plyr" .../>

使用useEffect检查innerRef的渲染和准备时间，然后将Overlay组件移至Plyr的视频包装器中。


    useEffect(() => {
      if (innerRef.current) {
        const wrapper = document.getElementsByClassName("plyr__video-wrapper");
        if (wrapper) {
          const overlay = document.getElementById("my_overlay_id");
          wrapper[0].appendChild(overlay);
        }
      }
    }, [innerRef]);

请确保在您的id组件中实现一个Overlay，以便您可以使用getElementById进行检索，并在上面的代码中将my_overlay_id替换为您的代码。

如果要覆盖所有视频区域，请使用以下CSS作为起点：


    .overlay {
      background-color: rgba(56, 3, 3, 0.66);
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
      position: absolute;
      z-index: 4;
    }

在全屏模式下如何在Plyr（html5视频播放器）上显示覆盖图？

2 个答案: