I have this movie that is in 4:3 ratio. The properties clearly say 1920x1440, however, what's puzzling me is the Video codec below. The actual played video indeed has dimensions of 1920x1440 as seen in the screenshot.
H.264/AVC 1920x1080 (4:3)
What does it mean and how is that possible?
What is the actual resolution of the media file?
There are several terms defining aspect ratios in a video stream like Pixel Aspect Ratio (PAR), Display Aspect Ratio (DAR), Storage Aspect Ratio (SAR).
And yes, video might encode non-square pixels, in which case you may see disparity as in your case, when physical resolution of the video has 1920x1080 dimensions (16:9 aspect ratio), but displayed at different proportions (4:3 in your case). I don't know why player (which one?) shows 1920x1440 - I guess it is an internal implementation detail of a particular video player stretching an input video into a larger resolution to show it with designed proportions; another video player would do this in a different way.
Non-square pixels were very common in DVD times due to limitations of hardware of that time. Nowadays, such video streams occur very rarely.
Related
I have an image similar to this one
And I'd like to insert a video in it and keep its ratio when reducing the size of my screen.
Only the width needs to be responsive as it'll be shown in portrait on mobile.
I have no idea how to do that using CSS. I tried using an absolute position and some percentages, but when resizing, the ratios are not really respected and the video becomes smaller
If you can use the open source HTML5 video player, videoJS, it support a 'Fluid' mode which will allow you set a chosen aspect ratio to be maintained when the video resizes.
They provide details including configuration here: https://docs.videojs.com/tutorial-layout.html
An example configuration:
var player = videojs('vid2');
//Set fluid mode
player.fluid(true);
//Set aspect ratio - 1:1 is square in this example
player.aspectRatio('1:1');
//Set UI to be responsive
player.responsive(true);
We currently have our webRTC video chat in beta, and we have noticed a strange issue with the aspect ratio of the video changing.
When we request video using the following.
navigator.mediaDevices.getUserMedia({video: { deviceId: { exact: deviceId }, height: 300, width: 400 }})
everything starts off fine, but we have received feedback that users are seeing video "stretching" for a few seconds before returning to normal. We have managed to replicate this locally by pausing the video feed, through inspecting the video it seems that the aspect ratio changes from 400x300 to 300x150 (which coincides with the intrinsic values here https://www.w3.org/TR/2011/WD-html5-20110113/video.html#video).
Can anyone think why this would be happening?
Your application is expected to handle video of any aspect ratio and resolution.
For starters, the stream you get with getUserMedia may not be the size you request. 400x300 is not a normal resolution, and not all browsers are going to crop or scale what they get from the webcam to accommodate your application. Even if you did use something more common like 640x480, there is still a chance that the camera doesn't support it and will send video at a different resolution.
Next, particularly with mobile devices, rotation can occur so your video that was originally 4:3 aspect ratio could now be 3:4. These resolution changes happen mid-stream without any warning.
Finally, due to changing bandwidth or CPU conditions, the browsers can choose to scale the video at any time. Maybe one of the devices starts to overheat or has a low battery. This can cause sporadic video scaling. I've never seen it change aspect ratio when this occurs, but it sounds plausible, especially when using oddball video sizes.
Consider setting the following CSS on the video element for which you're playing video:
object-fit: cover;
If you need to actually get the height/width, use the videoHeight and videoWidth properties of the video element.
I've a brief question that I'm sure some AS3 genius knows.
I'm surprised I haven't seen any other topics on this after 30 minutes of Google-fu, StageVideo seems to be largely silent.
So I've been trying out the StageVideo API in place of traditional Videos for better video playback. This is for a Flash video streamer I am creating. While I'm quite certain the only videos I'll be using it for are 16:9, I'd like for it to be versatile enough to handle other aspect ratios. So for those other ratios, how do I center the video that's shown in the StageVideo object? I just want it to be letterboxed - no scaling, zooming, or cropping.
Changing the viewPort stretches the video to fit it, which is not what I want. And the videoHeight & videoWidth properties are read-only, so it's not like I can just change those to force the video to sit back. I read on the documentation that the video aligns to the stage's top-left, maybe I can change this?
Can I center videos in StageVideo? Is this not possible, and if so, must I use a regular Video object?
Thanks for any help you can give me
Can't believe I didn't see this - I just needed to change the start x & y of the Rectangle for the viewPort. Guess I forget how Rectangles worked briefly.
So this is weird. I was experimenting with html5 video tag. Your snapshot photo of the trailer is defined by video poster="megafon2.png" width="640" height="360"
Why is the second video smaller than the first? I thought the video will be the dimensions of the poster image you define. If I remove the width and height, you will see the second video go bigger. Maybe is it because of the video format? Is it more like a square?
http://www.2kfilms.com/services_megafon.html
The two videos are both bigger than the space allocated for the <video> element (1280x720 and 720x576 respectively) so the browser will attempt to scale them to fit.
For the math to fit it means that the second video ends up being adjusted more.
If you align the size of the media element closer to the source video(s) so the aspect ratio can be maintained while scaling you should see a more consistent result
The image of the card on my site (bottom right) displays differently in Chrome and Firefox. In Chrome, its ratio is preserved, but the ratio is twisted in Firefox.
How can I apply a constant resize of the image itself, cross-browsers (basically do what now happens for Chrome)
You've got the following in your image tag:
width="100%" height="40%"
Try specifying just one of those (I would suggest the width) to maintain the aspect ratio, otherwise the image will be stretched or squished one way or another to fit those dimensions on the less thoughtful browsers.
Ideally you want to avoid allowing the browser to resize the image. Different browsers achieve varying levels of quality which never compare to what you can achieve with a dedicated digital image editor (Photoshop, Paint.NET, etc). Best to resize it to the desired dimensions before publishing then explicitly set the actual height and width in pixels.