Блог

Главная - Вопросы по программированию - Динамические размеры видео

Динамические размеры видео

#javascript #html #html5-video

Вопрос:

У меня на моей HTML-странице есть видеоплеер, и размеры изменения плеера зависят от стороны окна браузера. Итак, при запуске мое видео 1280х720, и когда я уменьшаю размер окна браузера, мое видео также становится меньше. Я хочу добавить кнопку, которая будет выводить на консоль текущие размеры видео. Я пытался вот так:

 <button onclick="getDimensions()">getDimensions</button>

  <script>
      const myVideo = document.getElementById("video1");
      
      function getDimensions() {
        let height = myVideo.videoHeight;
        let width = myVideo.videoWidth;
        console.log(height, width);
      }
 </script>

но этот код печатает только начальные размеры 1280х720 пикселей. У кого-нибудь есть идеи, как это исправить?

Ответ №1:

Сначала вам нужно определить элемент:

 element = document.getElementById('id');

а теперь получите информацию о размере элемента и его положении относительно окна просмотра.

 domRect = element.getBoundingClientRect();

если я его напечатаю:

 DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,​
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}

Документация

Метки: