Как адаптировать проигрыватель модального video.js в область просмотра? - PullRequest
Новая
       12

Как адаптировать проигрыватель модального video.js в область просмотра?

0 голосов
/ 16 апреля 2019

Я хочу добавить модальный проигрыватель, который:

  • имеет такое же соотношение сторон, как и видео (видео имеют разные соотношения сторон)
  • центрируется в области просмотра
  • , если размер (ширина, высота и то и другое) видео меньше, чем область просмотра
    • имеет размер видео
  • , если размер (ширина, высота и то и другое) видео больше, чем область просмотра
    • уменьшает до максимального размера, который соответствует области просмотра

Я попытался стилизовать сам видеоплеер, а также оформить вмещающий div.Я пробовал встроенные video.js vjs-fluid и vjs-fill.И многие комбинации из вышеперечисленного - безрезультатно.

Как может выглядеть решение этой проблемы?

Вот простой шаблон минимального кода (также в this JSFiddle ): 

.video-js {
  position: fixed;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>How to fit modal video.js player responsively into viewport?</title>
  <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
  <script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
</head>

<body>
  <article>
    <h1>
      Lorem Ipsum
    </h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit
      in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </article>
  <video id="my-player" class="video-js vjs-fluid" controls preload="auto" poster="https://vjs.zencdn.net/v/oceans.png" data-setup='{}'>
    <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    </source>
    <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm">
    </source>
    <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
    </source>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank">
        supports HTML5 video
      </a>
    </p>
  </video>
</body>

</html>
...