Как изменить ширину video.js при изменении ориентации? - PullRequest
0 голосов
/ 21 мая 2018

У меня есть N количество видео, я играю все видео через video.js каркас плеера.

Я установил ширину videoPlayer с помощью javascript.

Ширина первого видео установлена ​​правильно в портретном и альбомном режимах, но следующее видео не устанавливается должным образом в альбомном режиме.

Это мой player.html

<video  id="cdnvideo" class="video-js fullscreen vjs-default-skin vjs-big-play-centered" controls preload="auto"
  poster="{{video|videourlfilter}}"  >
<source   src="{{video|videourlfilter}}" type='video/mp4'>    
<source   src="{{video|videourlfilter}}"".mp4" type='video/mp4'>
</video>  

Мой js

 vidPlayer = videojs(document.getElementById('cdnvideo'))
    vidPlayer.width(screen.width)
  $(window).on("orientationchange", function (event) {   
     if(screen.width > screen.height){
         vidPlayer.width(height)
     }
         else{
             vidPlayer.width(width)
         }
});

1 Ответ

0 голосов
/ 23 мая 2018

Нет, я был прав с первого раза ... ваш JS НЕ анализирует правильно.

(Я забыл, что единственный анализируемый код JS - это код, который выполняется EXECUTED!Код события не анализируется на моем ноутбуке с Win-10 ... он анализируется только тогда, когда мобильное устройство действительно вращается.)

Итак, ваши два условных if и else «наборы» не анализируются...ie первый получает: "Uncaught ReferenceError: высота не определена"

Вам нужно будет добавить 'screen.'к твоим аргументам.например, vidPlayer.width (screen.height)

Также я не понял, что вы имели в виду, когда говорили «... первый набор видео» и «... но следующий из видео».(Я ошибочно воспринял их как ссылки на «группы / наборы» видеофайлов.)

В любом случае, спасибо за ваш вопрос ... Я многому научился, играя с ним.Я даже получил переподготовку по «шаблонам» JS, когда сканировал https://www.joezimjs.com/javascript/javascript-templating-adding-html-the-right-way/ (я играл с Angular всего месяц или два, прежде чем решил, что это излишне для моих «веб-приложений как хобби»).Единственное, что мне нужно показать, это карусель из нескольких предметов ... например https://mdbootstrap.com/angular/advanced/carousel/)

Приветствия ...

...