Как отобразить кнопку на видео после того, как видео заканчивается реакцией - PullRequest
Новая
       33

Как отобразить кнопку на видео после того, как видео заканчивается реакцией

0 голосов
/ 01 апреля 2020

В моем приложении React я хочу, чтобы кнопка перехода к следующему уроку отображалась на видео сразу после завершения воспроизведения текущего видео. Я использую react-player для отображения видео. Я хочу знать, как я могу сделать sh это react-player. Любой полезный совет высоко ценится. 

 <ReactPlayer
          url={videoPath}
          width="100%"
          height='100%'
          controls={true}
          className="player"
          onEnded={markLessonAsCompleted}
          config={{
            file: {
              attributes: {
                controlsList: "nodownload"
              }
            }
          }}
          volume={1}
        />

1 Ответ

2 голосов
/ 08 апреля 2020

Вы можете установить логическое значение состояния по окончании видео (onEnded) и условно показать кнопку «Далее». Кнопка должна быть абсолютно позиционирована для наложения видео. А центрирование гибкого блока кнопки является одним из многих вариантов.

Следующий код также доступен здесь в виде песочницы для кода. 

function App() {
  const urls = [
    'https://www.youtube.com/watch?v=oPZXk4ESdng?t=50',
    'https://www.youtube.com/watch?v=bcWZ6C-kn_Y'
  ]
  const [currentUrlIndex, setCurrentUrlIndex] = React.useState(0)
  const [showNextButton, setShowNextButton] = React.useState(false)

  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
      }}
    >
      <ReactPlayer
        url={urls[currentUrlIndex]}
        playing
        controls
        onEnded={() => setShowNextButton(true)}
        style={{
          width: '100%',
          height: '100%'
        }}
      />
      {showNextButton && (
        <button
          onClick={() => {
            setCurrentUrlIndex(
              prevUrlIndex => (prevUrlIndex + 1) % urls.length
            )
            setShowNextButton(false)
          }}
          style={{
            position: 'absolute',
            zIndex: 10,
            fontSize: '2em'
          }}
        >
          next
        </button>
      )}
    </div>
  )
}
...