Changing video source depending of screen size

[Nic727]

Hi,

 

I would like to change my video sources :

<source src="../medias/grece_1.mp4" type="video/mp4">
<source src="../medias/grece_1.ogg" type="video/ogg">
<source src="../medias/grece_1.webm" type="video/webm">

with :

<source src="../medias/grece_2.mp4" type="video/mp4">
<source src="../medias/grece_2.ogg" type="video/ogg">
<source src="../medias/grece_2.webm" type="video/webm">

if the screen width is less than 600px.

 

Is it possible and what's the code?

[davej]

See...

 

http://www.w3schools.com/jsref/prop_win_innerheight.asp

[dsonesuk]

If you have bootstrap, you could have both on page, but use media queries to show one or the other when required.

[Nic727]

If you have bootstrap, you could have both on page, but use media queries to show one or the other when required.

But media queries for videos are not working.

 

I tried to put

 

src="../medias/grece_2.mp4" type="video/mp4" media="all and (max-width:600px)

[dsonesuk]

Well it wouldn't work, because that not how bootstrap media queries work, you give them a identifier such as class or id, and use that to show or hide depending on requirement when specific media width is reached.

 

OR you could use one or more of bootstrap hidden-lg hidden-md hidden-sm hidden-xs to do the same thing when specific width is reached by media queries.

 

NOTE:lowest fixed min-width is 750px, below that it is fluid but you can adjust or add you own specifically for these video tags.

Edited December 11, 2015 by dsonesuk

[Nic727]

ok I understand what you mean!

[Ingolme]

I would not recommend loading two videos and then only showing one of them. Use Javascript to modify the properties of the video once the page has loaded.

 

This stackoverflow thread explains how to change the video source:

http://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag

[Nic727]

I was going to say that. Now my two videos are running at the same time.

[Nic727]

But how to change if the width of the screen is bellow 600px and change back after it's more than 600px?

 

 

Whatever, I did my work with some buttons and it work, but I would like to know if it's possible to change with screen width... Hate that at school they say us to do that without explanation even if no website are doing that lol.

Edited December 12, 2015 by Nic727

[davej]

But how to change if the width of the screen is bellow 600px and change back after it's more than 600px?

 

Why would you need to do that?

[thescientist]

My guess is the videos are sized a certain way to preserve aspect ratio for different breakpoints.

[Nic727]

Why would you need to do that?

It's my teacher to have a HD video for desktop and low definition for mobile. I know that in real situation to create website, you just use one video or a YouTube/vimeo one.

[dsonesuk]

It depends, width when landscape compared when width by portrait, you would need to identify device width and height to determine which video to load, example 640 by 360 device, do you use larger or smaller size video, remember you can view it landscape or portrait view, it can by your description move from to the other on the same device. So you'll probably want to check the smallest width of the two first.

[Ingolme]

You can detect the window's width using the innerWidth property. This page has a cross-browser solution as well: http://www.w3schools.com/jsref/prop_win_innerheight.asp

So what you would do is:

 

if( window width is 600 or less) {

Change video source to small video

} else {

Chang video source to large video

}

[dsonesuk]

OK! We have establish the retrieval height and width of window using innerWidth and innerHeight. But! You still have the potential problem of loading large hd movie for mobile device whose landscape is greater than 600px compared to portrait less than 600px such as 480, so checking width only is not enough, you need to check both.

[dauruk0512]

i don't know about video but might be it can use full for video like ingolme said

if($(window).width() < 600){ //execute for window small 

}else
{


}

 

[dsonesuk]

LOOK devices that have a width greater than 600 when viewed landscape, but! Have a portrait view of 360 WILL LOAD BOTH HD OR LOWER QUALITY depending on the view, SO you need to establish if the overall dimensions of this device warrants a HD quality OR Lower quality.

 

I.E. if width OR height <= 600 load Low quality ELSE load HD quality.