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

【问题标题】：How to show overlay on Plyr (html5 video player) when in Fullscreen?全屏时如何在 Plyr（html5 视频播放器）上显示叠加层？
【发布时间】：2022-01-28 23:37:27
【问题描述】：

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

我认为正在发生的事情是 Plyr 正在使用浏览器（特别是 chrome）全屏 API 来完成其中的一些工作，这排除了其他任何东西都是全屏和顶部的（通过 z-index 等）。

我想弄清楚如何在全屏模式下进行叠加。这可能涉及： 1) 我错过或误解了 Plyr 的一些东西，或 2) 强制 Plyr 进入后备模式（有什么想法吗？）

寻找一些关于如何完成此任务的好建议。

【问题讨论】：

标签： javascript html5-video plyr

【解决方案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;
}

一切都按预期进行。

【讨论】：

【解决方案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;
    }

【讨论】：

【解决方案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>

【讨论】：