I am trying to display arbitrary mp4 videos in a flex application. Often videos have text on them.
Sometimes when I have to scale the video down (on the client size height or width less then videoHeight or videoWidth) keeping the aspect ratio Flash Player makes text look blurry.
Is there way to tell Flash to handle scaling more accurate?
Thanks
No idea if this will work but: you can maybe try to Enable Smoothing on VideoDisplay
Related
I have a webpage where I can add multiple video streams and display them like a mosaic.
This looks like this:
The videos can be resized, but when they get too small, the bitrate will lower (the stream adapts to the size of the video) and artefacts start to become visible.
I was wondering if there was any way I could keep the videos at a fixed size (large enough to get a higher bitrate) while scaling them down for the mosaic.
I've tried using the CSS scale feature, but I couldn't achieve the desired outcome. Maybe it's not possible at all, but I'd appreciate any tips you might have (keep in mind that I'm unable the change the stream itself).
Thanks!
I would like to get all images, logos and text to always fit the screen. ie i view this on my pc and the site i see will be resized to fit my tv (screens a lot bigger)
There is a few things
1, No css code. Although i am sure it is possible with css but I know this will be possible using the tools provided just not sure how.
2, Be strait forward and not to complicated (if possible). I'm not that great with muse yet and come from just writing out the code.
First place a rectangular shape then fill it with the image you want to use... just resize the rectangular shape then...their will be a tooltip that would appear, the width and height of your image... just make the width 100%
to view the sample image just open the link below
https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xpf1/v/t34.0-12/10378250_933301960022761_4004009316023420430_n.jpg?oh=32675100ced7bafcd60a175fda3c93e3&oe=54E39025&gda=1424210970_f0641f29deca2c42c99251330aeb33c2
I am using Sprite image for my project. Which one should we have to follow horizontal or vertical? I meant to say adding side by side(occupies more width ) or one bye one(occupies more height).
Is there any width/height limitation for adding images in sprite? Is there any loading concept included?
It doesnt matter if you use horizontal or vertical ones. Just dont make them too big. Mostly 1500x1500 is enought for one sprite - then change to another.
If you think about mobiles then try to not make sprites bigger than around 800x800.
For image type i would suggest png (if have full colors and transparency) if you use some popular graphic editors option to ,,save for web'' it will be even smaller that way.
Sprites are mostly used for lowering httprequests for images - if you use many small images its always good way to store them in one bigger (just dont forget to set cache headers) so all browsers will try to cache them (and mobiles at least for the session).
According to this article it depends.
One aspect to consider is how much memory the decoded sprite map image will use consume. Here's are guidelines for whether horizontal stacking or vertical stacking will be more optimal:
For all images in the sprite, find the width of the widest image and
the height of the tallest image.
If the largest width is greater than the largest height, then a
horizontal stacking will result in a more optimal sprite sheet.
Otherwise, vertical stacking is more optimal.
It then goes on to show examples of the same images in either a vertical or horizontal sprite along with their file sizes which is quite a surprising. It suggests using Google Chrome's Developer Tools "Native Memory Profiler".
Vertical Sprite
Horizontal Sprite
In this case the horizontal sprite is best.
What is the best way to dynamically change the width and height of an HTML5 video within a webpage? The kind of behaviour I'm referring to is the same thing in the intro video of http://flipboard.com/
When the window is resized, the video still takes up 100% of the viewable size (without scrolling). I noticed that the video gets resized to a certain degree, but stops resizing and gets cropped at some point.
What is the best way to get the same behaviour? I want to have a video take up the entire viewable area of the browser without scroll bars. This is only on a desktop/laptop, I am not considering any mobile devices ATM.
What I have in mind right now is to dynamically change the width/height properties of the video to fit the viewable area using javascript, but also set a minimum size such that the video doesn't get distorted. The video can be placed in a container that is always centered, so if the browser gets to a size that is too small, it effectively gets cropped. I'm not sure if this is too long-winded and if there is an easier way.
Thank you.
It looks like they have the css properties of height and width set to 100%. If you use an element inspector like the one built into chrome or firebug for Firefox, you should be able to see exactly how they structured the html/css for the video element as well as the div its nested in. Then, as you said, also set a min-width/min-height property.
Unless I'm misreading your question, it should be that simple. Hope this helps!
you could do it with "Responsive CSS", there are some ways to do that,
you could set the viewport, max-width, min-width, etc.
This link have a nice explanation how to do that : http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/
I am developing a flash based website using mxml. My monitor's resolution is 1280x768 and is widescreen. The problem is while it appears properly in my screen it doesn't appear properly in others. Which is the best approach to solve the problem ?
I have 2 in mind.
Let scrollbars take care of it : If the screen is 14 inch screen with
800x600 resolution it appears zoomed
in. So thats a problem
Get screen resolution and resize using scaleX and scaleY : The graphic
components will get resized but fonts
give problem.
Which is the best approach among these ? If there is a better approach please mention.
Thanks
The BEST approach for this is to create a fluent UI based on percentage and constraints.
This way, the UI will feel the same on all computers not just yours.
I would recommend to also use the flow container that comes as a part of flexLib because that way is the easiest to create a fluent design.
Not long ago I created an application for a forex company that was perfectly fit to all screens larger then 1280X800 (design definition).
It's not that hard to do once you get the hang of it.
Good luck.
You can add an event listener to the stage to this effect:
this.stage.addEventListener(Event.RESIZE, resizeHandler);
private function resizeHandler(e:Event):void {
var newWidth:Number = this.stage.stageWidth;
var newHeight:Number = this.stage.stageHeight;
// etc, roll from here to do your manual positioning logic.
}
Note that this should also work on any DisplayObject - so you can use constraints and percentages on your containers, but then intercept their auto-resizing with a setup like this which will let you fine-tune the appearance of their contents.
Personally I would develop the screen for 800x600 and then dynamically resize the screen for higher resolutions.
You can use vertical scrollbars but horizontal scrolling is a big no-no in my books. It takes away from the whole experience of your site and gets rather irritating.