I noticed if you upload a video to Vimeo via the api, and the resolution is something non-standard, it will normalize the height during transcoding. Ie, I had a video that was 1920x1050 (NOT 1080), and vimeo normalized it to 1906x1080.
Is there a finite list of heights that Vimeo normalizes to? Or is it a function that can produce any number of different heights?
This might seem simple for 16:9 videos, but what about vertical phone videos? What height do those normalize to?
Thanks
The logic behind the video dimensions generated by Vimeo's transcoders is documented here: https://vimeo.zendesk.com/hc/en-us/articles/224820827-Determining-playback-resolution
Related
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.
I have html5 video tags of videos.
On chrome all is good, on firefox the orientation of landscape videos is wrong...
Even tried using video.js, no change.
I read that this is a problem because the videos originated in iOS.
so 2 questions:
1. How can I still overcome this issue. Really there is no solution?
2. (out of curiosity) - how does chrome manage to overcome this?
Example of a URL (scroll down a bit in the chapters to see a vertical video):
http://www.letsfeedme.com/moments/55802f142f2dad3c008b4575-Balsamic-Vinegar-%22Caviar%22
I read that this is a problem because the videos originated in iOS.
All videos recorded using mobile devices will contain rotation metadata including those from iOS and Android devices. It can take 4 values: 0 (tilted left), 90 (portrait), 180 and 270:
On chrome all is good, on firefox the orientation of landscape videos is wrong...
Firefox and IE 10 are the only major browsers not supporting the rotation metadata. Here's Firefox compared with Chrome:
The latest version, Firefox 42 as of today, still does not support it. IE11 and Edge 12,13 do support it.
List of mobile/desktop players that support the rotation info: https://blog.addpipe.com/mp4-rotation-metadata-in-mobile-video-files/
How can I still overcome this issue. Really there is no solution?
See this answer for the solution, basically you need to :
rotate videos using FFmpeg (so Firefox and other browsers that do not support the rotation metadata show the video properly)
remove the rotation metadata (so that other players don't rotate the video since it's already been rotated by FFmepg)
Images courtesy of: https://blog.addpipe.com/mp4-rotation-metadata-in-mobile-video-files/
Since the problem is with some iOS specific encoding options, which many NOT-Apple Players can't read, the easiest solution I can think of is to trancode and rotate the video.
Which was already discussed in oh so many posts on the web and here at SO... e.g.:
Video orientation using video.js
HTML5 mp4 video with firefox resizing video
Chrome HTML5 Video Flipping Portrait Sideways
http://help.videojs.com/discussions/problems/1508-video-orientation-for-iphone-wrong
I am guessing that Chrome is respecting the width="360" and height="640" attributes of your <video> tags, while Firefox is not. If I download one of your videos and play it back in Media Player Classic, again the orientation is incorrect. But just like in web browsers, there are inconsistencies: the same video opened in VLC player plays back with the correct orientation.
I would recommend that, if you can, you re-encode the videos using a (free) program called AVIdemux. I just tried it on one of your videos, and it worked well with minimal effort. As a bonus it shrunk your video down considerably, with only minimal quality loss.
Here are the steps:
Download AVIdemux from http://www.fosshub.com/Avidemux.html
Install and run AVIdemux
Go to File menu and choose Open. Pick the video to re-encode.
Go to Video menu and choose Filters
Choose Transform > Rotate (double-click) > Rotate by 270 degrees (OK)
Click the Preview button to check the output
Click the Close button
In the main window, under Video Output, choose MPEG4-AVC (x264)
Under Output Format, choose MP4 Muxer
Click the Save Video icon, and in the resulting window type a filename and click the Save button.
Then you will need to re-upload your video.
Probably not really a viable solution but adding a CSS rule such as
video {
-moz-transform: rotate(90deg);
}
would at least make the videos play back in the correct orientation in Firefox. Problems with this:
videos that play back in the correct orientation without the rule will play back in the wrong orientation with the rule
the video controls also get rotated
the posters will display in the wrong orientation
I see your site uses video.js. It might be worth looking at https://github.com/xbgmsharp/videojs-rotatezoom ?
I'm about to create a mobile website using HTML5 and want to use the HTML5 video tag.
I want the website to work with iPhone, iPad, Android and other smartphones/devices.
Which video format should I choose? mp4?
Which size should i use for width and height to get the best result?
Which FPS (frames per second rate) should I use for the videos?
Thanks in advance.
Those are pretty subjective questions, so I'll give you some rather subjective answers:
I have made good experiences (hope others as well) with serving 3 media types: H264/MP4, OGG and WEBM for <video> elements, at least this combination worked fine on all devices I was able to check by now.
In case you also want your video to be displayed inline on desktop browsers I'd say you should use the dimensions that are dictated by your layout. In case you are looking for a mobile only solution, a common resolution for 16:9 content would be 480x270 (that's what Quicktime Pro exports when you select "Save for iPhone"), if you are planning for tablet support as well you might want to serve alternative content for them.
The lower the frame rate, the smaller the file, so you'll have to know by yourself how much filesize matters, the only thing I could advise would be using a full fraction of your original video frame rate (ie. 12.5fps if you want to reduce a 25fps source) as otherwise you'll get jittery drop-frame effects.
Also please see the great video section of Dive into HTML5
I'm trying to build a very simple proof-of-concept for the guys I work for to demonstrate something for them. As of right now, I've got everything working, except that in my (obviously extremely crude) website, I'm trying to embed a video and FORCE the video to completely fill a certain size. The main problem that I'm facing is that if I try to embed a video with:
<video width="1920" height="1080">
then it increases the size of the video screen (though not to those actual dimensions - it stops at a much smaller size), but keeps the actual viewable video size at the original dimensions and just adds a lot of black space into the video player.
Clearly, this isn't the right way to do this. I know HTML is usually regarded as pretty easy, but this is literally the first webpage I've had to do, haha. Any help is greatly appreciated!
I found this # http://www.w3schools.com/html5/att_video_height.asp
Note: Do not rescale video with the height and width attributes! Downsizing a large video with the height and width attributes forces a user to download the original video (even if it looks small on the page). The correct way to rescale a video is with a program, before using it on a page.
So guess you can't scale up a video with width and height tags. Just define it's dimensions so the browser can reserve space for it while loading a webpage.
I have the code
<iframe width=150px height=150px src=http://yahoo.com></iframe>
Here I will have a 150x150 iframe, but I want the whole site to be reduced to a 150x150.
Is it possible to do it.
Thanks
Jean
Not really (read: not cross browser). Internet Explorer supports the zoom CSS property which might work, but AFAIK no other browsers support it.
From the details you've given it looks like you're trying to get a thumbnail of a site. Have you considered using a thumbnail preview service like WebSnapr or SnapCasa?