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.

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 (122)