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.
Related
Hey SO members,
I want to play back and forth a HTML5 video along with the scroll. The animation controls the video frame by frame regarding scroll amount.
I coded (it's lightweight and very simple) this using scrollMagic. The embedded video are lightweight as well (tried ugly/over downscaled videos with same results).
The issue i'm facing is that when you gently scroll, the animation looks barely smooth.
But when scrolling "fast", it's like many frames are dropped.
I would guess it could be normal, should the progress percentage drop from 50% to 75% for example. But it's not. The percentage displayed in the console shows that percentage value updates smoothly, some frames are not painted and result as a chopped animation. I'd like it to be smooth, no matter how fast the user scrolls. Any thoughts ?
https://jsfiddle.net/yumigo/h7g081n6/72/
I eventually figured out that the video is the key.
The MP4 needs to have a keyframe interval very low (2 in my case, instead of usually 10) to ensure smooth scrolling, especially when scrolling up.
Also, load the mp4 first as webm playback seems more CPU intensive.
Perfectly smooth now.
I updated my jsfiddle.
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'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'm currently developing a Flash website that incorporates an flv player. The controls on the player's skin are all vectors.
I've set it up so that when you hit fullscreen on the player controls a fullScreenSourceRect is created which is working great.
However when the the player is full screen, the once crisp vectors are now pixelated as if they were a bitmap.
I'm hoping I'm just missing a property somewhere that scales the vectors properly.
Thank you!
set video.smoothing = true;
Flash often creates bitmap of display objects for faster rendering. You may have to check the cacheAsBitmap property on some of the components and make sure it's set to false when the stage is full screen.
Fixed by rebuilding the fullscreen code so the video player get's set to stage height and width rather than zooming a rectangle.