Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Определение размера отмасштабированного видео для разных браузеров (https://javascript.ru/forum/misc/45745-opredelenie-razmera-otmasshtabirovannogo-video-dlya-raznykh-brauzerov.html)

GlaIZier 14.03.2014 15:57

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

Я новичок в JS. Помогите, пожалуйста, разобраться с тем, как правильно определять размер видео.

Пишу фото-видео галерею на чистом JS. Мне необходимо динамически определять ширину миниатюр изображений и видео. Я использую и для картинок, и для видео метод getBoundingClientRect().width.

Вот пример: http://jsfiddle.net/GlaIZier/d85dU/

Проблема в том, что после загрузки и хром, и ie9 выдают сперва одно число, а после нажатия на кнопку для повторного вычисления - совершенно другое, а точнее реальную ширину видео.
Почему так происходит?

Если взять видео локально с компьютера, то хром при загрузке сразу выдает реальный результат, а ie9 нет.

Спасибо за помощь!

nerv_ 14.03.2014 16:14

http://stackoverflow.com/questions/4...deo-dimensions

GlaIZier 14.03.2014 16:24

Цитата:

Сообщение от nerv_ (Сообщение 302559)

Спасибо за ответ. Я пробовал это. В таком случае получается 0.

Вот.

nerv_ 14.03.2014 16:28

А если внимательно почитать мою ссылку?

http://jsfiddle.net/d85dU/2/

GlaIZier 14.03.2014 17:36

nerv_,
Спасибо огромное! :dance:
Это работает в IE для моей галереи. Однако в хроме он не заходит в обработчик события. Я пишу:

window.onload = function() {
   // create slideshow as object derived from Gallery
   var slideshow = Object(Gallery);
   slideshow.init();
};

// get element by id
function $(id) {
   return document.getElementById(id);
};

// get elements by tag name inside parent element or inseide document if it is undefined
function $$(tagName,parentElement) { 
   parentElement=parentElement||document;
   return parentElement.getElementsByTagName(tagName); 
};


Gallery.init = function() {
   // ... действия по инициализации событий
   $$('video', $('slider'))[0].addEventListener( "loadedmetadata", function (e) {
      alert("СЮДА НЕ ЗАХОДИТ В ХРОМЕ!");
      Gallery.fillSliderWidth();
   }, false);
};


Alert в хроме не высвечивается. Никак не соображу почему...:blink:
В IE9 все нормально выполняется.

************************************************** ****

Я понял, в чем причина. Событие в хроме срабатывает раньше, чем я добавляю listener.
На случай, если кому-то еще понядобится решение, я оставлю это
здесь.


Часовой пояс GMT +3, время: 07:59.