So, on my website there are going to be mulitple videos all with different content that has been submitted by users and uploaded to the site.
Some videos that users have uploaded have different frame widths and heights.
For example:
(Video 1) - Frame width: 1280.
(Video 2) - Frame width: 480. Frame height 360.
The problem is that when a video with a different frame height is used, the actual HTML5 video itself changes it's height. It get's smaller or larger, I do not want that, I want all videos to remain the same size regardless of the video frame height.
Like Youtubes, all of the videos are exactly the same width and height, I want it like thiers.
To give you guys more of an idea of what I mean, I've gave a link below to the html file:
https://mega.nz/#!oMpwDQ7a!r5wO1GfG0c5Gj5dd5xE8pk1Udl5GxoaQ37pDwLAgcXk
.
Note: I have tried almost everything, changed CSS code 1million times, tried 3rd party apps, nothing is giving me what I want.
Best regards, thanks.
In order to have all videos be the same size, you will need to either stretch the video (typically bad, don't do this) or add bars to the top/bottom or sides to show the original video dimensions. With html5 video, all you need to do to achieve this is apply a width and height to the video tag.
<style type="text/css">
video{width: 500px;height:300px;position:relative;margin-top:-20px;}
video:hover{cursor:pointer}
</style>
Try this in your source file, it will cause all your videos to be the same size, and will simply add bars to the files to make them all take up the same space (note how it adds to the top/bottom on one, and the sides on the other).
Even youtube does this if you video file is of a different aspect ratio (you'll notice black bars on those youtube videos, ex: https://www.youtube.com/watch?v=2Or1Ui7yM7Q this video was shot on a square monitor, and is not widescreen aspect).
Related
I'm using the picture element with srcset so the same image but with different resolution is downloaded based on the device screen size.
It's max-width: 100% on the image's styles so when it downloads it forces the content below to move.
Is there any way to tell the browser to reserve that space using CSS when using srcset?
I'm also interested on a JavaScript answer if it's not possible.
Thanks.
You could set the image height based on the image width. So the only thing you need to know is your cameras aspect ratio. If the images have different proportions, weve got a problem...
ratio=9/16;
window.onload=window.onresize=function(){
Array.prototype.forEach.call(document.getElementsByTagName("img"),function(img){
img.height=img.width*ratio;
});
};
I am creating a photo site - I uploaded a photo of myself which is actually incorrectly oriented (the image is rotated 90 degrees counter clockwise). I have uploaded this image from my iPhone, which apparently has the image stored this way on purpose.
On my site, the HTML page has rendered a JSON object that contains the URL to the photo as well as the image dimensions. I am using jQuery mobile - and onload of the page I put a link on the page, and when you click the photo it displays the photo as a popup. The popup renders an <img> tag with dimensions that are small enough to fit the image within the current viewport width/height. It calculates the dimensions using the JSON I previously mentioned, and the results from $(window).width() and $(window).height().
On desktop - the photo correctly displays in the wrong orientation (because that is how the photo is actually stored).
On iPad & iPhone - the photo is auto-rotated so the photo is correctly oriented, but the dimensions are all wrong so the photo is all stretched out and distorted.
I would like to know the following:
Is this a commonly known feature of browsers on iOS or other devices?
Is there a way to disable this functionality using CSS or Javascript?
Is there a way to detect that it happened and correct the dimensions of the <img> tag? I don't mind that the photo's orientation was corrected by the browser, I just want the dimensions to be proper.
EDITS
Making the Title more in the form of a question - Also reformulating the question to be more direct
MORE EDITS
Here is a JS Fiddle with an example: http://jsfiddle.net/5JKgn/
If you click the link on a desktop computer, the popup shows the image improperly oriented. If you click the link on an iPhone or iPad, the popup shows the image properly oriented, but the dimensions are wrong so the photo is stretched.
In the real scenario, the JSON is rendered by PHP code which can read the image and outputs the width height from what it gets using getimagesize()
OK I'll try to answer this one:
Yes that's on purpose iOS stores the display-orientation in the EXIF data (among things like resolution, shutter, GPS etc.) but saves the image data in device-orientation.
For more info on EXIF see Wikipedia.
Not that I know of.
Yes, you should be able to access the EXIF data and determine orientation and dimensions.
Nr. 3 needs a little more explanation:
You could use a library like this one to access the EXIF data from javascript (includes jQuery plugin).
The Orientation Tag is defined as: 0x0112 : "Orientation" and stored as a number.
Using that information you can determine the orientation:
Value | Orientation
------|----------------------
1 | horizontal (normal)
2 | flip horizontal
3 | rotate 180°*
4 | flip vertical
5 | transpose
6 | rotate 90°*
7 | transverse
8 | rotate 270°*
* rotation is counter clockwise
That should enable you to at least swap width / height for your <img> if need.
Please not that the EXIF data also includes the width and height so if they differ from what you think they should be that could also help to identify rotation issues.
To formalize my comments - perhaps you can just sidestep the issue:
If you don't need to store exact originals, you could rotate the data when storing/retrieving the image.
Or, as the OP noted in response, just remove the EXIF tag, and browsers will no longer be able to use it for 'fixing' the orientation.
(p.s. Always remember to ask 'why' enough times to figure out what problem you're actually trying to solve :D)
You don't need to us Javascript to explicitly set the height/width of the image on load. Remove the part of your script that's inserting those inline height/width styles and just add the following to your stylesheet:
.ui-popup-container {
width: calc(100% - 40px); /* simulates a 20px margin */
}
.ui-popup-container img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
Here's an updated Fiddle
Use media queries for desktop browsers and set the css for the images to 100% height and auto width.
#media (min-width: 900px)
{
img {width:auto; height:100%;}
}
You may even consider using these variables instead of calculating them for the mobile site
I have a rtmp video stream which is dynamically changing it's resolution and aspect ratio during the process of streaming and i wish to somehow play it on a web page.
For this purpose i have chosen a flowplayer solution, but it is not detecting video aspect ratio change during the process of streaming, though does that perfectly when flowplayer initially loaded and fetched video the first time (e.g. after reload of web-page with flowplayer on it). I wish to enable it do dynamically detect aspect ratio of the stream, changing it on-the-fly.
How it is possible?
I have tried different flowplayer' clip' scaling options, but they are affecting only the initial loading stage and constant all the time later.
Got it. Had to do the following thing in clip definition, now clip is resizing properly:
clip: {
onMetaDataChange: function(clip) {
clip.update({scaling: 'fit'});
},
... rest of the options ...
}
I am trying to set up a HTML5 video player using video.js and Flat UI by DesignModo. I have the problem that I need to make the video player responsive, so the width needs to be 100%.
The problem is that then when this is set the height of the video is always the same as you can see in this fiddle. So what I need (I think) is a script which detects the aspect ratio as the aspect ratio will change. I found a script like that over here however it is designed for iframe videos like YouTube or Vimeo.
I attempted to modify the script by changing the value of $allVideos to $("video[class^='video-js']"), but it does not seem to have worked. Can anyone have a look at my Fiddle and try and tell me what's wrong and how to fix it?
By the way, I know that the links to the font files and image(s) are turning up 404, thats because at the moment the files are not hosted on my server, I have just been testing them locally.
Just remove the height: 100%; from .video-js .vjs-tech. And this take aspect ratio automatically from given width 100%.
For a site, I need to be able to dynamically display background images depending on the user's screen resolution.
I.e when the page starts loading, within the <head> a small javascript loads, which sets the page's background via css to something like http://example.com/backgrounds/beach_800x600 where 800 and 600 is the screen resolution determined via the javascript.
I'm creating various resized images for the most common screen resolutions, so that for most people there will be an exact match of their screen resolution with an existing image. If there's not an exact match made, e.g if a user has a screen resolution AxB for which there's no existing image, then an image will be created & resized to AxB on the fly, and will be served. From then on, anyone with the resolution AxB would be served that image.
The questions I have are:
1) Is this a safe method? I.e I don't want more than 50 custom sized images created for custom screen resolutions. Would I be able to stay in that ball park with this method? And are there any other security risks I should be aware of with this method?
2) Should I give it an error margin of say 50 or 100 pixels, so if someone's resolution is 700x900, and I don't have that but I have 600x800 or I have 800x1000, then I would serve those existing images rather than create new ones? If so, should I set the margin at 100 pixels or is there a better number?
Through the use of CSS3 Media Queries and the background-size property, there's virtually no need for JS other than for compatibility purposes with out-dated browsers.
Here's a link with details about background-size. This property allows you to scale the image in various ways, regardless of the users resolution. Sometimes this might not be ideal.
And so we have CSS3 Media Queries. With these, you can target certain resolutions (or greater than and less than certain resolutions) and tell the browser which image you would like to show accordingly (or even how to display it, with or without background-size as well).
You would probably not want to create an image for each screen resolution, and you would probably want to base it off the browser window size - not screen resolution. Given that a window could be virtually any size, you might want to re-think this.
Also this can be done easily using CSS3 media selectors, not JavaScript (though it could also be done using JavaScript).
See here for some info about media queries http://webdesignerwall.com/tutorials/css3-media-queries