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.
Related
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.
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
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
i'm using videodisplay to play a rtmp stream, streamed video is 800X600 which also the size of the videodisplay.
but when it starts to play a black area appears on both top and bottom of the video.
attached image shows what i mean
Depends on the ratio of video, but I think you can use something like this:
videoDisplay.scaleMode = ScaleMode.STRETCH;
or
videoDisplay.scaleMode = ScaleMode.LETTERBOX;
Update :
So in this case I think setting maintainAspectRatio as false within your <mx:videoDisplay /> will help you, Although the main purpose of that is maintaining the original aspect ratio while resizing the video.
Using a combination of HTML and JS, how could I detect whether a device is in landscape or portrait and then change the size of an embedded video accordingly?
I know a fairly easy way to detect the screen orientation is to compare the width to the height and see which is larger. But how could I then use these variables in the code for embedding the video? The code is from Vimeo:
<iframe src="http://player.vimeo.com/video/15813517?title=0&byline=0&portrait=0" width="320" height="480" frameborder="0"></iframe><p>RCE: A Different Kind of Experience from John D. Low on Vimeo.</p>
You can actually do it without JS by resizing the iFrame windows using CSS. Look into CSS3 media queries. They allow you to set different layouts based on browser size, and work with most modern browsers.
W3C spec: http://www.w3.org/TR/css3-mediaqueries/
Good ALA Article: http://www.alistapart.com/articles/responsive-web-design/
Another resource: http://www.thecssninja.com/css/iphone-orientation-css
An easy way to get started with them is to use something like the Less Framework: http://lessframework.com/
I would reference the window height and width in javascript.
var h = window.innerHeight;
var w = window.innerWidth;
When the height is larger the device is portrait and vice versa. Then size the video width to 100% and grab the actual pixels of the width of the video in javascript then divide the width by the ratio wanted to get the height.
I would use something like to detect change.
(function oriChange(window){
var h = window.innerHeight;
var w = window.innerWidth;
if(h > w){
//portait
}else{
//landscape
}
setTimeout(function(){oriChange},500)
}(window))