"全屏时如何在 Plyr（html5 视频播放器）上显示叠加层？"

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 区域。 我将以下 CSS 用于我的'svg-embedded' ：

.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]);

确保在您的Overlay组件中实现一个id ，以便您可以使用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;
    }

Answer 3

如果您使用 React，则更好、更正确的解决方案是使用 react-portal，如下所示：

import { Portal } from 'react-portal';

...

<Portal node={(document && document.getElementsByClassName('plyr__controls')[0])}>
 Your overlay here...
</Portal>

如果您希望您的叠加层成为控件的一部分，或者如果您希望始终可见：

<Portal node={(document && document.getElementsByClassName('plyr__video-wrapper')[0])}>
 Your overlay here...
</Portal>