[英]How to show overlay on Plyr (html5 video player) when in Fullscreen?
I have an application that plays SVG overlayed an HTMl5 vido tag (using Plyr HTML5 player).我有一个播放 SVG 的应用程序覆盖了 HTMl5 vido 标签(使用 Plyr HTML5 播放器)。 This works great until the user clicks the "Enter Fullscreen" option.
在用户单击“进入全屏”选项之前,这非常有效。 This worked when using a previous defunct player.
这在使用以前的已失效播放器时有效。 I would get notification and adjust my overlay accordingly, but this just does not work with Plyr.
我会收到通知并相应地调整我的叠加层,但这不适用于 Plyr。
I think what is happening is Plyr is uing the browsers (specifically chrome) Fullscreen API to do some of this work, which precludes anything else being fullscreen and on top (via z-index, etc).我认为正在发生的事情是 Plyr 正在使用浏览器(特别是 chrome)全屏 API 来完成其中的一些工作,这排除了其他任何东西都是全屏和顶部的(通过 z-index 等)。
I'd like to figure out how to do my overlays in fullscreen mode.我想弄清楚如何在全屏模式下进行叠加。 This could involve: 1) something I have missed or misunderstood with Plyr, or 2) force Plyr into fallback mode (any ideas how to do this?)
这可能涉及:1)我错过或误解了 Plyr,或 2)强制 Plyr 进入后备模式(任何想法如何做到这一点?)
Looking for some good suggestions on how to accomplish this.寻找一些关于如何实现这一点的好建议。
Ok, took a bit, then I forgot about this questions, so I'll answer it with what I did.好吧,花了一点时间,然后我忘记了这个问题,所以我将用我所做的来回答它。
let plyrVideoWrapper = document.getElementsByClassName('plyr__video_wrapper')
if (plyrVideoWrapper) {
let myPluginCollection = document.getElementsByClassName('svg-embedded')
if (myPluginCollection) {
plyrVideoWrapper[0].appendChild(myPluginCollection[0])
}
}
This basically moves my overlay plug-in, into the plyr area that has the <video>
tag.这基本上将我的覆盖插件移动到具有
<video>
标签的 plyr 区域。 I use the following CSS for my 'svg-embedded'
:我将以下 CSS 用于我的
'svg-embedded'
:
.svg-embedded {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
It all works as expected.这一切都按预期工作。
If you're using Plyr with React, here how you implement the @Hawkeye64 solution.如果您将 Plyr 与 React 一起使用,请在此处了解如何实现 @Hawkeye64 解决方案。
Overlay
component and put together with your video
component render:Overlay
组件并与您的video
组件渲染放在一起: <Overlay />
<video ref={innerRef} className="plyr" .../>
useEffect
to check when the innerRef
is rendered and ready, and move your Overlay
component to the Plyr's video wrapper: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]);
Make sure to implement an
id
in yourOverlay
component, so you can retrieve using thegetElementById
, replace themy_overlay_id
by yours in the code above.确保在您的
Overlay
组件中实现一个id
,以便您可以使用getElementById
进行检索,在上面的代码中用您的my_overlay_id
替换。
If you want to overlay the all video area, use the CSS below as an starting point:
如果要覆盖所有视频区域,请使用以下 CSS 作为起点:
.overlay {
background-color: rgba(56, 3, 3, 0.66);
height: 100%;
width: 100%;
left: 0;
top: 0;
position: absolute;
z-index: 4;
}
Better and more correct solution if you're using React is using react-portal like so:如果您使用 React,则更好、更正确的解决方案是使用 react-portal,如下所示:
import { Portal } from 'react-portal';
...
<Portal node={(document && document.getElementsByClassName('plyr__controls')[0])}>
Your overlay here...
</Portal>
if you want your overlay to be part of controls, Or if you want to be always visible:如果您希望您的叠加层成为控件的一部分,或者如果您希望始终可见:
<Portal node={(document && document.getElementsByClassName('plyr__video-wrapper')[0])}>
Your overlay here...
</Portal>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.