"全屏時如何在 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>