How to change video.js width on Orientation change?

Question

I have N number of videos, I play all video through video.js player framework.

I set videoPlayer width using javascript.

In width of first video set correctly on both portrait and landscape mode but next of videos does not set properly in landscape mode.

This is my 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>

My 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)
         }
});

Here's a similar question's coding...does it help at all? https://stackoverflow.com/questions/5284878/ Also, please mention which mobile platform you target when you test. — David, May 21 '18 at 16:50
I notice that the syntax of the 2nd source tag's src attribute looks strange. i.e. the two adjacent double-quotation marks looks suspect, and isn't symmetrical with the first source tag's. — David, May 21 '18 at 17:34
Lastly, the javascript itself doesn't parse correctly. Hint: e.g. On Chrome browser, navigate to " '3-vertical-dots' -> More tools -> Developer Tools", which will enable a debugging 'console' in the right-half of the screen. — David, May 21 '18 at 18:16
My sincere apologies...now tonight, your JS DOES parse ok. (And, your template on the 2nd source-tag no doubt just doesn't show a backslash, due to the cut/paste or whatever.) But, I've already learned a lot, so I'll try once more. You may well have hit some bug in video-js. So as to try to reproduce it, it's not clear exactly how you are varying which of the two source-tags that your test will use? Do you simply swap the order of them, on successive runs? Or something else? — David, May 22 '18 at 01:04

David · Answer 1 · 2018-05-22T21:51:47.400

No, I was correct the first time...your JS does NOT parse correctly.

(I'd forgotten that the only JS code that gets parsed is the code that gets EXECUTED! Ergo, the event code doesn't get parsed on my Win-10 laptop...it only parses when the mobile device actually gets rotated.)

So, your two conditional if and else 'sets' don't parse...i.e. the first one is getting: "Uncaught ReferenceError: height is not defined"

You'll need to add 'screen.' to your args. e.g. vidPlayer.width(screen.height)

Also I was miss-understanding what you meant when you said '...first video set' and '...but next of videos'. (I erroneously took those as references to 'groups/sets' of video files.)

Anyway, thanks for your question...I learned MUCH from playing with it. I even got a refresher on JS 'templates' as I scanned https://www.joezimjs.com/javascript/javascript-templating-adding-html-the-right-way/ (I played with Angular for only a month or two, before I decided that it was overkill for my 'web-apps as a hobby' needs. The only thing I have to show for it, is a multi-item carousel...e.g. https://mdbootstrap.com/angular/advanced/carousel/ )

Cheers...

How to change video.js width on Orientation change?

1 Answers1