AS 3 Simple Video Player

On my last freelance gig, I created a simple Flash video player for a landing page. I took the existing code and extended it to create a SimpleVideo class that could be useful for Flash newbies or designers. I added the ability to pass in a MovieClip where a designer could create a stylish interface and load the video player into it.

The first example below, loads up an flv and starts playing it. I added the mute button so you wouldn’t get annoyed with the sound.

The second example loads the video and a static image into a MovieClip which has design surrounding it. You will also notice the play/pause and mute buttons which are all contained in the MovieClip.

Get Adobe Flash player


The following code is what makes the magic happen:

Main.as

package{
import flash.display.*;
import flash.events.MouseEvent;
public class Main extends Sprite{
private var myVideo1:SimpleVideo;
private var myVideo2:SimpleVideo;
public function Main():void
{
//Video EXAMPLE 1
//instantiate the class and pass in the path to the flv, an empty string for the static image, and a boolean for the auto play feature.
myVideo1 = new SimpleVideo("path to flv","",true);
myVideo1.videoPlayerWidth = 450;// the class sets the default width to 350. I'm adjusting it to 450
myVideo1.x = 58,//position X
myVideo1.y = 10;//position Y
myVideo1.setVolume(0);//muting the sound
mute_button1.gotoAndStop(2);//setting the mute buttons state
addChild(myVideo1);//add the video to the display list
//EXAMPLE 2
//path to the flv, path to the static image, auto play set to false, pass in the MC with the design
myVideo2 = new SimpleVideo("path to flv","path to static image",false,frame_mc.positionMc);
myVideo2.videoPlayerWidth = 450;//set the width to 450
//frame_mc is the instance name of a movieclip on stage
//control is the instance name of the play/pause button with in (child) frame_mc
frame_mc.control.addEventListener(MouseEvent.MOUSE_DOWN,controlVideoPlayer);
//mute_button2 is the instance name of the mute button with in (child) frame_mc
frame_mc.mute_button2.addEventListener(MouseEvent.MOUSE_DOWN,muteVideoPlayer2);
addChild(myVideo2);//add it to the display list
mute_button1.addEventListener(MouseEvent.MOUSE_DOWN,muteVideoPlayer1);
}
   
private function muteVideoPlayer1(evt:MouseEvent):void
{
if(mute_button1.currentFrame == 1)
{
myVideo1.setVolume(0);
mute_button1.gotoAndStop(2);
}else{
myVideo1.setVolume(1);
mute_button1.gotoAndStop(1);
}
}
private function muteVideoPlayer2(evt:MouseEvent):void
{
if(frame_mc.mute_button2.currentFrame == 1)
{
myVideo2.setVolume(0);
frame_mc.mute_button2.gotoAndStop(2);
}else{
myVideo2.setVolume(1);
frame_mc.mute_button2.gotoAndStop(1);
}
}
private function controlVideoPlayer(evt:MouseEvent):void
{
if(frame_mc.control.currentFrame == 1)
{
myVideo2.playVideo();
frame_mc.control.gotoAndStop(2);
}else{
myVideo2.pauseVideo();
frame_mc.control.gotoAndStop(1);
}
}
}
}

SimpleVideo.as

package{
import flash.display.*;
import flash.net.NetConnection
import flash.media.Video;
import flash.net.NetStream;
import flash.events.NetStatusEvent;
import flash.media.SoundTransform;
import flash.display.Bitmap;
import flash.display.Loader;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
public class SimpleVideo extends Sprite{ 
private var video:Video;
private var nc:NetConnection;
private var ns:NetStream;
private var newSizesByWidth:Object;
private var isAutoPlay:Boolean;
private var videoUrl:String;
private var videoDuration:int;
private var screenShotLoader:Loader;
private var screenShotImage:Bitmap;
private var screenShotUrl:String;
private var parentClip:MovieClip;
private var volumeTransform:SoundTransform;
private var duration:int;
private var netStatusCache:String;
private var addToParentClip:Boolean = false;
private var screenShotImageExists:Boolean = false;
private var isVideoReady:Boolean = false;
private var videoWidth:int = 350;
public function SimpleVideo(videoPath:String,screenshotPath:String = "",isAuto:Boolean = false,inParentClip:MovieClip=null):void
{
videoUrl = videoPath;
screenShotUrl = screenshotPath;
isAutoPlay = isAuto;
parentClip = inParentClip;
if(screenShotUrl != "" && isAutoPlay == false)
{
screenShotImageExists = true;
loadScreenShot();
}
if(parentClip != null)
{
addToParentClip = true;
}
volumeTransform = new SoundTransform();
video = new Video();
video.smoothing = true;
nc = new NetConnection();
nc.connect(null);
ns = new NetStream(nc);
ns.client = {onMetaData:ns_onMetaData};
ns.bufferTime = 5;
ns.addEventListener(NetStatusEvent.NET_STATUS, netStatusEvent);
video.attachNetStream(ns);
if(isAutoPlay)
{
//ns.play(videoUrl+"?cacheKiller="+(new Date()).getTime());
ns.play(videoUrl);
}
}
public function set videoPlayerWidth(inNumber:int):void
{
videoWidth = inNumber;
}
public function stopVideo():void
{
ns.seek(0);
ns.pause();
}
public function pauseVideo():void
{
toggleVideo();
}
public function playVideo():void
{
toggleVideo()
}
public function setVolume(newVolume:Number):void{
//The volume, from 0 (silent) to 1 (full volume).
volumeTransform.volume = newVolume;
ns.soundTransform = volumeTransform;
}
private function toggleVideo():void {
if(!isVideoReady){ 
if(screenShotImageExists)
{
screenShotImage.visible = false;
}
//ns.play(videoUrl+"?cacheKiller="+(new Date()).getTime());
ns.play(videoUrl);
}
if(isVideoReady)
{
ns.togglePause();
}
}
private function loadScreenShot():void
{
screenShotLoader = new Loader();
screenShotLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, screenShotOnComplete);screenShotLoader.load(new URLRequest(screenShotUrl));
}
private function screenShotOnComplete(event:Event):void {
screenShotImage = Bitmap(screenShotLoader.content);  
var bitmap:BitmapData = screenShotImage.bitmapData;
var newImageSizeByWidth = constrainSizeToWidth(screenShotLoader.content.width,screenShotLoader.content.height,videoWidth);
screenShotImage.width = newImageSizeByWidth.width;
screenShotImage.height = newImageSizeByWidth.height;
screenShotImage.smoothing = true;
if(addToParentClip)
{
parentClip.addChild(screenShotImage);
}else{
addChild(screenShotImage);
}
}
private function ns_onMetaData(_data:Object):void
{
 duration = _data.duration;
if(!isVideoReady)
{
isVideoReady = true; 
}
newSizesByWidth = constrainSizeToWidth(_data.width,_data.height,videoWidth);
video.width = newSizesByWidth.width;
video.height = newSizesByWidth.height;
if(addToParentClip)
{
if(screenShotImageExists){
parentClip.addChildAt(video,parentClip.getChildIndex(screenShotImage));
}else{
parentClip.addChild(video)
}
}else{
if(screenShotImageExists){
addChildAt(video,getChildIndex(screenShotImage));
}else{
addChild(video)
}
}
}
private function netStatusEvent(event:NetStatusEvent):void {     
if(netStatusCache != event.info.code){
switch (event.info.code) {
case "NetStream.Play.Start" :
break;
case "NetStream.Buffer.Empty" :
break;
case "NetStream.Buffer.Full" :
break;
case "NetStream.Buffer.Flush" :
break;
case "NetStream.Seek.Notify" :
break;
case "NetStream.Seek.InvalidTime" :
break;
case "NetStream.Play.Stop" :   
break;
}
netStatusCache = event.info.code;
}
}
private function constrainSizeToWidth(oldW:Number,oldH:Number,newW:Number):Object
{
return {width:newW,height:newW / oldW * oldH};
}
private function constrainSizeToHeight(oldW:Number, oldH:Number, newH:Number):Object
{
return {width:newH / oldH * oldW,height:newH};
}
}
}

This is a good starting point for anyone who needs a simple video player in AS 3. You could take the existing code and improve it by adding a loading output/animation, progress bar, scrubber ect.
You could even make a MovieClip and link the SimpleVideo class to it, just take the code from the Main.as and include it in the SimpleVideo.as class. I must thank Skype for the .flv, plus its a great app you should download it.
Enjoy!

Download Source:
Simple Video Player (1423)

One thought on “AS 3 Simple Video Player

  • December 7, 2010 at 4:51 pm
    Permalink

    Thanks! This is probably the best simple video player class I have found on the net. It has really saved me some time!

    Seems like the net is lacking good tutorials and code for AS3 video like this one.

    This might be a silly request, but I would love to see other examples and/or code if you have more stuff you want to share!

    Oh, you should also consider putting this code on Github… Might also be good to put it in a package so folks can keep your code organized (I put my class in com.stheory directory in my custom class path).

    Keep up the excellent work!!!

    Cheers,
    B

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: