Home >
I was experimenting with Flex 4 this evening, and I realized something -- Incorporating video in your application is now really, really, really easy. Don't believe me, read on...
This is a VERY basic example showing how to embed video into your Flex 4 application. There is no custom skinning or layout. It's just the basics, however it was astonishingly easy. First, take a look at the application below. It is a full featured video player that has play/pause/stop, volume, mute, fullscreen, and a scrub bar.
It is definitely more effort to get it polished and looking the way you will want it to in your final applications, but here's all it takes just to get the video into your application. This is quite possibly the most basic, yet functional application I've ever built:
Note: The original video came from here.
___________________________________
Andrew Trice
Principal Architect
Cynergy Systems
http://www.cynergysystems.com
This is a VERY basic example showing how to embed video into your Flex 4 application. There is no custom skinning or layout. It's just the basics, however it was astonishingly easy. First, take a look at the application below. It is a full featured video player that has play/pause/stop, volume, mute, fullscreen, and a scrub bar.
It is definitely more effort to get it polished and looking the way you will want it to in your final applications, but here's all it takes just to get the video into your application. This is quite possibly the most basic, yet functional application I've ever built:
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:VideoPlayer
source="video.flv"
horizontalCenter="0"
verticalCenter="0"
autoPlay="false" />
</s:Application>
___________________________________
Andrew Trice
Principal Architect
Cynergy Systems
http://www.cynergysystems.com
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
Oh, the default controls are really ugly .... Can we customize them ?
Amazing that it took until Flex 4 to include some easy to use video controls. :-)
Yes, everything is customizable.
I noticed that you still have to change the HTML template to include the allowFullScreen parameter so that the Fullscreen button actually works without a player security violation. Is there more control over this in version 4? It would be nice if you didn't have to manually edit the HTML template to do various things, such as pass flashvars parameters and allow fullscreen. I can't wait to actually use Flex 4 and Flash Catalyst. I'm very excited about what Adobe is doing and I think it will produce more work out there for us Flex developers.
That's a pretty big pay-off for such little code. Any fully skin-able? very cool!
Video in Flex 4 is definitely getting good upgrade. We're still actively working on it, and if you take a more recent build from the trunk, you'll see the skin's gotten a major upgrade (also the allowFullScreen should be in the index.template.html file). And because of the new skinning architecture in Spark, it'll be super easy to customize the skin to your liking.
Flexbuilder 4 beta soon.....pretty please. I am starting an air project and I would love to use v4. I'm still debating on my mix of flex and html and v4 may shove me one way or the other.
How come your controls show up differently than the default controls for this example, using almost identical code?
http://blog.flexexamples.com/2009/05/05/muting-the-volume-on-a-spark-videoplayer-control-in-flex-gumbo/
How come your controls show up differently than the default controls for this example, using almost identical code?
http://blog.flexexamples.com/2009/05/05/muting-the-volume-on-a-spark-videoplayer-control-in-flex-gumbo/
Joeflash,
That's the new version of the skin. The skin you see here was just a really simple skin to get the controls working and functioning. There are still some bugs in the video player that we're trying to iron out soon, and there are still a few more tweaks to the skin that need to happen.
As always, you can monitor the bugs through JIRA at http://bugs.adobe.com/flex/ , and you can download the latest trunk from http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/ .
-Ryan
I'm probably just using an older build. As Ryan mentioned above, it would look a lot different if I grabbed the latest build.
It was crazy that Adobe didn't make it easy to use video in previous versions, when its video that really pushed the player penetration.
That said we've always just wrapped the FLVPlayback in a UIComponent.
Thanks for this Andrew, you da man!
I've been looking all over for something like this.
You Rock.
- DanO
Michael Lallemont and Dev you can skin the component see here:
http://elromdesign.com/blog/2009/05/09/skinning-fxvideodisplay-flash-10-component/comment-page-1/#comment-16783
Michael Lallemont and Dev you can skin the component see here:
http://elromdesign.com/blog/2009/05/09/skinning-fxvideodisplay-flash-10-component/comment-page-1/#comment-16783
This is great news!
It is definitely a very good improvement from the VideoDisplay component in Flex 3.
Thanks for sharing.
pleas somone of you know how to put a video in a fullscreen with flex builder 3
please.