Визуализация элемента в полноэкранном видео. js в приложении React? - PullRequest
Новая
       51

Визуализация элемента в полноэкранном видео. js в приложении React?

1 голос
/ 28 января 2020

** ОРИГИНАЛЬНЫЙ ПОСТ ИЗМЕНЕН: Я работаю с Video. js в приложении React. Мне нужно, чтобы значки отображались на видеоплеере в разные моменты видео во время изменения состояния. Проблема в том, что, когда я вхожу в полноэкранный режим, видео располагается поверх значков. У меня 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>

}

Соответствующий код S CSS: 

.videoplayer {
      .ad_badge {
          position: relative;
          top: -45rem;
          left: 10rem;
          z-index: 2147483647;

      }    
      .live-badge {
          position: absolute;
          top: -45rem;
          left: 76rem;
          z-index: 2147483647;
      }
  }
  .video-js{
        width: 1170px;
        height: 660px;
        margin: 121px 135px 79px 135px;
        box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.5);
  }
...