In my application, I am keeping so much of container with components. Now I have to create Fullscreen button for VideoDisplay. I tried some what like the followings
systemManager.stage.displayState = StageDisplayState.FULL_SCREEN;
And
this.stage.addChild(videoDisplay);
this.stage.displayState = StageDisplayState.FULL_SCREEN;
videoDisplay.width = stage.width;
videoDisplay.height = stage.height;
But no use.
Is any other way is there to do it?
If your app is going to fullscreen but your video doesn't then you should probably resize it using size of your full screen:
videoDisplay.width = stage.fullScreenWidth;
videoDisplay.height = stage.fullScreenHeight;
But since your video will probably deform when adjusting to different screen dimensions (3:4, 9:16 etc) you should resize only one side and adjust the other like this:
videoDisplay.width = stage.fullScreenWidth;
videoDisplay.scaleY = videoDisplay.scaleX;
Add the videodisplay object in a group and on fullscreen button click remove the video display from group and increase the group height and width according to screen resolution.
Then add the videodispaly object to the same group and set all the property like height = 100% width = 100% , etc
If its not working use videoplayer instead of videodisplay
Related
I am trying to rotate video in default video player in adobe flex by doing:
videoPlayer.videoDisplay.rotation = 90;
It rotates the video but does not change video width and height. It still displays with small width.
I tried changing video width like:
videoPlayer.videoDisplay.width = 600;
But with no success.
Is there any solution for that?
I think that the solution for that is to resize your VideoPlayer and then you can rotate the VideoPlayer.videoDisplay like this :
videoPlayer.width = 480;
videoPlayer.height = 270;
videoPlayer.videoDisplay.rotation = 90;
Hope that can help.
At the end i tried following and conclude with as a solved:
videoPlayer.scaleMode = "stretch";
It will take resize video with full width of the player.
I want to publish videos using Video JS player, but cannot get it to scale in response to different screen sizes.
On the Video JS homepage, the demo video scales (looks like from 970px to 600px width). But the code you get if you hit the "embed this player" button does not scale. Here is that code in action:
http://www.casedasole.it/video/index.html
In the embed code, the size of the video is specified (640 x 264), but the demo page code gives no size for the video element. I've looked at the source of the video js page, but there's too much going on (13 scripts and 4 stylesheets) to track down what's making it scalable. There's also no video js forum, so they recommend asking here.
Anybody know how it can be done?
It comes from http://www.video-js.com/js/home.js l72
videojs("home_video", {"height":"auto",
"width":"auto"}).ready(function(){
var myPlayer = this; // Store the video object
var aspectRatio = 5/12; // Make up an aspect ratio
function resizeVideoJS(){
// Get the parent element's actual width
var width = document.getElementById(myPlayer.id()).parentElement.offsetWidth;
// Set width to fill parent element, Set height
myPlayer.width(width).height( width * aspectRatio );
}
resizeVideoJS(); // Initialize the function
window.onresize = resizeVideoJS; // Call the function on resize
});
You can make video.js player scalable by using media queries. On smaller screens, change the css of video js controls by media queries. This worked for me.
I am having problem setting the stage height and width for the app i am developing.
I need to set the height and width as for the screen of the device it is on. So i do stage.fullScreenHeight and stage.fullScreenWidth.
But i just realized that the fullScreenHeight and width it is setting is the size for the stage inside flash pro cc under properties(the stage size).
And i am not able to make the stage width and height according to the phone's. Even if i do Capabilities.screenResolutionX; or stage.stageHeight. All of them set to either the size of the image, or the stage inside flash pro, but none is according to the device.
Edit:
E.g. var button = Button = new Button();
button.width = stage.stageWidth;
button.height = Button.width/stage.stageWidth * Button.height;
Try stage.scaleMode = StageScaleMode.NO_SCALE
or unchecking "full screen" checkbox in your Air settings
Basically, I have a div that contains my entire website. it has a height of 625px and a width of 1250px. Is there any way to resize this while keeping the scale when the browser window is resized or its used on a mobile/tablet? I know someones gonna say use % instead of px but I have a very controlled UI.
Also is there anyway to bring up a pop up when the websites used in a certain browser?
Thanks
The best and most straightforward answer is to use %, simply because this is the intended use. I'd really advise you to rework your layout so the percentage sign can be used.
If this does not work for you, there is always Media Queries http://www.w3.org/TR/css3-mediaqueries/ or Javascript as pointed out by #sable-foste and #abdul-malik.
For whatever reason you are doing it you can use this (using JQuery):
$(window).resize(function() {
resizeSite();
});
function resizeSite(){
var winH = $(window).height();
var winW = $(window).width();
// you will want to do some stuff here for deciding what to do and when...
// when the window size is too small shrink the site using your ratio
// when the window is larger increase the size of your site i.e.
// Height = Width / 2
// Width = Height * 2
var tgtW = winH * ratio;
var tgtW = winH * ratio;
$("#siteContainer").height(tgtH).width(tgtW);
}
And add a call to the function on load as well. I think doing this would probably create you even more issues though as this would just shrink the size of the containing element, what happens to the content of it? If it was scaled down to fit on a mobile phone in portrait the display would be tiny and pointless, what would the layout inside it be?
I recently made and hosted Catifier.com.
It's working pretty good, except I have a bug with saving I have to work out, and it stretches images when you set them as the background.
Portrait images look horrible.
Would it be possible to detect the width and height of the image a user pastes in the box, then resize the canvas accordingly?
You have to load your picture in a DOM element to know its size.
So basicly when you want to do it, here are the steps :
Add your picture in an invisible DOM element.
You will be able to get picture width and heignt when onload event is lauched.
Then create your canvas depending those two variables.
All can be done in very few javascript lines.
Just gonna write up a very generic and likely not fully functional way to do this real quick just to give more of an idea.
var img = document.getElementByTagName('img');
for (var i = 0; i < img.length; i++) {
var width = img[i].width,
height = img[i].height;
// do some stuff with the img[i] width and height here if you like. for each image on the page...
}
Not how you'd end up actually doing it but it's just as simple as doing, img.width or height. If that helps more at all.