Flex 4.5.1 is awesome. The mobile components rock and with only a few exceptions – TextInput anyone? – they work great on Android and iOS. But there is one glaring component that has not yet been mobile optimized: the <s:VideoPlayer>. And when they say not mobile optimized they aren’t kidding. Hopefully we’ll get an update to the Flex sdk soon with a mobile optimized version but until then I’ve done a rough re-skinning of it so that you can at least use the UI controls.
You can download all of the skins here in this zip file.
Here’s the zip file contents:
- skins
- video
- FullScreenBtnSkin.mxml
- MuteButtonSkin.mxml
- ScrubBarSkin.mxml
- ScrubBarThumbSkin.mxml
- ScrubBarTrackSkin.mxml
- VideoPlayerSkin.mxml
- VolumeBarSkin.mxml
- VolumeBarThumbSkin.mxml
- VolumeBarTrackSkin.mxml
- fullscreen
- FullScreenBtnSkin.mxml
- ScrubBarSkin.mxml
- VolumeBarSkin.mxml
I did as little customization of the original skin as I could. About the only thing that changes is that the UI controls have a height of 40 pixels – I think originally it was 27px which is way to small for fingers.
The hardest thing was updating the ScrubBarThumbSkin.mxml. It just took a little trial and error to get the <s:Path data=…> all sorted out.
If nothing else this should save you some time in customizing your own skin because you won’t have to track down all of the skin files – easy but tedious.
If you use this all you need to do is use the VideoPlayerSkin as the skin for your <s:VideoPlayer>
Fullscreen exorcism
While all of the skin files for the <s:VideoPlayer> are there I removed the fullscreen button from the VideoPlayerSkin file because it doesn’t seem to work correctly. It’s fine in portrait layout but switch to landscape and it falls to pieces. Here’s some screenshots below.
Standard layout - working
Here’s what happens when you go fullscreen
Fullscreen all frakked up
As best I can tell the <s:VideoPlayer> doesn’t understand the portrait/landscape code when going fullscreen. I traced through the VideoPlayer.as code for a bit to see if the fix might be easy – specific for iPad – and couldn’t come up with anything. And my client said to just remove the fullscreen to save time/money.
Have you tested it on the phone (the full screen mode) ? Cuz I think that problem comes only on Desktop, because it takes the real screen width/height.
@Kispik Yes. It was tested on an iPad. Same results.
Hi,
I came across your post in my attempts to figure out why my spark videoplayer isn’t working when deployed to the iPad. It appears to work just fine in the simulator however when I put the app on the device and play there is no video or audio. I’m attempting to play an HTTP progressive download MP4 file (which appears to be supported by the VideoPlayer component).
Do you have any suggestions?
Thanks in advance!
@don Oy, works in the simulator but not on the device. That is about the most annoying type of problem to have. I’m sorry but I don’t have any answers for you. I don’t have an iPad myself to test on either. I’d suggest trying different videos to see if you can get anything to work at all and then go from there. Maybe that will help you narrow down the issue. Good luck.
Thanks for your reply!
After more research it appears you can’t do H.264 encoding with AAC audio on the iPad with Air 2.6/2.7. From the looks of it, though – FLV works. That was very surprising to me since it’s completely backward compared to what the iPad natively supports! Hoping for a fix to this in Air 3.0 when StageVideo becomes available for iOS devices :)
-Don
I want to thank Don for his comment about the lack of support for H.264 in flex mobile for iPad – that was the clue I needed! For what it is worth, here is my limited experience in attempting to get video working on an iPad (first generation): using Flex 4.6 with a spark VideoDisplay being fed video over http I found:
– H.264 (mp4) progressive files crashed the app
– H.264 (f4v) video did not crash the app but did not play
– regular (flv) video played fine though I only tested 400kbps video so far
By the way- is there some documentation that explains all this for the specific case of iPad development?
@GHall I haven’t tested on much but the app I was working on plays video on an iPad/iPhone. I don’t know anything about the video codex used. It’s all on the client’s server. I should ask them about that. Apparently we just got lucky because whatever they used works.
The full screen is easily fixed: Add a resize event ->
private function onResize():void
{
if (vid)
{
if (vid.isPopUp)
{
vid.width = FlexGlobals.topLevelApplication.width;
vid.height = FlexGlobals.topLevelApplication.height;
}
}
}
Enjoy
@itai Thanks.