положение не работает, когда видео на весь экран - PullRequest
Новая
       28

положение не работает, когда видео на весь экран

0 голосов
/ 14 февраля 2019

Я работаю над проектом, в котором мне нужно показывать метку после окончания воспроизведения видео.Токовый выход показывает вот так enter image description here

См. Метку следующего эпизода через 10 секунд.Это нормально работает в нормальном случае, но когда я делаю полноэкранный режим, ярлык исчезает.Вот мой код реакции для этой части 

  <div style={{ position: 'relative' }} id='outsideVideo' >
            <Video disableremoteplayback="true"
              id="videoId"
              onEnded={this.onVideoEnd}
              onPause={this.onVideoPause}
              width="100%"
              autoPlay={this.state.autoPlay}
              controls={['PlayPause', 'Seek', 'Time', 'Volume', 'Fullscreen']}
              poster={this.getInfo() ? this.getInfo().background : ''}
              ref='videoRef'
              style={{position:'relative'}}
              src={this.getLink() ? (this.getLink().jwplayer && this.getLink().jwplayer.length ? this.getLink().jwplayer[0].file : null) : null}>
            </Video>
            <div style={{  position: 'absolute', bottom: 40, right: 0, zIndex: 999 }} id='nextEpisodeLabel'>
              <label style={{ fontSize: '0.8rem', fontWeight: 600, color: 'white', padding: '5px 10px', margin: 5, backgroundColor: '#0487d6', position: 'absolute', right: 0, bottom: 0 }}>
                Next ep in 10 seconds
                  </label>
            </div>


          </div>

Что я могу сделать, чтобы ярлык не исчезал в полноэкранном режиме

1 Ответ

0 голосов
/ 14 февраля 2019

Когда видео полноэкранное, компонентам, которые должны быть в верхней части видео, необходимо указать атрибут z-index: 2147483647 CSS, как указано здесь MDN .

Элементы управления браузера по умолчанию должны быть скрыты с помощью: 

video::-webkit-media-controls { display:none !important; }

У контейнера пользовательских элементов управления должно быть специальное значение z-index: 

.controls { z-index:2147483647; }

С учетом сказанногоВы должны указать это свойство на ярлыке, когда видео полноэкранное, как показано ниже: 

<div style={{ backgroundColor: 'black', position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', zIndex: 2147483647 }}>
  <label style={{ fontSize: '0.8rem', fontWeight: 600, color: 'white', padding: '5px 10px', margin: 5, backgroundColor: '#0487d6', position: 'absolute', right: 0, bottom: 0 }}>
    Next ep in {this.state.countdown} seconds
  </label>
</div>
...