Nic727 Posted December 11, 2015 Share Posted December 11, 2015 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? Link to comment Share on other sites More sharing options...
davej Posted December 11, 2015 Share Posted December 11, 2015 See... http://www.w3schools.com/jsref/prop_win_innerheight.asp Link to comment Share on other sites More sharing options...
dsonesuk Posted December 11, 2015 Share Posted December 11, 2015 If you have bootstrap, you could have both on page, but use media queries to show one or the other when required. Link to comment Share on other sites More sharing options...
Nic727 Posted December 11, 2015 Author Share Posted December 11, 2015 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) Link to comment Share on other sites More sharing options...
dsonesuk Posted December 11, 2015 Share Posted December 11, 2015 (edited) 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 Link to comment Share on other sites More sharing options...
Nic727 Posted December 11, 2015 Author Share Posted December 11, 2015 ok I understand what you mean! Link to comment Share on other sites More sharing options...
Ingolme Posted December 11, 2015 Share Posted December 11, 2015 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 Link to comment Share on other sites More sharing options...
Nic727 Posted December 12, 2015 Author Share Posted December 12, 2015 I was going to say that. Now my two videos are running at the same time. Link to comment Share on other sites More sharing options...
Nic727 Posted December 12, 2015 Author Share Posted December 12, 2015 (edited) 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 Link to comment Share on other sites More sharing options...
davej Posted December 12, 2015 Share Posted December 12, 2015 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? Link to comment Share on other sites More sharing options...
thescientist Posted December 12, 2015 Share Posted December 12, 2015 My guess is the videos are sized a certain way to preserve aspect ratio for different breakpoints. Link to comment Share on other sites More sharing options...
Nic727 Posted December 12, 2015 Author Share Posted December 12, 2015 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 12, 2015 Share Posted December 12, 2015 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. Link to comment Share on other sites More sharing options...
Ingolme Posted December 12, 2015 Share Posted December 12, 2015 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 } 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted December 12, 2015 Share Posted December 12, 2015 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. Link to comment Share on other sites More sharing options...
dauruk0512 Posted December 30, 2015 Share Posted December 30, 2015 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 { } Link to comment Share on other sites More sharing options...
dsonesuk Posted December 30, 2015 Share Posted December 30, 2015 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now