Skip to main content
Participating Frequently
August 27, 2012
Question

StageVideo on iOS resize on orientation change issue

  • August 27, 2012
  • 1 reply
  • 2037 views

I am using the SimpleStageVideo library by Thibault (http://www.bytearray.org/?p=2571) in an iOS app, using Starling for graphics and switching to a StageVideo player for videos. Here is the behavior I am seeing:

The video opens from portrait mode, every time

When video opens in portrait, video viewport is centered correctly and video stretches to fill the screen with the correct aspect ratio

When I turn to landscape mode, video rotates but does not scale up properly. It shows up in the correct x and y position, but is not large enough to fill out the screen.

This is a strange behavior because the SimpleStageVideo class handles these resizes properly as far as I can tell. On the orientation change I am listening to, I get the new stage dimensions and send the SimpleStageVideo object a resize command. The resize command sees the correct screen size, sets the StageVideo.viewPort property correctly (as the trace statements show) but the video is still not the right size. I'm not really sure how to fix this because the only size-related property you can set on StageVideo objects is the viewPort which isn't doing it for me. videoWidth and videoHeight are read-only. Has anybody seen an issue like this?

I have attached screen shots, hopefully they are clear on what the issue is. According to my trace statements, the viewport in portrait is Rectangle(0, 300, 640, 360) which is correct, and in landscape it is Rectangle(0, 50, 960, 540) which is also correct.

thanks for your time!

Nick

This topic has been closed for replies.

1 reply

Participating Frequently
August 28, 2012

Here is some relevant code from my project:

protected function onOrientationChange(event:StageOrientationEvent):void {

if (_ssv) {

                if (stage.deviceOrientation == StageOrientation.DEFAULT || stage.deviceOrientation == StageOrientation.UPSIDE_DOWN) {

                    trace("portrait!");

                } else {

                    trace("landscape!");

                }

               

                // if not iphone, use stageWidth & stageHeight

                if (_device.indexOf("unknown") != -1) {

                    _ssv.resize(stage.stageWidth, stage.stageHeight);

                } else {

                    _ssv.resize(stage.fullScreenWidth, stage.fullScreenHeight);

                }

            }

        }

public function resize (width:uint=0, height:uint=0):void

        {   

            try {

                _width = width, _height = height;

               

                if ( _stageVideoInUse )    {

                    _sv.viewPort = getVideoRect(_sv.videoWidth, _sv.videoHeight);

                    trace("                                                                   final viewport:", _sv.viewPort);

                } else {

                    _rc = getVideoRect(_video.videoWidth, _video.videoHeight);

                    _video.width = _rc.width;

                    _video.height = _rc.height;

                    _video.x = _rc.x, _video.y = _rc.y;

                }

            } catch (e:Error) {

                //trace("failed to resize SimpleStageVideo");

            }

        }

private function getVideoRect(width:uint, height:uint):Rectangle

        {   

            var videoWidth:uint = width;

            var videoHeight:uint = height;

            var scaling:Number = Math.min ( _width / videoWidth, _height / videoHeight );

            videoWidth *= scaling, videoHeight *= scaling;

           

            var posX:Number = stage.fullScreenWidth - videoWidth >> 1;

            var posY:Number = stage.fullScreenHeight - videoHeight >> 1;

           

            // check to see if it is a pc, then swap

            if (DeviceDetector.getDevice().indexOf("unknown") != -1) {

                posX = stage.stageWidth - videoWidth >> 1;

                posY = stage.stageHeight - videoHeight >> 1;

            }

           

            _videoRect.x = posX;

            _videoRect.y = posY;

            _videoRect.width = videoWidth;

            _videoRect.height = videoHeight;

           

            return _videoRect;

        }

sinious
Brainiac
August 28, 2012

I assume _stageVideoInUse is true and you're getting the trace("                        final viewport:", _sv.viewPort);, what is the value it is returning? What does _sv.videoWidth and _sv.videoHeight trace out to? Also check stage.fullScreenWidth/Height are what you expect.

sinious
Brainiac
August 28, 2012

_stageVideoInUse is true and getting both hardware decoding and compositing. Testing on an iPhone 4. The final viewport in portrait mode is Rectangle(0, 300, 640, 360) and in landscape mode it is Rectangle(0, 50, 960, 540). These numbers are correct and as you see they are tracing out after the viewPort is set.

The _sv.videoWidth and _sv.videoHeight are tracing out to the video's correct physical dimensions. The video file is 960 x 540, it is correct with a video in 1280 x 720 and I also tried one at 640 x 400.

I have also checked the stage.fullScreenWidth and fullScreenHeight, they are showing up correctly, as in landscape width=960 and in portrait height=960.

I also thought this could be a conflict with Starling as I am using that for my graphics. However I am stopping and hiding starling when I run the video. I also tried running just the video and removing the starling instance from the application all together, unfortunately to no avail.


The numbers look good. I grabbed his version 1.1 and I see you're pasting the code directly from his classes, although there are some differences. For instance his v1.1 doesn't use the PC detecting DeviceDetector.getDevice() code and such. Are you using v1.0 or v1.1 and are you modifying it yourself otherwise?

Some issues will kill hours, days and sometimes weeks of time for no good reason. Why not make yourself a quick StageVideo test app that uses StageVideo directly to remove SimpleStageVideo from the mix. Just handle the orientation change yourself and set the viewPort and see what happens. Even use hard coded numbers for speed. I haven't had any issues myself with StageVideo on iPads and despite that page saying StageVideo can benefit from a wrapper it's a little bit of a stretch to say it's complicated.

I don't think Stage3D (Starling) is complicating things or at fault as I've used StageVideo and Starling myself in harmony. I can't speak for iPhone however, just Android phones and iPad.