Как создать функцию, похожую на боковые кнопки видеоплеера Udemy, используя JWPlayer в реакции? - PullRequest
Новая
       45

Как создать функцию, похожую на боковые кнопки видеоплеера Udemy, используя JWPlayer в реакции?

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

Я пытаюсь повторить функциональность боковых кнопок видеоплеера Udemy, они все время показываются на боковой панели плеера, они выглядят примерно так, как я сделал здесь быстрый набросок:

Sketched image здесь

они также видны на боковой панели проигрывателя даже в полноэкранном режиме, и они даже исчезают и исчезают, когда проигрыватель активен / неактивен, можно ли что-то подобное сделать с JWPlayer? или как бы вы реализовали эту функцию в React?

Я не очень разбираюсь в JWPlayer, поэтому я попытался использовать JavaScript, HTML и CSS, чтобы решить эту проблему, но до сих пор не совсем понятно как я могу решить проблему с полноэкранным режимом проигрывателя, в настоящее время я знаю, что с помощью простого кода CSS и HTML я могу сделать так, чтобы кнопки выглядели сбоку примерно так: 

// CSS 

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.right-btn,
.left-btn {
  display: block;
  position: absolute;
  top: 50%;
  cursor: pointer;
}

.right-btn {
  right: 0;
}

// Html

<div className="wrapper">
  <Video />
  <button className="left-btn" />
  <button className="right-btn" />
</div>

Однако я не уверен, что именно в этом направлении я хочу пойти, чтобы решить эту проблему, я действительно хотел бы получить некоторое представление об этом, заранее спасибо!

...