css - 在 React App 中的全屏 Video.js 上渲染元素？

问题描述

**原始帖子已编辑：我正在 React 应用程序中使用 Video.js。我需要徽章在视频播放过程中根据状态变化出现在视频播放器的各个时间点。问题是，当我进入全屏模式时，视频位于徽章之上。我将两个徽章的 Z-index 设置为最大值，但它们仍然没有显示。

我试过使用视频覆盖库，但我需要徽章来呈现特定的状态变化，而且我很难让覆盖函数读取状态变化。我尝试使用 Video.js player.on('fullscreenchange') 事件添加一个类，但也没有成功。任何有关如何在全屏时显示徽章的见解都将非常感激。

相关 JSX 代码：

    class VideoPage extends Component {
      constructor(props){
        super(props);
        this.state = {
          defaultPlayerOptions: {
            autoplay: false,
            controls: true,
            responsive: true,
            sources: [{
              src: "",
            }],
            isAdRolling: false,
            playbackRates: [0.25, 0.5, 1, 1.5, 2],
          },
          liveVideoPlaying: false,
        }
  }

componentDidUpdate(prevProps){
     // overlay code here though it is not registering the state change. including it only for reference. 

     player.overlay(() =>{
       if(liveVideoPlaying){
         content: 'Live'
      }
     else if (isAdRolling){
         content: 'overlay ad'
      }
   // the player is instantiated and then I've got the below:
   player.on('fullscreenchange', function (e){
          if(player.isFullscreen()){
            player.addClass('full-screen-badge')
          }
        })
}

render(){
 <div className='video-player-bkgrnd'>
        <div className='video-container'>
          <div className='videoplayer'>
          <div className={isAdRolling ? 'ad-badge-wrapper': ''}>
                <AdBadge/>
           </div>
           <div className={!isAdRolling && liveVideoPlaying ? 'live- 
           badge-wrapper': ''}>
                <LiveBadge/>
            </div> 
            <video ref={node=>this.player_node=node} className='video- 
            js'>
                <source src={videoURL}>
                </source>
            </video>
         </div>

}

解决方案

我有一个在 React 应用程序中交付的 video.js 组件。我能够创建一个覆盖，但是当我创建一个要在 videoJS 的 ModalDialog 组件中呈现的覆盖时，我有点迷失了自己。

假设这<Overlay />是我的组件。它有一些动态数据，正如你可能对 React 元素所期望的那样。事实上，它加载了一个远程 JSON，它应该定义它的内容。

现在，我尝试通过以下 3 种方式加载组件来将内容放入模式中：

使用 renderToString

this.modal.contentEl().innerHTML = renderToString(
  <PollOverlay questionId={54} />
);

我知道它不会工作，因为这应该是在服务器端呈现的，但是我只是在检查，如果内容不是动态的，它确实会呈现一个“静态”反应组件。

所以我想一个想法是改变静态内容，然后将其提供给组件。

直接将组件加载为innerHTML。

this.modal.contentEl().innerHTML = <PollOverlay questionId={54} />;

显然这行不通，但我只是好奇。这样我就可以在叠加层上渲染一个漂亮的 [Object Object]。当然还有关闭按钮。

使用 ReactDom.render

ReactDom.render(<PollOverlay questionId={54} />, this.modal.contentEl());

这样就可以了！我希望它有所帮助。

css - 在 React App 中的全屏 Video.js 上渲染元素？

问题描述

解决方案

推荐阅读