Question

在我的React应用程序中，我希望有一个按钮可以导航到当前视频播放完毕后的下一课。我正在使用12345来显示视频。我想知道如何才能做到这一点entity_id。任何有用的提示都将受到高度赞赏。

react-player

Answer 1

您可以在视频结束时设置布尔状态值（onEnded），并有条件地显示“下一步”按钮。该按钮必须位于绝对位置以覆盖视频。并且将按钮弹性框居中是许多选项之一。

以下代码也可以here作为代码沙箱使用。

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>
  )
}

视频以react-player结束后如何在视频上显示按钮

1 个答案: