How to build a Flash AS3 Videoplayer

How to build a Flash Actionscript 3.0 Videoplayer

Wed, Jul 30, 2008

Audio & Video, Flash, Interfaces, Tutorials

How to build a Flash Actionscript 3.0 Videoplayer

Today we explain you how to create a videoplayer with some basic features like this one.

These are: – Play/Pause – Stop – Preloading – Scrubbing – Volume handling There will be another tutorial, which will extend this player. So be sure to check it out.

Requirements

Adobe Flash CS3

Try / Buy

Source Files

Download

Constants

As always, we begin with setting the constants. The BUFFER_TIME constant stores the time to buffer for the video in seconds. This one will later be assigned to the netstream object

const BUFFER_TIME:Number				= 8;

DEFAULT_VOLUME holds the start volume when the player starts

const DEFAULT_VOLUME:Number				= 0.6;

Our player has a timer, that updates all the visual parts. We store the update delay in milliseconds in a constant.

const DISPLAY_TIMER_UPDATE_DELAY:int			= 10;

To make the video a bit smoother, we can the the Video.smoothing variable to true. This may slow down old computers. If you want to deactivate the smoothing on runtime, just open the html file in the zip file, right click on the video player and choose low for the quality. This way the smoothing will automatically be deactivated by the flash player.

const SMOOTHING:Boolean	= true;

Variables

Let’s move on with the variables. We need to know, if the flv has been loaded when clicking the play button in order to load it or just play the video.

var bolLoaded:Boolean	= false;

For the timer function we need to know, if we’re currently scrubbing the volume or the progress bar.

var bolVolumeScrub:Boolean	= false;
var bolProgressScrub:Boolean	 = false;

Our player has also a mute/unmute button. So, we need to store the last used volume. Like this when you click on unmute, the scrubber will jump back to it’s previous position as the volume does. This value is always greater than zero. We asign the value from DEFAULT_VOLUME.

var intLastVolume:Number				= DEFAULT_VOLUME;

Then we need to have a net connection object for net stream and of course also a net stream object.

var ncConnection:NetConnection;
var nsStream:NetStream;

To store the received meta data from the flv file, we create an object

var objInfo:Object;

You can change your url to the flv file here. We just set it to the sample movie that’s in the same folder as the swf.

var strSource:String = "hancock-tsr2_h480p.flv";

And last of all, we create a timer object for updating the stuff from the player.

var tmrDisplay:Timer;

Functions

Now we need to initialize our player. First of all, we hide the unmute and pause button. Then we set the width of the progress and preload fill to 1.Our next step is adding a global eventlistener when the mouse button is released and adding event listeners to all buttons. Then we create ourtimer object for
updating all parts of the player and add the event listener. Next we create a new net connection, add the event listener and connect it to null because we don’t have a media server. The net stream object needs the net connection for initializing. Once we have our net stream object ready, we add the event listener, set the client property to this for handling the meta data and set buffer time to the value from the constant BUFFER_TIME. Then we attach the net stream to the video object on the stage and set the smoothing property to the value from the constant SMOOTHING. Last of all we set the default volume to the value from the constant DEFAULT_VOLUME. Note that only values from zero to one are allowed.

function initVideoPlayer():void {
	mcVideoControls.btnUnmute.visible	= false;
	mcVideoControls.btnPause.visible	= false;

	mcVideoControls.mcProgressFill.mcFillRed.width	= 1;
	mcVideoControls.mcProgressFill.mcFillGrey.width = 1;

	stage.addEventListener( MouseEvent.MOUSE_UP, mouseReleased);

	mcVideoControls.btnPause.addEventListener(MouseEvent.CLICK, pauseClicked);
	mcVideoControls.btnPlay.addEventListener(MouseEvent.CLICK, playClicked);
	mcVideoControls.btnStop.addEventListener(MouseEvent.CLICK, stopClicked);
	mcVideoControls.btnMute.addEventListener(MouseEvent.CLICK, muteClicked);
	mcVideoControls.btnUnmute.addEventListener(MouseEvent.CLICK, unmuteClicked);
	mcVideoControls.mcVolumeScrubber.btnVolumeScrubber.addEventListener(MouseEvent.MOUSE_DOWN, volumeScrubberClicked);
	mcVideoControls.mcProgressScrubber.btnProgressScrubber.addEventListener(MouseEvent.MOUSE_DOWN, progressScrubberClicked);

	tmrDisplay = new Timer(DISPLAY_TIMER_UPDATE_DELAY);
	tmrDisplay.addEventListener(TimerEvent.TIMER, updateDisplay);

	ncConnection = new NetConnection();
	ncConnection.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
	ncConnection.connect(null);

	nsStream = new NetStream(ncConnection);
	nsStream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
	nsStream.client = this;
	nsStream.bufferTime = BUFFER_TIME;

	vidDisplay.attachNetStream(nsStream);
	vidDisplay.smoothing = SMOOTHING;

	mcVideoControls.mcVolumeScrubber.x		= (53 * DEFAULT_VOLUME) + 341;
	mcVideoControls.mcVolumeFill.mcFillRed.width	= mcVideoControls.mcVolumeScrubber.x - 394 + 53;
	setVolume(DEFAULT_VOLUME);
}

The most important part is now done. We’ve set all variables and added all event listeners. We’re now going to go through all button event listeners. When the user hit’s the play button, we need to check, if the flv download has already begun. If that’s the case, we resume the playback with the NetStream.resume() function. If not, we call the play() function and add the source to the flv file as the parameter.
Then we show the video display object that’s on the stage. And finally we switch the pause/play visibility.

function playClicked(e:MouseEvent):void {
	if(!bolLoaded) {
		nsStream.play(strSource);
		bolLoaded = true;
	} else {
		nsStream.resume();
	}

	vidDisplay.visible			= true;

	mcVideoControls.btnPause.visible	= true;
	mcVideoControls.btnPlay.visible		= false;
}

The pause button only calls the pause() function from the net stream object and switches the pause/play visibility.

function pauseClicked(e:MouseEvent):void {
	nsStream.pause();

	mcVideoControls.btnPause.visible	= false;
	mcVideoControls.btnPlay.visible		= true;
}

When the user click’s the play button, the stopVideoPlayer() function will be called. We’ll explain this function below.

function stopClicked(e:MouseEvent):void {
	stopVideoPlayer();
}

The mute button sets the volume to zero and updates the volume scrubber and fill position/width.

function muteClicked(e:MouseEvent):void {
	setVolume(0);

	mcVideoControls.mcVolumeScrubber.x		= 341;
	mcVideoControls.mcVolumeFill.mcFillRed.width	= 1;
}

The unmute button sets the volume to the last used volume and updates the volume scrubber and fill position/width.

function unmuteClicked(e:MouseEvent):void {
	setVolume(intLastVolume);

	mcVideoControls.mcVolumeScrubber.x		= (53 * intLastVolume) + 341;
	mcVideoControls.mcVolumeFill.mcFillRed.width	= mcVideoControls.mcVolumeScrubber.x - 394 + 53;
}

When the volume scrubber is clicked, the scrub flag will be set to true. Then we start dragging it withing the boundings that are described as a rectangle.
Exactly the same goes for the progress scrubber except that we’re setting another flag variable and bounding.

function volumeScrubberClicked(e:MouseEvent):void {
	bolVolumeScrub = true;

	mcVideoControls.mcVolumeScrubber.startDrag(false, new Rectangle(341, 19, 53, 0));
}

function progressScrubberClicked(e:MouseEvent):void {
	bolProgressScrub = true;

	mcVideoControls.mcProgressScrubber.startDrag(false, new Rectangle(0, 2, 432, 0));
}

Last of all, we have our mouseReleased() handler. This function is needed for knowing, when the user stops the scrubbing. First, we set the progress/volume scrub flag to false. Then we stop all dragging actions and update the width of the progress/volume fill. And if the volume is greater than zero, we store it in the variable intLastVolume.

function mouseReleased(e:MouseEvent):void {
	bolVolumeScrub		= false;
	bolProgressScrub	= false;

	mcVideoControls.mcProgressScrubber.stopDrag();
	mcVideoControls.mcVolumeScrubber.stopDrag();

	mcVideoControls.mcProgressFill.mcFillRed.width	= mcVideoControls.mcProgressScrubber.x + 5;
	mcVideoControls.mcVolumeFill.mcFillRed.width	= mcVideoControls.mcVolumeScrubber.x - 394 + 53;

	if((mcVideoControls.mcVolumeScrubber.x - 341) / 53 > 0)
		intLastVolume = (mcVideoControls.mcVolumeScrubber.x - 341) / 53;
}

The updateDisplay() function will be called by the timer object 100 times a second. If you want, you can decrease this value by increasing the value from the constant DISPLAY_TIMER_UPDATE_DELAY.
First of all, we check if the user is scrubbing on the progress bar. If that’s the case, we seek in the video. If not, we just update the position of the scrubber according to the current time.
Then we set the time and duration label. We format the values with the function formatTime() which we explain later.
Now we update the width from the progress bar. The grey one displays the loading progress while the red one shows the progress from the video.
Last of all we update the volume and the red fill width when the user is scrubbing.

function updateDisplay(e:TimerEvent):void {
	if(bolProgressScrub)
		nsStream.seek(Math.round(mcVideoControls.mcProgressScrubber.x * objInfo.duration / 432))
	else
		mcVideoControls.mcProgressScrubber.x = nsStream.time * 432 / objInfo.duration; 

	mcVideoControls.lblTimeDuration.htmlText 	= "" + formatTime(nsStream.time) + " / " + formatTime(objInfo.duration);

	mcVideoControls.mcProgressFill.mcFillRed.width	= mcVideoControls.mcProgressScrubber.x + 5;
	mcVideoControls.mcProgressFill.mcFillGrey.width	= nsStream.bytesLoaded * 438 / nsStream.bytesTotal;

	if(bolVolumeScrub) {
		setVolume((mcVideoControls.mcVolumeScrubber.x - 341) / 53);
		mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x - 394 + 53;
	}
}

The onMetaDataFunction will be called as soon as the net stream object gets the meta stuff from the flv file. We store these informations in a object. Now can start the timer object because we have all the necessary data.

function onMetaData(info:Object):void {
	objInfo = info;

	tmrDisplay.start();
}

Once a net status event will be fired, the netStatusHandler() function will be called. The event holds the info code of the event type. We only need to handle NetStream.Play.StreamNotFound in case the stream is not found and NetStream.Play.Stop to know, when the video reached its end to stop the player with the stopVideoPlayer() function.

function netStatusHandler(event:NetStatusEvent):void {
	switch (event.info.code) {
		case "NetStream.Play.StreamNotFound":
			trace("Stream not found: " + strSource);
		break;
		case "NetStream.Play.Stop":
			stopVideoPlayer();
		break;
	}
}

There are 2 ways to stop the playback: One is clicking the stop button, the other is reaching the end of the video. That’s the reason why we’ve put this in a function. First we pause the netstream and set the playback position to zero. In order to clear the display where the last frame of the video will be shown we need to set the visibility to false. We can’t use the Video.clear() function since it has a bug. But this one has already been reported to adobe. This workaround works fine. Finlay we switch the play/button visibility.

function stopVideoPlayer():void {
	nsStream.pause();
	nsStream.seek(0);

	vidDisplay.visible			= false;

	mcVideoControls.btnPause.visible	= false;
	mcVideoControls.btnPlay.visible		= true;
}

To set the volume of the video we use the setVolume() function. First we create a soundtransform object with the value from the parameter. Then we assign this object to nsStream.soundTransform. And we hide or show the mute and unmute according to the volume. If it’s greater than zero, we show the mute button and vice versa.

function setVolume(intVolume:Number = 0):void {
	var sndTransform	= new SoundTransform(intVolume);
	nsStream.soundTransform	= sndTransform;

	if(intVolume > 0) {
		mcVideoControls.btnMute.visible		= true;
		mcVideoControls.btnUnmute.visible	= false;
	} else {
		mcVideoControls.btnMute.visible		= false;
		mcVideoControls.btnUnmute.visible	= true;
	}
}

The last function formatTime() is used to format the seconds to the format mm:ss.

function formatTime(t:int):String {
	var s:int = Math.round(t);
	var m:int = 0;
	if (s > 0) {
		while (s > 59) {
			m++;
			s -= 60;
		}
		return String((m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s);
	} else {
		return "00:00";
	}
}

Call init function

The only thing left to do is calling the init function for the player.

initVideoPlayer();

We hope you liked this tutorial. If you have any question don’t hesitate to ask. Also we’ve already mentioned be sure to check back for the next part that will be coming soon.

Full code with comments

// ##########################
// ############# CONSTANTS
// ##########################

// time to buffer for the video in sec.
const BUFFER_TIME:Number				= 8;
// start volume when initializing player
const DEFAULT_VOLUME:Number				= 0.6;
// update delay in milliseconds.
const DISPLAY_TIMER_UPDATE_DELAY:int	= 10;
// smoothing for video. may slow down old computers
const SMOOTHING:Boolean					= true;

// ##########################
// ############# VARIABLES
// ##########################

// flag for knowing if flv has been loaded
var bolLoaded:Boolean					= false;
// flag for volume scrubbing
var bolVolumeScrub:Boolean				= false;
// flag for progress scrubbing
var bolProgressScrub:Boolean			= false;
// holds the last used volume, but never 0
var intLastVolume:Number				= DEFAULT_VOLUME;
// net connection object for net stream
var ncConnection:NetConnection;
// net stream object
var nsStream:NetStream;
// object holds all meta data
var objInfo:Object;
// url to flv file
var strSource:String					= "hancock-tsr2_h480p.flv";
// timer for updating player (progress, volume...)
var tmrDisplay:Timer;

// ##########################
// ############# FUNCTIONS
// ##########################

// sets up the player
function initVideoPlayer():void {
	// hide buttons
	mcVideoControls.btnUnmute.visible	= false;
	mcVideoControls.btnPause.visible	= false;

	// set the progress/preload fill width to 1
	mcVideoControls.mcProgressFill.mcFillRed.width = 1;
	mcVideoControls.mcProgressFill.mcFillGrey.width = 1;

	// add global event listener when mouse is released
	stage.addEventListener( MouseEvent.MOUSE_UP, mouseReleased);

	// add event listeners to all buttons
	mcVideoControls.btnPause.addEventListener(MouseEvent.CLICK, pauseClicked);
	mcVideoControls.btnPlay.addEventListener(MouseEvent.CLICK, playClicked);
	mcVideoControls.btnStop.addEventListener(MouseEvent.CLICK, stopClicked);
	mcVideoControls.btnMute.addEventListener(MouseEvent.CLICK, muteClicked);
	mcVideoControls.btnUnmute.addEventListener(MouseEvent.CLICK, unmuteClicked);
	mcVideoControls.mcVolumeScrubber.btnVolumeScrubber.addEventListener(MouseEvent.MOUSE_DOWN, volumeScrubberClicked);
	mcVideoControls.mcProgressScrubber.btnProgressScrubber.addEventListener(MouseEvent.MOUSE_DOWN, progressScrubberClicked);

	// create timer for updating all visual parts of player and add
	// event listener
	tmrDisplay = new Timer(DISPLAY_TIMER_UPDATE_DELAY);
	tmrDisplay.addEventListener(TimerEvent.TIMER, updateDisplay);

	// create a new net connection, add event listener and connect
	// to null because we don't have a media server
	ncConnection = new NetConnection();
	ncConnection.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
	ncConnection.connect(null);

	// create a new netstream with the net connection, add event
	// listener, set client to this for handling meta data and
	// set the buffer time to the value from the constant
	nsStream = new NetStream(ncConnection);
	nsStream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
	nsStream.client = this;
	nsStream.bufferTime = BUFFER_TIME;

	// attach net stream to video object on the stage
	vidDisplay.attachNetStream(nsStream);
	// set the smoothing value from the constant
	vidDisplay.smoothing = SMOOTHING;

	// set default volume
	mcVideoControls.mcVolumeScrubber.x = (52 * DEFAULT_VOLUME) + 341;
	mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x - 394 + 52;
	setVolume(DEFAULT_VOLUME);
}

function playClicked(e:MouseEvent):void {
	// check's, if the flv has already begun
	// to download. if so, resume playback, else
	// load the file
	if(!bolLoaded) {
		nsStream.play(strSource);
		bolLoaded = true;
	}
	else{
		nsStream.resume();
	}

	// show video display
	vidDisplay.visible					= true;

	// switch play/pause visibility
	mcVideoControls.btnPause.visible	= true;
	mcVideoControls.btnPlay.visible		= false;
}

function pauseClicked(e:MouseEvent):void {
	// pause video
	nsStream.pause();

	// switch play/pause visibility
	mcVideoControls.btnPause.visible	= false;
	mcVideoControls.btnPlay.visible		= true;
}

function stopClicked(e:MouseEvent):void {
	// calls stop function
	stopVideoPlayer();
}

function muteClicked(e:MouseEvent):void {
	// set volume to 0
	setVolume(0);

	// update scrubber and fill position/width
	mcVideoControls.mcVolumeScrubber.x				= 341;
	mcVideoControls.mcVolumeFill.mcFillRed.width	= 1;
}

function unmuteClicked(e:MouseEvent):void {
	// set volume to last used value
	setVolume(intLastVolume);

	// update scrubber and fill position/width
	mcVideoControls.mcVolumeScrubber.x = (53 * intLastVolume) + 341;
	mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x - 394 + 53;
}

function volumeScrubberClicked(e:MouseEvent):void {
	// set volume scrub flag to true
	bolVolumeScrub = true;

	// start drag
	mcVideoControls.mcVolumeScrubber.startDrag(false, new Rectangle(341, 19, 53, 0));
}

function progressScrubberClicked(e:MouseEvent):void {
	// set progress scrub flag to true
	bolProgressScrub = true;

	// start drag
	mcVideoControls.mcProgressScrubber.startDrag(false, new Rectangle(0, 2, 432, 0));
}

function mouseReleased(e:MouseEvent):void {
	// set progress/volume scrub to false
	bolVolumeScrub		= false;
	bolProgressScrub	= false;

	// stop all dragging actions
	mcVideoControls.mcProgressScrubber.stopDrag();
	mcVideoControls.mcVolumeScrubber.stopDrag();

	// update progress/volume fill
	mcVideoControls.mcProgressFill.mcFillRed.width	= mcVideoControls.mcProgressScrubber.x + 5;
	mcVideoControls.mcVolumeFill.mcFillRed.width	= mcVideoControls.mcVolumeScrubber.x - 394 + 53;

	// save the volume if it's greater than zero
	if((mcVideoControls.mcVolumeScrubber.x - 341) / 53 > 0)
		intLastVolume = (mcVideoControls.mcVolumeScrubber.x - 341) / 53;
}

function updateDisplay(e:TimerEvent):void {
	// checks, if user is scrubbing. if so, seek in the video
	// if not, just update the position of the scrubber according
	// to the current time
	if(bolProgressScrub)
		nsStream.seek(Math.round(mcVideoControls.mcProgressScrubber.x * objInfo.duration / 432))
	else
		mcVideoControls.mcProgressScrubber.x = nsStream.time * 432 / objInfo.duration; 

	// set time and duration label
	mcVideoControls.lblTimeDuration.htmlText		= "" + formatTime(nsStream.time) + " / " + formatTime(objInfo.duration);

	// update the width from the progress bar. the grey one displays
	// the loading progress
	mcVideoControls.mcProgressFill.mcFillRed.width	= mcVideoControls.mcProgressScrubber.x + 5;
	mcVideoControls.mcProgressFill.mcFillGrey.width	= nsStream.bytesLoaded * 438 / nsStream.bytesTotal;

	// update volume and the red fill width when user is scrubbing
	if(bolVolumeScrub) {
		setVolume((mcVideoControls.mcVolumeScrubber.x - 341) / 53);
		mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x - 394 + 53;
	}
}

function onMetaData(info:Object):void {
	// stores meta data in a object
	objInfo = info;

	// now we can start the timer because
	// we have all the neccesary data
	tmrDisplay.start();
}

function netStatusHandler(event:NetStatusEvent):void {
	// handles net status events
	switch (event.info.code) {
		// trace a messeage when the stream is not found
		case "NetStream.Play.StreamNotFound":
			trace("Stream not found: " + strSource);
		break;

		// when the video reaches its end, we stop the player
		case "NetStream.Play.Stop":
			stopVideoPlayer();
		break;
	}
}

function stopVideoPlayer():void {
	// pause netstream, set time position to zero
	nsStream.pause();
	nsStream.seek(0);

	// in order to clear the display, we need to
	// set the visibility to false since the clear
	// function has a bug
	vidDisplay.visible			= false;

	// switch play/pause button visibility
	mcVideoControls.btnPause.visible	= false;
	mcVideoControls.btnPlay.visible		= true;
}

function setVolume(intVolume:Number = 0):void {
	// create soundtransform object with the volume from
	// the parameter
	var sndTransform	= new SoundTransform(intVolume);
	// assign object to netstream sound transform object
	nsStream.soundTransform	= sndTransform;
	// hides/shows mute and unmute button according to the
	// volume
	if(intVolume > 0) {
		mcVideoControls.btnMute.visible		= true;
		mcVideoControls.btnUnmute.visible	= false;
	} else {
		mcVideoControls.btnMute.visible		= false;
		mcVideoControls.btnUnmute.visible	= true;
	}
}

function formatTime(t:int):String {
	// returns the minutes and seconds with leading zeros
	// for example: 70 returns 01:10
	var s:int = Math.round(t);
	var m:int = 0;
	if (s > 0) {
		while (s > 59) {
			m++;
			s -= 60;
		}
		return String((m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s);
	} else {
		return "00:00";
	}
}

// ##########################
// ############# INIT PLAYER
// ##########################
initVideoPlayer();

About the Author

Rafael Nünlist is currently working at orange8 as a Richmedia Developer. He will complete his apprenticeship with a swiss federal vocational diploma in information technology this summer. His strengths are Flash, Flex, Actionscript, Php/MySQL and AIR. He is also a member of the dreaminginflash team.

162 Comments For This Post

Lulu Says:
July 31st, 2008 at 9:58 am

Beautifully made tutorial! I appreciate your thoroughness.

Not sure if you’re taking requests for that extended tutorial (hehe) but there is something that I’d love to be able to do that I can’t find a tutorial about.

I’d like to be able to select a section of the video (designate start and end points along the timeline) to loop.

Any thoughts?

Bill Roughen Says:
August 1st, 2008 at 4:04 pm

Your video player is terrific. I’ve been trying to find something like this for months. I downloaded the code and modified it for my flash project. Everything works perfectly. Now I have a new problem that maybe you can easily solve. My flash site uses one instance of the video display and one instance of the video controls across all the frames. When I want to show a video I make it visible and when I don’t need it I make it invisible. There are navigation buttons at the top to jump to various frames.

I can get everything to behave when the navigation buttons are used. The video will stop, the visibility of the buttons is updated, etc. But when I click on the play button to start a new flv there is a brief frame at the beginning of the previous video. How can I clear the video player so the new stream will play without this problem?

Thanks.

Right now I’m using a progressive download. I’m using the close() method of the netstream to clear it, but the buffer still seems to contain the previous video.

Rafael Nünlist Says:
August 1st, 2008 at 11:01 pm

@Lulu: I have to disapoint you, I can’t include your request in the next part. But it shouldn’t be a problem to implement this functionality.

@Bill Roughen: Mmmh, since the Video.clear() function doesn’t work, you will have to set the visibility of the video to false. As soon as the playpack starts, you can set it to true.
Just adding a new case to the netStatusHandler() function should be enough:

================================

function netStatusHandler(event:NetStatusEvent):void {
// handles net status events
switch (event.info.code) {
// trace a messeage when the stream is not found
case “NetStream.Play.StreamNotFound”:
trace(”Stream not found: ” + strSource);
break;

// when the video reaches its end, we stop the player
case “NetStream.Play.Stop”:
stopVideoPlayer();
break;

case “NetStream.Play.Start”:
vidDisplay.visible = true;
break;
}
}

================================

And be sure to comment the vidDisplay.visible line in the playClicked() function:
=====================
function playClicked(e:MouseEvent):void {
// check’s, if the flv has already begun
// to download. if so, resume playback, else
// load the file
if(!bolLoaded) {
nsStream.play(strSource);
bolLoaded = true;
}
else{
nsStream.resume();
}

// show video display
//vidDisplay.visible = true;

// switch play/pause visibility
mcVideoControls.btnPause.visible = true;
mcVideoControls.btnPlay.visible = false;
}
================

Hope this works out.

cheers

COle Says:
August 6th, 2008 at 7:10 pm

Love the player, one question. How do I make it start playing the second it loads instead of having to click on play?

Rafael Nünlist Says:
August 7th, 2008 at 5:36 pm

@COle: Thank you. To Autoplay you can just add the following line at the very end of the script (After initVideoPlayer()):

playClicked(null);

cheers

sooraj Says:
August 8th, 2008 at 1:21 pm

Excellent!!!!!!!!
I had seen many players, but this one looks very good in look and functioning.
I had a question, What are changes to the code when we using a Flash Media Server?
ie; streaming from a media server.

Rafael Nünlist Says:
August 8th, 2008 at 4:43 pm

@sooraj: Thank you!
When using a Flash Media Server you just need to set it to the net connection. So, the only change would be:

ncConnection.connect(null);

Which will then become:
ncConnection.connect(“rtmp://example.com/”);

That’s it.

Craig Says:
August 16th, 2008 at 12:20 am

Great tutorial! Answers a lot of questions I’ve been struggling through with AS 3.0!

Two quick questions, what is the method for stopping the video at a specific point, i.e. I want to hold on the last frame of the video file after it’s played through.

And secondly, I’ve adapted the player for larger video dimensions and everything works great with the exception of the Progress Scrubber. I can restrain it to the new, longer progress bar, but every time the video starts, it jumps 200 or so pixels to the right. I know this is probably simple, I just don’t think I’m looking in the right place within the code.

Thanks.

Rafael Nünlist Says:
August 16th, 2008 at 11:54 am

Hey Craig

Thank you for your feedback!
If you want the video player to show the last frame you just need to comment this line:

// when the video reaches its end, we stop the player
case “NetStream.Play.Stop”:
// ################# COMMENT THIS LINE HERE
// stopVideoPlayer();
break;
}

For the other thing you need to adjust the width of the progressbar in the code since it’s static:

function updateDisplay(e:TimerEvent):void {
// checks, if user is scrubbing. if so, seek in the video
// if not, just update the position of the scrubber according
// to the current time
if(bolProgressScrub)
nsStream.seek(Math.round(mcVideoControls.mcProgressScrubber.x * objInfo.duration / 432))
else
mcVideoControls.mcProgressScrubber.x = nsStream.time * 432 / objInfo.duration;

So, the number 432 represents how far the scrubber can go. Try to set this number to the width of the progress bar, this should help you out

Greetings
Rafael

Jake Rutter Says:
August 19th, 2008 at 12:47 am

Awesome site, I just found this. I have been adding flash sites to my rss feeds reader to keep up with things. This is a great tutorial, Im working on building my own AS3 Video Player so this definitely helps!

Jake Rutter Says:
August 19th, 2008 at 12:50 am

One thing, had you thought about putting all of the code into a class? or into OOP?

John Culshaw Says:
August 20th, 2008 at 10:24 am

Fantastic tutorial — best I have seen in a long time!

I am having one problem using it in my SWF, though. In my SWF the user can toggle between looking at some still images, or a video. The still image viewing area and video area each take the entire stage area. That is, when viewing the still images, I hide all the video elements and vice versa (when viewing the video, I hide all still image elements).

My problem is that when I first toggle to the video elements part (default is still image mode) everything works hunky dory with the video elements as expected. But, if I toggle back to still image mode and then try to go back to the video mode, the player is unresponsive.

I have a feeling that the problem has something to do with trying to run the initVideoPlayer(); function after is has already been run once (at the very first toggle) — but some tests that I have run have been unsuccessful.

The behavior I would love to have is that when toggling away from the video mode elements, the video pauses (I can handle this part) and the stream suspends while I am over in still image mode. When I toggle back to video mode, the video resumes and streaming picks up where it left off.

Any ideas how this may be attained?

Regards,

-john

Craig Says:
August 20th, 2008 at 11:49 pm

Rafael,

Thanks for the tips on how to stop the video on the last frame. Would I use the same type of technique to trigger another event after the video has finished playing?

For example, I’m trying to program a “Play All” button for x number of FLVs. I imagine the function would detect the end of each video and then go to the next label on the timeline (or whatever code I put here I suppose).

Thanks in advance for your help.

Walmik Says:
August 26th, 2008 at 4:02 pm

Hi Rafael,
I do not have a query that is directly related to this tutorial but it is relevant here I hope. I m working on a site that is heavily animated and uses the flv playback component at various points in the animation. So for example a section loads with a lot of animation and comes to point and stops where a flv playback component is placed. The when another section is loaded, this section animates to its end and launches the ‘clicked’ sections animation which again goes through an elaborate animation and stops where it has a FLV Playback component on the stage which plays videos. And so on..

The problem is, when a user has requested a section and the flv playback component is still to buffer/load the video, there can be some lag on a slower internet connection hence the user changes the section before any video content had reached his computer. After a few moments, the video that could not load earlier just starts to play abruptly without any component on the stage!

While leaving a section I m checking if a flv is playing (flv.playing) and if so then stopping it. But since the video never loaded, this condition is not met. Also stopping video anyways results in an error as the script doesnt know what to stop.

So what I wanted to know is, is there some way to stop all video like there was stop all sounds in earlier versions of AS? OR is there some way I can make sure that a video request is successfully terminated?

Lastly I m terribly sorry if this query does not belong here. Many Thanks in advance AND of course… this is a gr8 tutorial… very straightforward.

Carlos Pinho Says:
August 26th, 2008 at 7:31 pm

Hi Walmik,

No problem to post a query here. I will try to add a new feature at The Tech Labs, a place where you add your doubts and questions and where developers will try to help you.

Cheers,
Carlos

Jim Says:
August 27th, 2008 at 7:54 pm

Where do you instantiate the mcVideoControls object? I’m getting errors for undefined properties since

grabek Says:
September 2nd, 2008 at 9:23 am

YOU ARE AWESOME!
you saved me like 50 hours of research. Your code is great!

Roy Says:
September 11th, 2008 at 1:06 am

Your script is really cool and exactly what I was looking for.

I tried to connect it to the sample vod file (sample.flv) on FMS using the modified code:
ncConnection.connect(“rtmp://ip-address/vod”);
But then i get an error:

“ArgumentError: Error #2126: NetConnection object must be connected.
at flash.net::NetStream/construct()
at flash.net::NetStream()
at videoplayer_fla::MainTimeline/initVideoPlayer()
at videoplayer_fla::MainTimeline/frame1()”

It can’t seem to connect.

When i use the vodtest file everything works (on my server and development pc), but that one does not connect with the netConnection code.

I hope you can help me.

Best regards,

Roy

Sems Says:
September 12th, 2008 at 9:18 pm

NetStream does not wait for the NetConnection to be established, when connecting to a Flash Media Server. So Roy, you’ll to move the NetStream code under netStatusHandler, as below (hope this displays fine):

// when the video reaches its end, we stop the player
case “NetStream.Play.Stop”:
stopVideoPlayer();
break;
case “NetConnection.Connect.Success”:
// create a new netstream with the net connection, add event
// listener, set client to this for handling meta data and
// set the buffer time to the value from the constant
nsStream = new NetStream(ncConnection);
nsStream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
nsStream.client = this;
nsStream.bufferTime = BUFFER_TIME;

// attach net stream to video object on the stage
vidDisplay.attachNetStream(nsStream);
// set the smoothing value from the constant
vidDisplay.smoothing = SMOOTHING;

// set default volume
mcVideoControls.mcVolumeScrubber.x = (52 * DEFAULT_VOLUME) + 341;
mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x – 394 + 52;
setVolume(DEFAULT_VOLUME);
//plus other stuff if you need.
break;
}
}

Roy Says:
September 17th, 2008 at 1:06 am

Hi Sems,

Thanks.. i’ll look into it right away.

Best regards,

Roy

mmdGuru Says:
September 23rd, 2008 at 9:59 am

Hi Rafael,

Great video player=) Think you did a awesome job…

I’m trying to implement the player in a project. The project requires a skip video button to jump to another frame and when the video is finished it should also jump to the same frame as the skip function!

can you please help me to get on the right track=)

regards

Thomas

william Says:
September 29th, 2008 at 10:53 am

thanks for the tutorials. please am using AS2, can i use the code for it. if not, kindly send me a tutorials on that. am new to flash.

Rafael Nünlist Says:
October 1st, 2008 at 11:20 am

@mmdguru: just call the same function that goes to the next frame from a skip button and also call it when the netstream event is fired for stop.
:::::
case “NetStream.Play.Stop”:
callYourFunctionThatGoesToTheNextFrame();
break;
:::::

@william: no, you can’t use the code for as2. but there are many video players out there made with as2

Michael Dunn Says:
October 2nd, 2008 at 4:47 pm

Thanks for the tutorial, great videoplayer! I do have a question. I’m trying to connect to a FMS. Followed example from post Aug 8, 2008 4:43 pm and I get the following message:

ArgumentError: Error #2126: NetConnection object must be connected.
at flash.net::NetStream/flash.net:NetStream::construct()
at flash.net::NetStream$iinit()
at videoplayer_fla::MainTimeline/initVideoPlayer()
at videoplayer_fla::MainTimeline/videoplayer_fla::frame1()

I lost here, any ideas?
thanks

Kukurusta Says:
October 3rd, 2008 at 9:56 am

Hi Rafael

I can just repeat what other already said. This site is a gem.

I’m getting my movies from a FMS. I had to adopt your player with the already mentioned function netStatusHandler(event:NetStatusEvent):void and add a not yet mentioned

ncConnection.client = this;
function onBWDone():void {
trace(“onBWDone called”);
}

in order to catch all required callbacks.

I’m now wondering why I receive a NetStream.Play.Stop notification after a while even if the videostream is paused.

Any idea why this notification is fired?

Fabio

Kukurusta Says:
October 3rd, 2008 at 10:02 am

Hi Rafael and all

Again I’m getting my movies from a FMS with rtmp. I’d like to have the videostream pause when the player is loaded, but having the first frame displayed. How can I achieve that?

Fabio

Jimmy Says:
October 7th, 2008 at 8:31 pm

I am trying your AS3 Videoplayer with red5 streaming server but i can not get it to work, i cant figure what i am doing worng. Is there anyway you can post or send me a working streaming copy i would greatly appreciate it

You did a very nice job on the player.

Jimmy

Phil Says:
October 22nd, 2008 at 11:28 am

This is fantastic! Very thorough tutorial.

I wonder if anyone (more advanced than me) has managed to turn this into a class?

dvesh Says:
November 5th, 2008 at 2:53 pm

Great tutorial. Sometimes it’s hard getting all the pieces together in one place and you did an excellent job here.

Alon Says:
November 24th, 2008 at 4:28 pm

good work!!

but i have a real problem to connect it to my fms server (influxis)
i changed the code connect(“rtmp……”);
and on play(“file”);

and its always give me that:
ArgumentError: Error #2126: NetConnection object must be connected.
at flash.net::NetStream/flash.net:NetStream::construct()
at flash.net::NetStream$iinit()
at videoplayer_fla::MainTimeline/initVideoPlayer()

Jason Says:
December 28th, 2008 at 11:06 pm

Terrific. Has really helped me get up to speed with AS3. Question: I’m using your player inside of another swf and when I navigate away from the frame with the player the vid still plays. How can I get it to stop when a user navigates away?

flashDuniya Says:
January 15th, 2009 at 10:40 am

var nc:NetConnection = new NetConnection();
var ns:NetStream;
nc.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
nc.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
nc.client = this;
nc.connect(“rtmp://flashduniya.com/videos/”);

function netStatusHandler(event:NetStatusEvent):void {

switch (event.info.code) {
case “NetConnection.Connect.Success” :
connectVideo();
var it:uint = setInterval(seeking, 100);
setVolume(0);
break;
case “NetStream.Play.StreamNotFound” :
trace(“Stream not found: ” + videoURLAr[selectedNum]);
break;
}
}
function connectVideo() {
ns = new NetStream(connection);
ns.client = this;
videoObj.attachNetStream(ns);
ns.play(“flashduniya”);
}
btnPause.addEventListener(MouseEvent.CLICK, pauseVideo);
btnPlay.addEventListener(MouseEvent.CLICK, playVideo);
function pauseVideo(e:MouseEvent):void {
ns.pause();
}
function playVideo(e:MouseEvent):void {
ns.resume();
}

This above code is working fine play pause functionality also working fine. But while we pause the video and after some time(about more than 10 min) we click on play button video start playing with beging not from the paused postion.

Any one can tell me the solution of this problem.

Thanks,
FlashDuniya

Matt Says:
February 3rd, 2009 at 6:36 pm

I love the video player that you have provided. I have tried to tweak it a little bit and am having a problem. I have changed it so that it works for 640×480 videos. I was able to change the size of the progress bar and was able to move it to the right some.

The only thing that appears to be wrong is that when I click play the mcProgressScrubber starts over to the far left of the movie instead of 50px to the right where the actual scrubber bar is.

Can anyone help?

Thanks
Matt

Matt Says:
February 7th, 2009 at 3:44 am

Hello there,

Let me start off by saying that this is something that I have been looking for for the past 3 years. So now that i have found something that is just what I am looking for, I want to make it easy and perfect. In saying that I have 1 question.

Is there a way to link a different flv file into the player without going into flash every time?

Josh Says:
February 12th, 2009 at 6:23 pm

Hey man
Im sortove new to flash been using it for about a year and a half now, but this is defo the best video player ive seen so dar

cheers

Josh Says:
February 12th, 2009 at 6:24 pm

// for the previous comment.

so far*

my bad on the spelling mistake haha:)

gary simms Says:
February 16th, 2009 at 8:21 pm

Thanks for this tutorial! Just getting my hands dirty with AS3.
Will be trying to move this all to a class soon.

Hey Matt,
Or others interested in not having to put the flv source in the flash itself. Simply use swfobject to embed your swf file.
I’m using swfobject 1.5, haven’t dug in to v2.0 yet, but I’m sure it’s similar.

First make sure you call the swfobject js in the head.

HTML code edit, notice the variable I’m passing to flash.

Looks like you don’t have the flash player. Get Flash Player

var so = new SWFObject(“videoplayer.prt1.swf”, “FlashwindowName”, “440″, “365″, “9″, “#000000″);
//so.addParam(“wmode”, “transparent”);
so.addVariable(“videoPath”, “hancock-tsr2_h480p.flv”)
so.write(“flashContent”);

And in your fla file change the source variable line at top to this.

// url to flv file
var strSource:String = videoPath;

That’s it, simple right?
gary.

gary simms Says:
February 16th, 2009 at 8:26 pm

Shoot, blog stripped out the tags.
What about this?

head tag
<script type=”text/javascript” src=”swfobject.js”></script>

HTML code
<body bgcolor=”#000000″>

<div id=”flashContent”>
<h1>Looks like you don’t have the flash player.</h1> <a href=”http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash&promoid=BIOX” rel=”external”>Get Flash Player</a>
</div>

</body>

bill krings Says:
February 17th, 2009 at 8:12 pm

Great tutorial, but I think I’m missing some fundamental knowledge. I am using Flash CS3 Pro. Where is the source for the instance of Display_vid? I know it is in the library associated with you file, but where did it originate from. Is this a component you created or is is in a Flash component library somewhere?
thanks!

apompei Says:
February 18th, 2009 at 4:44 am

Great tutorial!

I am trying to add an image that will load and display before a user presses play. Once the user presses play I’d like for the image to be removed from the display list so the video is in view.

In the variables section I added a new loader object with an eventListerner listening for the COMPLETE event that then calls a function that adds the image to the displayList. Following this eventListener I have the load constructor with the required URLRequest pointing to the JPEG image I am loading. This all works but I can’t figure out how to remove the image.

Where I am falling short is when the user clicks the play button how that can call a function that will remove the loader and the associated JPEG from the list. The lay button already is call the playClicked function. Is it possible to have it call two functions?

I am at really at a lose here any help would be appreciated.

knalle Says:
February 19th, 2009 at 10:14 pm

BTW, if you want to OOP this into a class quick and dirty, then just import the following in your class:

import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.media.Video;
import flash.net.NetConnection;
import flash.net.NetStream;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.events.NetStatusEvent;
import flash.geom.Rectangle;
import flash.media.SoundTransform;

and make all funtions private
The only problem I had was that onMetaData needed to be public.

Ben Says:
February 20th, 2009 at 12:37 am

Hi, after loosing a week on trying to make a nice FLV player, i came across yours ! Wich is wonderful

But..
It works in my projet, but only on the first frame. When i put it
inside a section that i call later using addChild, it doesn’t load.

I’ve tried with a new document and it work…

Could it be a variable, or else that i have to do so it work ?

I think i’m not that clear…

Joe Says:
February 26th, 2009 at 2:59 am

Where does the number 53 come from?

knalle Says:
February 26th, 2009 at 7:46 pm

I dunno. Never heard of that number until now.

LeonD Says:
March 8th, 2009 at 11:03 pm

hey there, i love your player and it works like a charme. i have a general question. when i jump to the frame that includes the player, the player works like it should, but when i go to another frame while the player is still playing, it doesnt stop, it keeps on playing in the background until the video ends. is there some way to unload the player when leaving the frame, so it doesnt keep on working in the backgound? thx in advance

Rafael Nünlist Says:
March 9th, 2009 at 8:55 am

@ LeonD: Before you jump to the next frame, just stop the player with the stopVideoPlayer() function

stopVideoPlayer();
gotoAndStop(“yourFrameLabelOrFrameNuber”);

Sean Says:
March 11th, 2009 at 9:34 pm

This is great! Very well done. Left me with one question though… How difficult would it be to have multiple instances of the player on the stage? Im guessing putting the controls and video windows into some sort of array?

Rafael Nünlist Says:
March 12th, 2009 at 9:46 am

@ Sean: You can put all the code & visuals into a separate movieclip make several instances of it and place them on the stage. Or you can convert the code into a class and do the instantiation programmatically.

LeonD Says:
March 13th, 2009 at 1:55 am

@rafael thx it worked great. but now i have some other problem. i had to put the player and his code in an mc. whenever i need the player i put the mc with the player on the stage. but when i say stopVideoPlayer () one the main stage codeline it tells me that there is no VideoPlayer function. now i understand why it tells me that but how can i stop the player within that mc from the main timeline?

Rafael Nünlist Says:
March 16th, 2009 at 7:38 am

@ LeonD: Just give your mc a name by clicking on it and changing the value in the properties. On the main timeline you’d write something like this to stop it:

myVideoPlayerInstance.stopVideo();

Of course “myVideoPlayerInstance” would be the name of your movieclip.

cheers

petit Says:
March 20th, 2009 at 12:00 pm

Hello Raf!

Thanx for sharing. One think i like is that you can easily customize the design (which is not the case for the FLVplayer that comes with flash for instance but you probably noticed..).

One feature though i think is missing and would bring your player near perfection…:)

==> Show & hide the controls when you mouse over/out the player!

I’ve been trying to code this for some hours but i’m not a AS3 wizard yet and get jerky results.

If anyone could give it a try …Thanx a lot.
Best regards.

Rafael Nünlist Says:
March 20th, 2009 at 1:27 pm

@petit: Just add an event listener to the whole mcControls for mouseOver and mouseOut and show or hide it

Like this:

mcControls.addEventListener(MouseEvent.MOUSE_OVER, showHideControls);
mcControls.addEventListener(MouseEvent.MOUSE_OUT, showHideControls);

function showHideControls(e:MouseEvent):void {
if(e.type == MouseEvent.MOUSE_OVER)
mcControls.alpha = 1;
else
mcControls.alpha = 0;
}

codo Says:
March 21st, 2009 at 10:39 am

very nice!!

petit Says:
March 22nd, 2009 at 10:50 am

Well done Raf, you’re my hero today:)

i tried with mcVidecontrols.visible= false/true but for some reasons it gives jerky behaviours, did not think to use .alpha

tip: If you want the controls & the video to react to mouse over/out you can put an invisible layer in the mcVideoControl of the size of the video…
Thanx Again.

LeonD Says:
March 25th, 2009 at 11:23 am

is it possible that the video frame shows a preview picture of the video before you hit the play button and how would you do that?

Rafael Nünlist Says:
March 26th, 2009 at 7:05 am

@ LeonD: You could make a screenshot from your video, save it as a jpg/png/gif and the load it with the Loader class in the video player. Or you create a serverside script that does the screenshot job for you and returns the image.
I’d recommend you to take a look at the slideshow tutorial on how to load an image, the rest should then be a piece of cake

Lynne Says:
March 28th, 2009 at 7:04 am

Thanks so much for this tutorial. It really helped me out. Whew!

Younus Says:
March 28th, 2009 at 1:40 pm

@Rafeal – Thanks for this tutorial!
I have a general question, how can i use flv from XML file.

Thanks

Rafael Nünlist Says:
March 28th, 2009 at 3:20 pm

@Lynne: Glad it could help you out
@Younus: Take a look at the “Expanding the Videoplayer” Tutorial, it implements a playlist function with xml.

Ross Says:
April 2nd, 2009 at 3:55 pm

Fantastic tutorial and example! I was able to create a great dynamic streaming player using FMS 3.5 and Flash 10 using several examples from your code! Thank you!

Nick Says:
April 2nd, 2009 at 10:41 pm

This tutorial is awesome!! thanks you for covering so much. This may seem simple but I’ve been having trouble. How do I get this player to play SWF’s instead of FLV’s?

junebug Says:
April 3rd, 2009 at 6:13 am

I expanded the width of the player to 640
I moved the progress bar down to the middle part of the control bar… I have shortened the progress bar but when play is clicked the scrubber jumps all the way over to the left (Its 60px off) leaving a gap between the scrubber and progress bar… I know the problem is math related but I have played with code for 2 days and still cant get the scrubber to match back up with progress bar… in other words I have: 1.) dropped the scrubber down by 19 px
2.) I have shortened the over all length of the scrubber/progress bar to 360px
3.) slid the scrubber over to the right by 60 px

problem is that when video starts, scrubber jumps all the way back over to the left… when the video is scrubbed the scrubber will then line up… but only when scrubbed

the code that I need help with:
———————————
function updateDisplay(e:TimerEvent):void {
// checks, if user is scrubbing. if so, seek in the video
// if not, just update the position of the scrubber according
// to the current time
if(bolProgressScrub)
nsStream.seek(Math.round(mcVideoControls.mcProgressScrubber.x * objInfo.duration / 354))
else
mcVideoControls.mcProgressScrubber.x = nsStream.time * 354 / objInfo.duration;

// set time and duration label
mcVideoControls.lblTimeDuration.htmlText = “” + formatTime(nsStream.time) + ” / ” + formatTime(objInfo.duration);

// update the width from the progress bar. the grey one displays
// the loading progress
mcVideoControls.mcProgressFill.mcFillRed.width = mcVideoControls.mcProgressScrubber.x + 5;
mcVideoControls.mcProgressFill.mcFillGrey.width = nsStream.bytesLoaded * 360 / nsStream.bytesTotal;

junebug Says:
April 3rd, 2009 at 6:51 am

I moved the scrubber/progress bar down by 19 px.
I moved the scrubber/progress bar over to the right by 60 px.

I managed to get the scrubber to line up with the video progress bar after a little manipulation but now I have problems scrubbing.. trying to scrub results in the video jumping to the end…
current code:

function updateDisplay(e:TimerEvent):void {
// checks, if user is scrubbing. if so, seek in the video
// if not, just update the position of the scrubber according
// to the current time
if(bolProgressScrub)
nsStream.seek(Math.round(mcVideoControls.mcProgressScrubber.x * objInfo.duration / 354 + 60 ))
else
mcVideoControls.mcProgressScrubber.x = nsStream.time * 354 / objInfo.duration + 60;

// set time and duration label
mcVideoControls.lblTimeDuration.htmlText = “” + formatTime(nsStream.time) + ” / ” + formatTime(objInfo.duration);

// update the width from the progress bar. the grey one displays
// the loading progress
mcVideoControls.mcProgressFill.mcFillRed.width = mcVideoControls.mcProgressScrubber.x – 60;
mcVideoControls.mcProgressFill.mcFillGrey.width = nsStream.bytesLoaded * 360 / nsStream.bytesTotal;

khalil3 Says:
April 6th, 2009 at 1:55 pm

Thank you sooooo much for your fantastic tool, I been searching for an AS3 tool for FLV, and I found it.

Rahul Joshi Says:
April 10th, 2009 at 8:15 am

I am working on the video player you have posted on your site. I have modified the XML and added another entry for sponsor video in it. If a particular entry in the XML has a sponsor video, it should be played first, then the video in that tag and so on. I am checking through actionscript if a sponsor video is present, then play it else just the normal video. Can you please guide me on how I can achieve this successfully?

Agustin Says:
April 16th, 2009 at 9:32 pm

I managed to install your player in FMS 3.5 on Windows 2003.
Changed coding as explained above regarding function netStatusHandler etc.. Now i am getting the following error
1120: Access of undefined property stopClicked
lines 52 to 66 . What I am missing? I feel to be close to have this awesome player install.

Nathan Says:
April 17th, 2009 at 10:18 pm

This is great – many thanks. I had one question which I was wondering if you could help me with:

Since Flash will now play MOV files (not just FLV files) is it possible to create a preview image dynamically? For example, load the Nth frame from the movie somehow, and have that appear as a static image before the movie is played?

Or would it make more sense to merely pause the movie on the 1st frame, creating the illusion of a preview image?

Carlos Pinho Says:
April 17th, 2009 at 10:56 pm

I think you need Flash Media Server for that.

Agustin Says:
April 18th, 2009 at 12:45 am

Hello: This is the code as modified so far. I still getting an error.
Your player is excellent, but want to used in my website using FMS 3.5
Can you help me?

ERROR is:

TypeError: Error #2007: Parameter connection must be non-null.
at flash.net::NetStream/construct()
at flash.net::NetStream()
at videoplayer_fla::MainTimeline/frame1()

===============================================================

// ##########################
// ############# CONSTANTS
// ##########################

// time to buffer for the video in sec.
const BUFFER_TIME:Number = 8;
// start volume when initializing player
const DEFAULT_VOLUME:Number = 0.6;
// update delay in milliseconds.
const DISPLAY_TIMER_UPDATE_DELAY:int = 10;
// smoothing for video. may slow down old computers
const SMOOTHING:Boolean = true;

// ##########################
// ############# VARIABLES
// ##########################

// flag for knowing if flv has been loaded
var bolLoaded:Boolean = false;
// flag for volume scrubbing
var bolVolumeScrub:Boolean = false;
// flag for progress scrubbing
var bolProgressScrub:Boolean = false;
// holds the last used volume, but never 0
var intLastVolume:Number = DEFAULT_VOLUME;
// net connection object for net stream
var ncConnection:NetConnection;
// net stream object
var nsStream:NetStream;
// object holds all meta data
var objInfo:Object =”rtmp://XX.XX.XXX.XX/maximo2/”;
// url to flv file
var strSource:String = “hancock-tsr2_h480p.flv”;
// timer for updating player (progress, volume…)
var tmrDisplay:Timer;

// ##########################
// ############# FUNCTIONS
// ##########################

// sets up the player
function initVideoPlayer():void {
// hide buttons
mcVideoControls.btnUnmute.visible = false;
mcVideoControls.btnPause.visible = false;

// set the progress/preload fill width to 1
mcVideoControls.mcProgressFill.mcFillRed.width = 1;
mcVideoControls.mcProgressFill.mcFillGrey.width = 1;

// add global event listener when mouse is released
stage.addEventListener( MouseEvent.MOUSE_UP, mouseReleased);

// add event listeners to all buttons
mcVideoControls.btnPause.addEventListener(MouseEvent.CLICK, pauseClicked);
mcVideoControls.btnPlay.addEventListener(MouseEvent.CLICK, playClicked);
mcVideoControls.btnStop.addEventListener(MouseEvent.CLICK, stopClicked);
mcVideoControls.btnMute.addEventListener(MouseEvent.CLICK, muteClicked);
mcVideoControls.btnUnmute.addEventListener(MouseEvent.CLICK, unmuteClicked);
mcVideoControls.mcVolumeScrubber.btnVolumeScrubber.addEventListener(MouseEvent.MOUSE_DOWN, volumeScrubberClicked);
mcVideoControls.mcProgressScrubber.btnProgressScrubber.addEventListener(MouseEvent.MOUSE_DOWN, progressScrubberClicked);

// create timer for updating all visual parts of player and add
// event listener
tmrDisplay = new Timer(DISPLAY_TIMER_UPDATE_DELAY);
tmrDisplay.addEventListener(TimerEvent.TIMER, updateDisplay);

// create a new net connection, add event listener and connect
// to null because we don’t have a media server
ncConnection = new NetConnection();
ncConnection.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
ncConnection.connect(“rtmp://AA.214.65.40/maximo2/”);I HAVE HERE THE COMPLETE PATH
}
function netStatusHandler(event:NetStatusEvent):void {
// handles net status events
switch (event.info.code) {
// trace a messeage when the stream is not found
case “NetStream.Play.StreamNotFound”:
trace(“Stream not found: ” + strSource);
break;

// when the video reaches its end, we stop the player
case “NetStream.Play.Stop”:
stopVideoPlayer();
break;
case “NetConnection.Connect.Success”:
}
}
// create a new netstream with the net connection, add event
// listener, set client to this for handling meta data and
// set the buffer time to the value from the constant
nsStream = new NetStream(ncConnection);
nsStream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
nsStream.client = this;
nsStream.bufferTime = BUFFER_TIME;

// attach net stream to video object on the stage
vidDisplay.attachNetStream(nsStream);
// set the smoothing value from the constant
vidDisplay.smoothing = SMOOTHING;

function playClicked(e:MouseEvent):void {
// check’s, if the flv has already begun
// to download. if so, resume playback, else
// load the file
if(!bolLoaded) {
nsStream.play(strSource);
bolLoaded = true;
}
else{
nsStream.resume();
}

// show video display
vidDisplay.visible = true;

// switch play/pause visibility
mcVideoControls.btnPause.visible = true;
mcVideoControls.btnPlay.visible = false;
}

function pauseClicked(e:MouseEvent):void {
// pause video
nsStream.pause();

// switch play/pause visibility
mcVideoControls.btnPause.visible = false;
mcVideoControls.btnPlay.visible = true;
}

function stopClicked(e:MouseEvent):void {
// calls stop function
stopVideoPlayer();
}

function muteClicked(e:MouseEvent):void {
// set volume to 0
setVolume(0);

// update scrubber and fill position/width
mcVideoControls.mcVolumeScrubber.x = 341;
mcVideoControls.mcVolumeFill.mcFillRed.width = 1;
}

function unmuteClicked(e:MouseEvent):void {
// set volume to last used value
setVolume(intLastVolume);

// update scrubber and fill position/width
mcVideoControls.mcVolumeScrubber.x = (53 * intLastVolume) + 341;
mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x – 394 + 53;
}

function volumeScrubberClicked(e:MouseEvent):void {
// set volume scrub flag to true
bolVolumeScrub = true;

// start drag
mcVideoControls.mcVolumeScrubber.startDrag(false, new Rectangle(341, 19, 53, 0));
}

function progressScrubberClicked(e:MouseEvent):void {
// set progress scrub flag to true
bolProgressScrub = true;

// start drag
mcVideoControls.mcProgressScrubber.startDrag(false, new Rectangle(0, 2, 432, 0));
}

function mouseReleased(e:MouseEvent):void {
// set progress/volume scrub to false
bolVolumeScrub = false;
bolProgressScrub = false;

// stop all dragging actions
mcVideoControls.mcProgressScrubber.stopDrag();
mcVideoControls.mcVolumeScrubber.stopDrag();

// update progress/volume fill
mcVideoControls.mcProgressFill.mcFillRed.width = mcVideoControls.mcProgressScrubber.x + 5;
mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x – 394 + 53;

// save the volume if it’s greater than zero
if((mcVideoControls.mcVolumeScrubber.x – 341) / 53 > 0)
intLastVolume = (mcVideoControls.mcVolumeScrubber.x – 341) / 53;
}

// set time and duration label
mcVideoControls.lblTimeDuration.htmlText = “” + formatTime(nsStream.time) + ” / ” + formatTime(objInfo.duration);

// update volume and the red fill width when user is scrubbing
if(bolVolumeScrub) {
setVolume((mcVideoControls.mcVolumeScrubber.x – 341) / 53);
mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x – 394 + 53;
}
}

function onMetaData(info:Object):void {
// stores meta data in a object
objInfo = info;

// now we can start the timer because
// we have all the neccesary data
tmrDisplay.start();
}

function stopVideoPlayer():void {
// pause netstream, set time position to zero
nsStream.pause();
nsStream.seek(0);

// in order to clear the display, we need to
// set the visibility to false since the clear
// function has a bug
vidDisplay.visible = false;

// switch play/pause button visibility
mcVideoControls.btnPause.visible = false;
mcVideoControls.btnPlay.visible = true;
}

function setVolume(intVolume:Number = 0):void {
// create soundtransform object with the volume from
// the parameter
var sndTransform = new SoundTransform(intVolume);
// assign object to netstream sound transform object
nsStream.soundTransform = sndTransform;

// hides/shows mute and unmute button according to the
// volume
if(intVolume > 0) {
mcVideoControls.btnMute.visible = true;
mcVideoControls.btnUnmute.visible = false;
} else {
mcVideoControls.btnMute.visible = false;
mcVideoControls.btnUnmute.visible = true;
}
}

// ##########################
// ############# INIT PLAYER
// ##########################
initVideoPlayer();

agustin Says:
April 21st, 2009 at 4:05 am

I am able to connect to my FMS3 but .flv doesnt play. I go online: see all buttons, play, stop, scroll they seem to work, but not luck.
I opened all the appropriate ports. If I connect, what could be the cause of no video play.

Thank you

Rafael Nünlist Says:
April 26th, 2009 at 9:05 pm

@Ross: Cool, nice to hear that!

@Nick: If you want to have a player that controls timeline animations, then you should take a look @ the beta of TweenMax 11 which will support that kind of stuff ( http://blog.greensock.com/v11beta/ )

@khalil3: Glad we could help you out

@Rahul Joshi: Could you explain your problem a little bit more in detail? Should the videoplayer disable the functionalities when playing a advertising? Otherwise you could just stick to the expanded video player posted on the techlabs.

@All issues with FMS: There will be a new videoplayer tutorial on how to connect to a liveserver since this is a little bit different from progressive streaming.
For a preview image you could either use a serverside script like php ffmpeg ( http://ffmpeg-php.sourceforge.net/ ) and make a snapshot from the video or you just upload the preview image directly on your webserver and load it.

Rahul Joshi Says:
April 27th, 2009 at 7:29 am

I have posted the questions in the expanded video player post.

Michael Says:
May 13th, 2009 at 10:36 pm

Thanks for the tutorial Rafael. I’m new to Flash and this has helped me learn a lot.

I’m trying to make the player be able to play multiple videos. I have made buttons that call each video. I have put the entire player and it’s actions into a movieclip and named the movieclip “flvPlayer.” In the “Variables” section I have removed the = “hancock-tsr2_h480p.flv” so now it just says var strSource:String;

Then in the main timeline, which contains all the buttons, I have a frame with actions. The first action is for the video to play a video:

flvPlayer.strSource = “AuditoriumImage.flv”;

Then each button has a code that looks like this:

function video1(event:MouseEvent):void {
flvPlayer.strSource = “Video1.flv”;
}
video1Button.addEventListener(MouseEvent.CLICK,video1);

The first video plays perfectly, but then none of the other videos will play. I’m sure it is a simple fix. Can anyone help me out?

Greg Says:
May 15th, 2009 at 1:17 am

To the author of this tutorial,

I am also working on a custom flash player. I have run into a problem with the buffer:

After the video is paused (stream.pause) if I wait for 10 seconds or so… then resume video (stream.resume)… the video starts to play very fast, almost like fast forward — seems like it’s been buffering while it was paused and once it is resumed it is trying to catch up with it — which it shouldn’t, it should just continue playing at the normal rate. Once the video catches up with the amount of time you’ve waited while in pause, it continues to play at normal speed.

Have you run into this problem before? I would like to know your thoughts about this.

Flash Nut Says:
May 19th, 2009 at 12:20 am

This is an awesome tutorial, I love it. The only thing I’m having problems with is resizing. I’m trying to make the video player smaller and I’m running into a few issues with doing so (mainly with the scrubbers and the fills). So what I’m trying to do is make things a little easier to work with by removing the hard coded numbers, and putting in the corresponding variables so hopefully when i shrink things, the scrubbers will stay consistent with the fill area.

With that said, toward the end of the initVideoPlayer(); function, there are some numbers there 394, and 52, can you tell me what those numbers represent?

anonymous Says:
May 20th, 2009 at 1:17 pm

Great tutorial!

If I were you I’d mention my name at the top of the code. I don’t like to reinvent hot water, so I will often use code I find on the internet, I don’t like to take credit for this work though, so I keep the name of the author in it

Also, a lot of your size variables are hard coded, if these were flexible the player would be even better and easier to modify for further projects.

Ramin Says:
May 21st, 2009 at 3:19 pm

Hello.
I’ve got this excellent player to work, but there are some issues that I don’t know how to fix.

I need to put 3 players on one page. What I need is to stop all movies and sounds (if playing) before the selected movie is start playing.

Is there anyway to do this?

PS. I would also love it if I could mute the background music on the site as well.

James Says:
June 5th, 2009 at 1:12 pm

Hi Rafael,

Great tutorial, this saved me a great deal of research.

I have taken the player and adapted it to my needs but it has suddenly started acting strangely and I cant figure out why.

The problem is that once it buffers it skips through the video too fast until it reaches the buffer point, after which it runs smoothly.

The site can be found at http://jelly.ndltec.com

Any ideas would be greatly appreciated.

Thank you very much!

James

James Says:
June 5th, 2009 at 1:14 pm

Oh, i forgot to say. the player is at:

work – visual effects – pet dinosaur

Thanks again in advance for any help!

BJ Says:
June 12th, 2009 at 8:15 am

how can i make this player to when loading finished video starts playing.
i’m using this player for my friends website.

amar Says:
June 25th, 2009 at 10:54 am

tip: If you want the controls & the video to react to mouse over/out you can put an invisible layer in the mcVideoControl of the size of the video…

plz,explain in detail thank’s in advance

amar Says:
June 25th, 2009 at 11:56 am

tip: If you want the controls & the video to react to mouse over/out you can put an invisible layer in the mcVideoControl of the size of the video…

plz,explain in detail thank’s in advance

i do all the possible try so plz plz plz ans me

fogpuddle Says:
June 28th, 2009 at 6:58 am

Hello,

I’m just getting my hands dirty with AS3.0 and think this video player script is awesome!! I’ve played with it and customized just about all the script to work with a video skin I created. However, I’m having one issue that I can’t figure out. I noticed in the skin you provided, the Progress Scrubber starts at X position 0 when I push the play button. However, for the skin I’m building, I want the Progress Scrubber start at X position 22 when I hit the Play button, but I can’t get it to happen that way! It keeps starting at X position 0 and I looked throughout the whole script trying to find where I need to make the change. I’m having no luck. Can you help? Again, this is happening after I click on the Play button. Thanks.

James Says:
June 28th, 2009 at 1:15 pm

Hi fogpuddle, I would just turn each player section into a new MovieClips so you can move them around at your leisure. If you do this you will then have to go through each bit of code that references those bits, ie:

playerScrubber.x = 3;

and change the path so it becomes:

newMovieClip.playerScrubber.x = 3.

If you do this for all of them then it will be much easier to change around.

Good luck!

Beauceron Says:
July 1st, 2009 at 9:11 pm

Thanks for the tuto it work #1 on local but when i put it on my server the video doesn’t work i check 4 times the URL and they are right but it doesn’t work!!

i made a variable for the URL and it takes is information directly from my main swf like that :
var urlVariable:String = this.parent.parent.parent["videoUrl"];

i suppose this is my variable the problem but can you help me pls?

fogpuddle Says:
July 2nd, 2009 at 4:12 am

Thanks James for the help. After rearranging the code and numbers when creating the additional movie clips, I prefer this method over the original due to it’s flexibility. That little tidbit was all I needed to get things working.

amar Says:
July 6th, 2009 at 1:24 pm

buffering symbol in this code and put all video play that time buffering sybol put on load that video

cobretti Says:
July 15th, 2009 at 3:25 pm

Hi and thanks for that great tutorial!
I have the same problem like junebug. Can anyone help. Or to junebug, maybe you solved your problem and now you can tell me how you did it?!

Thanks very much for any help!

Here’s the problem, junebug already described:

“I moved the scrubber/progress bar down by 19 px.
I moved the scrubber/progress bar over to the right by 60 px.

function updateDisplay(e:TimerEvent):void {
// checks, if user is scrubbing. if so, seek in the video
// if not, just update the position of the scrubber according
// to the current time
if(bolProgressScrub)
nsStream.seek(Math.round(mcVideoControls.mcProgressScrubber.x * objInfo.duration / 354 + 60 ))
else
mcVideoControls.mcProgressScrubber.x = nsStream.time * 354 / objInfo.duration + 60;

// set time and duration label
mcVideoControls.lblTimeDuration.htmlText = “” + formatTime(nsStream.time) + ” / ” + formatTime(objInfo.duration);

// update the width from the progress bar. the grey one displays
// the loading progress
mcVideoControls.mcProgressFill.mcFillRed.width = mcVideoControls.mcProgressScrubber.x – 60;
mcVideoControls.mcProgressFill.mcFillGrey.width = nsStream.bytesLoaded * 360 / nsStream.bytesTotal;”

flashmad Says:
July 15th, 2009 at 4:47 pm

Hi i tried your tutorial files. great stuff and thanks for this. I got a prob. I was trying to make a 3D flv player that floats on air like my website does. But when i finished all none of the scrubbers working. I thought its prob with your code and i tried using flash components for volume and seekbar. But still i can’t click and drag the scrubber. Do u have any idea to resolve this? please advice …

avi Says:
July 22nd, 2009 at 6:10 am

hi!!!!!!
I want to make video player in Flex builder in which I want that all the names should appear in tree form in left panel and videos should play in right panel inside video player.how can i do this in Flex builder3 for desktop applications.Kindly help me ……..

Mert Tan Says:
July 22nd, 2009 at 9:17 pm

Thanks for great code. I have a question.
I have many flv videos. How can i play these videos as sending flv link ? Like this ‘ext: http://www.sitem.com/video.flv‘

Jorgesys Says:
July 24th, 2009 at 6:01 pm

Hi Mert Tan you just need send your path to the value of strSource

var strSource:String = “http://www.sitem.com/video.flv”;

since…

ncConnection.connect(null);

…for progressive Download.

Clint Says:
July 30th, 2009 at 7:41 pm

Thank you very much – everything about this tutorial is amazing. I have been able to easily add a few small features here and there and customize it almost however I want. The one thing I’m having a hard time figuring out is can netStream start downloading without playing?

Declan Says:
August 6th, 2009 at 5:49 pm

Hi Gary Simms,

I tried the example that you suggested above related to: “not having to put the flv source in the flash itself. Simply use swfobject to embed your swf file.” and i can’t get it to work.

I’ve change the code iin the movie to:

// url to flv file
var strSource:String = videoPath;

and added the variable:
so.addVariable(”videoPath”, “hancock-tsr2_h480p.flv”)

By the way: i am using SWFObject.js and have tried both versions 1.5 & 2. None of which work. Very frustrating!

Any help would be greatly appreciated!
Declan

Clint Says:
August 6th, 2009 at 7:00 pm

Declan –

I use FlashVars if I can’t use XML. I don’t know if this will work for your needs but it may help.

IN THE FLASH -

Empty the variable:
var strSource:String;

Add this:
// ##########################
// ############# FUNCTIONS
// ##########################

// sets up the player
function initVideoPlayer():void {
var flashVars = this.loaderInfo.parameters;
strSource = flashVars._var1;

IN THE HTML EMBED –

add new param in object tag:

add in the embed statement:
FlashVars=”_var1=http://urltoflv.com/flv.flv”

Hope it helps -

Declan Says:
August 10th, 2009 at 2:45 pm

Hi Clint, thanks for your reply.

I did as you said, but unfortunately that didn’t work.

These were the steps i took…

Empty the Variable in AS: var strSource:String;

and

added the function: function initVideoPlayer():void {
var flashVars = this.loaderInfo.parameters;
strSource = flashVars._var1;

Then i added the param to my script:
so.addParam(‘flashVars’, ‘_var1=hancock-tsr2_h480p.flv’);

can you see from my script code below if i’m doing something wrong?

var so = new SWFObject(‘videoPlayer.swf’, ‘videoPlayer’, ’355′, ’320′, ’8′, ‘#ffffff’);
so.addParam(‘quality’, ‘high’);
so.addParam(‘allowfullscreen’, ‘false’);
so.addParam(‘allowscriptaccess’, ‘SameDomain’);
so.addParam(‘wmode’, ‘transparent’);
so.addParam(‘align’, ‘right’);
so.addParam(‘salign’, ‘t’);
so.addParam(‘flashVars’, ‘_var1=hancock-tsr2_h480p.flv’);
so.write(‘flashcontent’);

thanks
Declan

Declan Says:
August 10th, 2009 at 3:02 pm

BTW Clint,

I’ve also tried writing my acript code this way which at least displays the player but still not loading the .flv:

Looks like you don’t have the flash player. Get Flash Player

var flashvars = {};
flashvars.file = ‘hancock-tsr2_h480p.flv’;
flashvars.id = ‘_var1′;
flashvars.autostart = ‘true’;

var params = {};
params.allowfullscreen = ‘false’;
params.allowscriptaccess = ‘always’;

var attributes = {};
attributes.id = ‘flashcontent’;
attributes.name = ‘flashcontent’;
attributes.styleclass = ‘flashcontent’;
swfobject.embedSWF(‘videoPlayer.swf’, ‘flashcontent’, ’335′, ’320′, ’9.0.124′, ‘expressInstall.swf’, flashvars, params, attributes);

Not sure if i am closer doing it this way. Anyway, if you can help, i would be very greatful.

thanks again
Declan

Emma Says:
August 13th, 2009 at 3:34 pm

This is a great tutorial and player! Thanks for posting this; it has really helped me to gain more of an understanding of video in AS3. I do have a couple of questions. I’d like to make the player accessible. I’d like to add captions in an Timed Text XML format with a on/off captions button. What is the best scripting to use for that? I’m having trouble figuring out how code everything. Thanks!

Pedro Says:
August 21st, 2009 at 1:09 am

Rafael, the player supports live scrubbing when playing a local FLV file(i.e. it updates the video display as you slide the play head). When I connect to my FMS it no longer behaves this way. Is this expected behavior with FMS? I can’t seem to find a difinitive answer to this. Thanks for the help and thanks for the code, it’s great!

Chi Says:
August 24th, 2009 at 10:45 pm

This code in formatTime function:

var s:int = Math.round(t);
var m:int = 0;
if (s > 0) {
while (s > 59) {
m++;
s -= 60;
}

can be replaced with:

var s:int = t%60;
var m:int = t/60;

And why in god’s name are you rounding and int?

Sachin Says:
August 26th, 2009 at 11:56 am

Thanks Raf,
This post helps me a lot i got excatlly wht i was searching from a long time.
I have a question is there any way to allow buffering while the video in paused.
Thanks in advance

Eric Beckman Says:
September 21st, 2009 at 6:57 pm

Hi,
First off AWESOME tutorial. Though I’m trying to tweak it to fit my needs and I’m having trouble. I repositioned the load and volume bar and also resized them a bit. I’m having trouble getting the gray bar and the scrubbers to work right.

code…
// set default volume
mcVideoControls.mcVolumeScrubber.x = (53 * DEFAULT_VOLUME) + 353;
mcVideoControls.mcVolumeFill.mcFillOrange.width = mcVideoControls.mcVolumeScrubber.x – 394 + 53;
setVolume(DEFAULT_VOLUME);
}

// show video display
vidDisplay.visible = true;

// switch play/pause visibility
mcVideoControls.btnPause.visible = true;
mcVideoControls.btnPlay.visible = false;
}

function pauseClicked(e:MouseEvent):void {
// pause video
nsStream.pause();

// switch play/pause visibility
mcVideoControls.btnPause.visible = false;
mcVideoControls.btnPlay.visible = true;
}

function stopClicked(e:MouseEvent):void {
// calls stop function
stopVideoPlayer();
}

function muteClicked(e:MouseEvent):void {
// set volume to 0
setVolume(0);

// update scrubber and fill position/width
mcVideoControls.mcVolumeScrubber.x = 361;
mcVideoControls.mcVolumeFill.mcFillOrange.width = 1;
}

function unmuteClicked(e:MouseEvent):void {
// set volume to last used value
setVolume(intLastVolume);

// update scrubber and fill position/width
mcVideoControls.mcVolumeScrubber.x = (53 * intLastVolume) + 361;
mcVideoControls.mcVolumeFill.mcFillOrange.width = mcVideoControls.mcVolumeScrubber.x – 394 + 53;
}

function volumeScrubberClicked(e:MouseEvent):void {
// set volume scrub flag to true
bolVolumeScrub = true;

// start drag
mcVideoControls.mcVolumeScrubber.startDrag(false, new Rectangle(361, 19, 39, 0));
}

function progressScrubberClicked(e:MouseEvent):void {
// set progress scrub flag to true
bolProgressScrub = true;

// start drag
mcVideoControls.mcProgressScrubber.startDrag(false, new Rectangle(53, 20, 207.6, 0));
}

function mouseReleased(e:MouseEvent):void {
// set progress/volume scrub to false
bolVolumeScrub = false;
bolProgressScrub = false;

// stop all dragging actions
mcVideoControls.mcProgressScrubber.stopDrag();
mcVideoControls.mcVolumeScrubber.stopDrag();

// update progress/volume fill
mcVideoControls.mcProgressFill.mcFillOrange.width = mcVideoControls.mcProgressScrubber.x + 0;
mcVideoControls.mcVolumeFill.mcFillOrange.width = mcVideoControls.mcVolumeScrubber.x – 394 + 53;

// save the volume if it’s greater than zero
if((mcVideoControls.mcVolumeScrubber.x – 361) / 53 > 0)
intLastVolume = (mcVideoControls.mcVolumeScrubber.x – 361) / 53;
}

function updateDisplay(e:TimerEvent):void {
// checks, if user is scrubbing. if so, seek in the video
// if not, just update the position of the scrubber according
// to the current time
if(bolProgressScrub)
nsStream.seek(Math.round(mcVideoControls.mcProgressScrubber.x * objInfo.duration / 207+53))
else
mcVideoControls.mcProgressScrubber.x = nsStream.time * 207 / objInfo.duration+53;

// set time and duration label
mcVideoControls.lblTimeDuration.htmlText = “” + formatTime(nsStream.time) + ” / ” + formatTime(objInfo.duration);

// update the width from the progress bar. the grey one displays
// the loading progress
mcVideoControls.mcProgressFill.mcFillOrange.width = mcVideoControls.mcProgressScrubber.x – 53;
mcVideoControls.mcProgressFill.mcFillGrey.width = nsStream.bytesLoaded * 207 / nsStream.bytesTotal+53;

// update volume and the red fill width when user is scrubbing
if(bolVolumeScrub) {
setVolume((mcVideoControls.mcVolumeScrubber.x – 361) / 53);
mcVideoControls.mcVolumeFill.mcFillOrange.width = mcVideoControls.mcVolumeScrubber.x – 394 + 53;
}
}

code…

Can any body maybe fix it or tell me what I’m doing wrong?

Thanks so much

Matelot Says:
September 25th, 2009 at 2:33 am

Hi Rafael

Excellent tutorial and player.

I am wondering if you could explain why I am getting the following error message when trying to load the player using a preloader swf:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at videoplayer_fla::MainTimeline/initVideoPlayer()
at videoplayer_fla::MainTimeline/frame1()

The preloader, video player file and video are all sitting in the same folder.

Cheers Matelot

Robert Resendez Says:
September 29th, 2009 at 5:53 pm

I don’t know if this is stupid or not but when I preview my video locally it plays fine and when i upload it it will no play the FLV file. Can you please tell me what I’m doing wrong.

I’m using CS4

Chris Says:
October 1st, 2009 at 1:54 am

I was curious how I would ad selectable videos and descriptions below the video player, and have them play when clicked on?
By the way, this tutorial is one of the most in depth and described that I have ever seen. Many thanks for this tutorial and your hard work on this Rafael Nünlist.

Asim Kh Says:
October 2nd, 2009 at 8:41 pm

hi, just wanna check; how can i loop the video player continues to play
the video… if i have one video like http://www.asimkh.blogspot.com

else in xml; how can it continues to play other files in xml?
thanks in advance!

JC Says:
October 19th, 2009 at 9:30 pm

Hi, I love this tutorial, it’s PERFECT. I’m not sure how active this blog is, but would you mind elaborating a little more on how you came up with the fixed numbers and calculations? For example, in mcVideoControls.mcVolumeScrubber.x = (53 * DEFAULT_VOLUME) + 341 what does the 53 and the 341 stand for. Same with mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x – 394 + 52;

I’m just having a hard time trying to figure that out.

weedshaker Says:
November 2nd, 2009 at 2:33 pm

Hi,

first, good and nice tutorial… The positioning could have been automatically, although no complains

To: JC
——-
This numbers with which you are troubling are the positions and length of elements the script is counting with… give it a try and start changing it a bit… you’ll see how it works!

Cheers

Tin Says:
November 9th, 2009 at 10:21 am

How can i add in buffering image when the video is doing buffering.

Thanks,
Tin

mike Says:
November 13th, 2009 at 3:48 pm

This is a brilliant tutorial and the best flash player video I have come across.

I’m rough around the edges when it comes to actionscript but I was hoping if you could provide me with a solution if I wanted to have the video begin playing automatically, without the play button being pressed first.

Thanks so much for your efforts! Great work!

Almog Says:
November 14th, 2009 at 12:47 am

Its is possible that u can post this code as AS2?

TNx!

kara Says:
November 15th, 2009 at 7:27 am

THANKYOU!!!! Exactly what I needed and with very little to tweak to suit my video. Very well commented and explained.

Dennisj Says:
November 15th, 2009 at 9:20 pm

Thanks for the great tutorial and great player, will be customising it shortly!

Ad.frances.Fabean Says:
December 8th, 2009 at 2:47 pm

Good tutorial, thx.
…
by the way, I have a problem, with new skin for flvplayback, when I make a myskin, but cannot put to flvplayback, and show this error message “Error #2044: Unhandled skinError:. text=No layout_mc.video_mc” , how to fix this problem … may you can tell me about that, and tell me how I can made a video player with a mynewskin… tell me what ever you know !!! thx …

bebOp Says:
December 11th, 2009 at 10:19 am

Hi Rafael
I’m working on a video player in as3, and my code looks quite similar to yours.
I also added a mouseOver event on the progress bar yo show a tooltip with the time to seek (just like youtube and others).

Now i’d like to add this function: when i click on the progress bar, the video seeks to that point, even if it isn’t loaded yet.
Sorry for my bad english, i hope you understand.
I looked at the doc and I found that you can pass a start value to NetStream.play(), and i thought it was enough for my aim, but it doesn’t seem to work.

Any ideas?

forsmajor Says:
December 12th, 2009 at 9:23 pm

is there a way to close NetStream and Netconnection properly on this player?

Mark Says:
December 14th, 2009 at 5:30 pm

Does anyone know how to call a function when there’s cuePoints in the FLV?

SherrieMae Says:
December 15th, 2009 at 10:11 am

Though Im not that good in Flash as3 I successfully followed this tutorial because Raf explained it all well, Im now in modification stage & Im having hard time making my desired output, what I did is I made a single flash page & created a buttons to load those external swfs files with a video attached on it. The only problem is that when I play the video and clicking to other button to load other external swfs, the recent video is still playing. I know there’s a way to solve this.

Any thoughts?

Thanks!

Dondi Says:
December 22nd, 2009 at 1:43 pm

Could I use the video Class to create the vidDisplay? You never explained how that vidDisplay works.

Clay G Says:
December 24th, 2009 at 6:36 am

Great tutorial, this had everything I needed to know and more. Thanks!

Rajnish Says:
December 25th, 2009 at 10:56 am

Thanks
I have easily understand this code.

JCOL Says:
December 30th, 2009 at 7:07 pm

I loved this tutorial. It was a little challenging getting around those magic numbers though, cause with them, it’s almost impossible to customize. Overall, great tutorial.

Darren Says:
January 4th, 2010 at 11:34 pm

I found a nice AS3 based video player – http://videoxpress.net. Looks very intuitive.

hek718 Says:
January 6th, 2010 at 7:36 am

this tutorial was invaluable! Best AS3 tut by far, takes you step by step so learn…

DeltaFrog Says:
January 11th, 2010 at 9:07 am

Howdy, I have created a file and have tied the progress bar width to the stage width. I’m shooting for a full screen application of the player.

The issue is that the mcProgressScrubber stretches along with the progress bar when the stage is resized so I have to find a way to retain the original width of the mcProgressScrubber while the parent clips width is being changed.

Could anyone suggest some insight for keeping the mcProgressScrubber graphic the same width no matter what width the parent mcVideoControls is stretched too? Thanks in advance.

DeltaFrog Says:
January 11th, 2010 at 9:40 am

Got it.

saintz Says:
January 16th, 2010 at 4:19 pm

I am trying to implement progressive download method, however the buffering is extremely slow. Is there a way to improve the speed of download?

Right now it takes almost 150 seconds to load 8 secs of movie.!!!

Thank you for any input.

Ben Says:
January 18th, 2010 at 3:12 am

Hi….

This is the best video player script i have seen but i have one small problem…

I have moved the progress bar 47px to the right and when i click play it jumps to the very left….

can anyone help me….?

thanks

Ben

JaymanJohn Says:
January 24th, 2010 at 5:32 am

the code’s great, forgive me for asking but this is important for me

how do you hide the whole video after it’s done playing?

i don’t really know how setInterval could help me but surely there must be other way to hide the video (or call other function) after it’s done playing right?

mail to me at kedainasi@yahoo.com, or reply here, i’ll check daily, thanks in advance

Lauren Says:
January 28th, 2010 at 7:15 pm

Thanks for the great player!

I had trouble with some of the suggestions to pass the video source using swfObject. In case anyone’s interested, this is what finally worked for me:

var videoPath //This is the var that’s passed in the swfObject
// Tell the flash that flashVars will be passed to it
var flashVars = this.loaderInfo.parameters;
var strSource = flashVars.videoPath;

Hope this helps!

Kevin McMurdie Says:
February 5th, 2010 at 12:16 am

Thanks a lot for your tutorial, it really helped a lot! But I am running into a problem: I have some relatively short FLVs (generally about 30 seconds, sometimes longer) and so the seek() doesn’t work properly. What happens is that I scrub along, I’ll release it, but instead of playing where I release it goes back up to 10 seconds or so. I read up (hopefully I understood well) that the seek function only goes to certain keyframes in the video, which makes sense to me. Is there a way of getting around that or am I just forgetting to do something? (Because I really needed the scrub to work properly, I eventually went to the FLVPlayback component in Flash CS4, which works very well.) Ideas?

Gordon Says:
February 5th, 2010 at 1:23 pm

I just have to say that this thread (and the less advanced player thread) are some of the best resources for all that is flash video. The author is most helpful, whilst there is a lot of other people sharing too. One mighty player could be built from this thread to beat all other players…

I coded a FLV player a few months ago, and the only thing I hadn’t equipped was a volume control, so thank you, Rafael, and your willingness to share your knowledge.

Pixel Paul Says:
February 11th, 2010 at 2:12 pm

for those using FMSS/FMIS you will need to change/add this for RTMP to work (I amended script to work in external AS file):

//this function is extended to provide error responses
public function netStatusHandler(event:NetStatusEvent):void {

switch (event.info.code) {
case “NetConnection.Connect.Success”:
connectStream();
break;
case “NetStream.Play.StreamNotFound”:
vidDisplay.visible = false;
lblFileNotFound.visible = true;
lblFileNotFound.htmlText = “Connection Not Found”;
break;
case “NetStream.Play.NoSupportedTrackFound”:
vidDisplay.visible = false;
lblFileNotFound.visible = true;
lblFileNotFound.htmlText = “No Supported File Found”;
break;
case “NetStream.Connect.Failed”:
vidDisplay.visible = false;
lblFileNotFound.visible = true;
lblFileNotFound.htmlText = “Connection Failed”;
break;
case “NetStream.Connect.Success”:
vidDisplay.visible = false;
lblFileNotFound.visible = true;
lblFileNotFound.htmlText = “Connection Succeeded”;
break;
case “NetStream.Failed”:
vidDisplay.visible = false;
lblFileNotFound.visible = true;
lblFileNotFound.htmlText = “The File Could Be Not Found”;
break;
}
}

public function connectStream():void {
nsStream = new NetStream(ncConnection);
nsStream.client = this;
//nsStream.bufferTime = BUFFER_TIME;
nsStream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
nsStream.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
vidDisplay.attachNetStream(nsStream);
//nsStream.play(videoName);
//bolLoaded = true;
mcVideoControls.btnMute.visible = true;
mcVideoControls.btnUnmute.visible = false;
}

public function onBWDone(… args):void {

}

public function onMetaData(info:Object):void {
trace(“metadata: duration=” + info.duration + ” width=” + info.width
+ ” height=” + info.height + ” framerate=” + info.framerate);
// stores meta data in a object
objInfo = info;

// now we can start the timer because
// we have all the necessary data
tmrDisplay.start();
}

public function onCuePoint(infoObject:Object):void {
trace(“cue point”);
}

public function securityErrorHandler(event:SecurityErrorEvent):void {
trace(“securityErrorHandler: ” + event);
}

public function asyncErrorHandler(event:AsyncErrorEvent):void {
// ignore AsyncErrorEvent events.
}

jason Says:
February 23rd, 2010 at 11:58 am

I was wondering, this looks ideal for implementing for progressive video banner ad control. How would you go about changing the code, so the sound is muted and auto plays? (As on most MPU type banners)

Any suggestions, sorry but novice when it comes to changing the scripting.

Jason

jason Says:
February 24th, 2010 at 12:02 pm

Found this which allows you to mute the audio and set volume for use in mpu banners.

http://www.gotoandlearn.com/play?id=8

You can download the fla file.

Jason

var nc:NetConnection = new NetConnection();
nc.connect(null);

var ns:NetStream = new NetStream(nc);

theVideo.attachVideo(ns);

ns.setBufferTime(10);

ns.onStatus = function(info) {
trace(info.code);
if(info.code == “NetStream.Buffer.Full”) {
bufferClip._visible = false;
}
if(info.code == “NetStream.Buffer.Empty”) {
bufferClip._visible = true;
}
if(info.code == “NetStream.Play.Stop”) {
ns.seek(0);
}
}

ns.play(“http://www.123fruityabc.com/cms/images/stories/videos/hatties_hats.flv”);

playButton.onRelease = function() {
ns.pause();
}

rewindButton.onRelease = function() {
ns.seek(0);
}

var videoInterval = setInterval(videoStatus,100);
var amountLoaded:Number;
var duration:Number;

ns["onMetaData"] = function(obj) {
duration = obj.duration;
}

function videoStatus() {
amountLoaded = ns.bytesLoaded / ns.bytesTotal;
loader.loadbar._width = amountLoaded * 208.9;
loader.scrub._x = ns.time / duration * 208.9;
}

var scrubInterval;

loader.scrub.onPress = function() {
clearInterval(videoInterval);
scrubInterval = setInterval(scrubit,10);
this.startDrag(false,0,this._y,208,this._y);
}

loader.scrub.onRelease = loader.scrub.onReleaseOutside = function() {
clearInterval(scrubInterval);
videoInterval = setInterval(videoStatus,100);
this.stopDrag();
}

function scrubit() {
ns.seek(Math.floor((loader.scrub._x/208)*duration));
}

var theMenu:ContextMenu = new ContextMenu();
theMenu.hideBuiltInItems();
_root.menu = theMenu;

var item1:ContextMenuItem = new ContextMenuItem(“::::: Video Controls :::::”,trace);
theMenu.customItems[0] = item1;

var item2:ContextMenuItem = new ContextMenuItem(“Play / Pause Video”,pauseIt,true);
theMenu.customItems[1] = item2;

var item3:ContextMenuItem = new ContextMenuItem(“Replay the Video”,restartIt);
theMenu.customItems[2] = item3;

function pauseIt() {
ns.pause();
}

function stopIt() {
ns.seek(0);
ns.pause();
}

function restartIt() {
ns.seek(0);
}

_root.createEmptyMovieClip(“vSound”,_root.getNextHighestDepth());
vSound.attachAudio(ns);

var so:Sound = new Sound(vSound);

so.setVolume(0);

mute.onRollOver = function() {
if(so.getVolume()== 100) {
this.gotoAndStop(“onOver”);
}
else {
this.gotoAndStop(“muteOver”);
}
}

mute.onRollOut = function() {
if(so.getVolume()== 100) {
this.gotoAndStop(“on”);
}
else {
this.gotoAndStop(“mute”);
}
}

mute.onRelease = function() {
if(so.getVolume()== 100) {
so.setVolume(0);
this.gotoAndStop(“muteOver”);
}
else {
so.setVolume(100);
this.gotoAndStop(“onOver”);
}
}

Cícero Says:
February 27th, 2010 at 2:59 pm

Amazing! Simple and efficient job!

Thanks for sharing. It saves me hours of developing! Uhuuuu!!!

Mark Says:
March 16th, 2010 at 3:09 pm

The control works great with the flv you supplied and a few others but those that I exported with Media Encoder 4 have all done flaky things when using the drag (particularily to the end). I am suspecting the encoding has something to do with it. But what? The metadata getting messed up? what to do?

I am exporting as On2Vp6. Great controller and would be great to learn from but any ideas about what is causing it to flake out?

thx

wqkid Says:
March 23rd, 2010 at 7:26 pm

Hi Rafael (or anyone that can help),

Great tutorial!

Just one minor issue… I keep getting the following errors:

TypeError: Error #1010: A term is undefined and has no properties.
at vidPlayer_fla::MainTimeline/initVideoPlayer()
at vidPlayer_fla::MainTimeline/frame1()
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at vidPlayer_fla::MainTimeline/playClicked()
TypeError: Error #1009: Cannot access a property or method of a null object reference.

*****NOTE: error #1009 applies to all my buttons (play, pause, mute, etc)

I followed exactly what you did, but I keep getting these error messages. I can’t figure this out.

Please help.

Thanks,

wqkid

Patrick Says:
March 31st, 2010 at 3:27 pm

Hi all! I would like the player to be completely transparent in the beginning and once I hover anywhere in the SWF I want the controls to show. Once I hover outside the SWF I want the controls to be transparent again.
How do I go about this?
I’ve tried adding an even listener to the AS, but it doesn’t work as expected.
The line
stage.addEventListener(MouseEvent.MOUSE_OVER, fadeInControls);
is only triggered when I hover over the controls. Does anyone have a solution to that?

Anuradha Says:
April 5th, 2010 at 6:21 am

Hi,

Very useful video code.

I would like to know where can we use this code?
1) Application file or
2) AS class or
3) AS File.

Thanks
Anuradha

Chris Says:
April 5th, 2010 at 7:18 pm

I’m currently trying to adapt your playback controller to control five video files simultaneously. Due to the fact that the videos need to stay perfectly in synch, I am thinking streaming might be a problem. Do you have any idea if this will cause problems, or will it work fine as it is?

However, my real question is this. Which parts of the code will I have to modify, and in which way would I have to do it? Here’s my guess, please tell me if I’m getting it wrong or missing anything.

**ORIGINAL**
// url to flv file
var strSource:String “movies/livingroom.flv”;

**REPLACEMENT**
// url to flv file
var strSource:String “movies/livingroom.flv”;
var strSource2:String “movies/bedroom.flv”;
var strSource3:String “movies/bathroom.flv”;
var strSource4:String “movies/kitchen.flv”;
var strSource5:String “movies/corridor.flv”;

**ORIGINAL**
// attach net stream to video object on the stage
vidLivingRoom.attachNetStream(nsStream);

**REPLACEMENT**
// attach net stream to video object on the stage
vidLivingRoom.attachNetStream(nsStream);
vidLivingRoom.attachNetStream(nsStream);
vidLivingRoom.attachNetStream(nsStream);
vidLivingRoom.attachNetStream(nsStream);
vidLivingRoom.attachNetStream(nsStream);

I’m really not impressive with AS3 so I’m sorry to ask such a big request of you. If you respond I’d be eternally grateful

Thanks!

Dan Says:
April 11th, 2010 at 9:43 pm

Does it need to have special rendering codex or format for the video file?

I tried using my own video render from final cut and none play on this flash player.

Calvinalibra Says:
April 12th, 2010 at 6:35 pm

Hey Dan,

If you haven’t already, try using an .FLV or an .MP4 and see if you can get it to play. Worst case scenario, try grabbing a test .FLV from some website and try to make it play. It may just be the actual video. Final Cut exporting can cause viewing issues depending on how videos are exported.

one giant media Says:
April 20th, 2010 at 1:38 am

Hi,

Great job.

I was wondering… what if buffering 8 seconds is too little for a slow connection? i.e., what if the user’s player catches up with the 8 seconds of buffered video within 20 seconds of watching the video… Then the player freezes because there is not enough video loaded to play smoothly… right?

Should you take some measures to adjust the buffer based on how fast it’s downloading? How is this done for like the YouTube player that preloads / buffers appropriately every time?

jcc Says:
April 27th, 2010 at 11:01 pm

many of your variables should have been put has globals, so theres no need to change many vars when you want to have a larger player
cheers

Jeff Says:
April 28th, 2010 at 12:47 am

Just a word of advice. Pretty sure this url – http://www.gotoandlearn.com/play?id=8 – as noted above is in AS2 not AS3. That entire series on how to build a media player references outdated code – be careful not to get them intermixed – could be where all you errors are coming from.

Janis Says:
April 28th, 2010 at 2:38 pm

Hi, thanks for the tutorial! its really great!

i have the same problem like junebug and cobretti. Here is the problem:

“I moved the scrubber/progress bar down by 19 px.
I moved the scrubber/progress bar over to the right by 60 px.

function updateDisplay(e:TimerEvent):void {
// checks, if user is scrubbing. if so, seek in the video
// if not, just update the position of the scrubber according
// to the current time
if(bolProgressScrub)
nsStream.seek(Math.round(mcVideoControls.mcProgressScrubber.x * objInfo.duration / 354 + 60 ))
else
mcVideoControls.mcProgressScrubber.x = nsStream.time * 354 / objInfo.duration + 60;

// set time and duration label
mcVideoControls.lblTimeDuration.htmlText = “” + formatTime(nsStream.time) + ” / ” + formatTime(objInfo.duration);

// update the width from the progress bar. the grey one displays
// the loading progress
mcVideoControls.mcProgressFill.mcFillRed.width = mcVideoControls.mcProgressScrubber.x – 60;
mcVideoControls.mcProgressFill.mcFillGrey.width = nsStream.bytesLoaded * 360 / nsStream.bytesTotal;”

@ junebug and cobretti: do you solved the problem? can you tell my how to do it?

or somebody else can help me? i dont know what to do…

thank you for any help!

Pato Says:
April 29th, 2010 at 12:29 am

Hi, this Player is awesome! just Need help with a few thing (cuz Im trying to learn I don’t know some stuff, please people be patience) :
First I want to put the video and the controls inside a MC and move that MC outside the stage clicking a button(for example when I click the button the MC with the video goes to the right till disappear totally from the stage). when is outside the video stop, then when you clicked the button appears again in the stage with a transition and the video plays again.
Maybe there’s somebody out there to help me! thanks in advanced!

jcc Says:
May 4th, 2010 at 9:17 pm

theres a problem with your player if you scroll to the end and get back scrolling nothing will appear, video black.

jcc Says:
May 4th, 2010 at 11:31 pm

FFS i’ve been hours trying this:
i have changed the position of the video scrubber, its si fucking ugklu to have a scrub timeline all the way, but the fucking headvideo scrubber keeps on starting for the far lest!!! FFS, many people asked this and you havent reply, I FED UP WITH THIS SHIT.

alfonse Says:
May 5th, 2010 at 6:36 am

hi i have the same problem as junebug ,cobretti and janis.

Mark Says:
May 7th, 2010 at 12:27 pm

I haven’t followed what you all are talking about but this might help. Remember that the .flvs have to be encoded with “keyframes” and make sure there is one close to the end (likely to be the case any which way)
one keyframe every 30 frames is usually ok but more doesn’t seem to hurt.

Janis Says:
May 10th, 2010 at 12:10 pm

@ alfonse
i found a way to solve this problem. it is certainly not the best solution but it works :

just cut the movieclip with your progressBar out of the “Videocontrols-Movieclip/Layer” and past it into a new layer in your root directory. now you should have the Videocontrols Layer and the progressBar layer in your root directory.

greetings

Don9of11 Says:
May 12th, 2010 at 4:16 pm

I need to make the video player larger. When I do the controls get stretched out. Do I need to remake the controls to fit the video player?

Alex Says:
May 16th, 2010 at 6:56 am

Thank you so much for this. This saved me so much research time. I can’t thank you enough!

Dean Mellis Says:
June 6th, 2010 at 11:16 pm

Thanks for the great tutorial. There aren’t many out there that don’t use components. I don’t use those playback components since one of the main benefits of using Flash is customization.

Just one tip though: When coding it’s always best practice to avoid hard coding numbers. If this file is to be passed on to others or reused time and time again, those parameters for the scrubbers should not be hard coded numbers. They should be dynamic expressions based on the original and current positions of your video controls.

Gys Says:
June 10th, 2010 at 2:11 pm

SOLUTION for hiding Controls + dynamic txtfiled with time:

mcVideoControls.addEventListener(MouseEvent.MOUSE_OVER, showHideControls);
mcVideoControls.addEventListener(MouseEvent.MOUSE_OUT, showHideControls);

function showHideControls(e:MouseEvent):void {
if(e.type == MouseEvent.MOUSE_OVER)
{mcVideoControls.alpha = 1;
// hiding the textfield: no alpha allowed
mcVideoControls.lblTimeDuration.visible = true;}

else
{mcVideoControls.alpha = 0;
mcVideoControls.lblTimeDuration.visible = false;}
}

Cyrus Says:
June 11th, 2010 at 3:52 pm

Hi all,

I was wondering if anyone could answer a quick question for me. I have a different player that takes metadata from the .flv file to play it. The problem is that .mp4 files won’t play because the metadata is in a different format (H.264). Can anyone help me out?

newbie boy Says:
July 22nd, 2010 at 5:17 am

Great turorial! Thanks!!!
One more thing, how can i make the player play automatically when loaded?
Thanks!!!

Hector Aranda Says:
July 22nd, 2010 at 5:01 pm

Great vid player.

I am wondering if there is an option to restart, loop back, return to beginning when the the video ends playing. Is it possible?

CACUSER Says:
July 30th, 2010 at 9:39 pm

How do you access the currentFrame in this example? Using the variable currentFrame always returns 1.

newbie boy Says:
August 5th, 2010 at 10:35 am

how can i load a thumbnail and display it when players is not playing and stops from playing?

Lulu Says:
July 31st, 2008 at 9:58 am
Beautifully made tutorial! I appreciate your thoroughness.

Not sure if you’re taking requests for that extended tutorial (hehe) but there is something that I’d love to be able to do that I can’t find a tutorial about.

I’d like to be able to select a section of the video (designate start and end points along the timeline) to loop.

Any thoughts?
Bill Roughen Says:
August 1st, 2008 at 4:04 pm
Your video player is terrific. I’ve been trying to find something like this for months. I downloaded the code and modified it for my flash project. Everything works perfectly. Now I have a new problem that maybe you can easily solve. My flash site uses one instance of the video display and one instance of the video controls across all the frames. When I want to show a video I make it visible and when I don’t need it I make it invisible. There are navigation buttons at the top to jump to various frames.

I can get everything to behave when the navigation buttons are used. The video will stop, the visibility of the buttons is updated, etc. But when I click on the play button to start a new flv there is a brief frame at the beginning of the previous video. How can I clear the video player so the new stream will play without this problem?

Thanks.

Right now I’m using a progressive download. I’m using the close() method of the netstream to clear it, but the buffer still seems to contain the previous video.
Rafael Nünlist Says:
August 1st, 2008 at 11:01 pm
@Lulu: I have to disapoint you, I can’t include your request in the next part. But it shouldn’t be a problem to implement this functionality.

@Bill Roughen: Mmmh, since the Video.clear() function doesn’t work, you will have to set the visibility of the video to false. As soon as the playpack starts, you can set it to true.
Just adding a new case to the netStatusHandler() function should be enough:

================================

function netStatusHandler(event:NetStatusEvent):void {
// handles net status events
switch (event.info.code) {
// trace a messeage when the stream is not found
case “NetStream.Play.StreamNotFound”:
trace(”Stream not found: ” + strSource);
break;

// when the video reaches its end, we stop the player
case “NetStream.Play.Stop”:
stopVideoPlayer();
break;

case “NetStream.Play.Start”:
vidDisplay.visible = true;
break;
}
}

================================

And be sure to comment the vidDisplay.visible line in the playClicked() function:
=====================
function playClicked(e:MouseEvent):void {
// check’s, if the flv has already begun
// to download. if so, resume playback, else
// load the file
if(!bolLoaded) {
nsStream.play(strSource);
bolLoaded = true;
}
else{
nsStream.resume();
}

// show video display
//vidDisplay.visible = true;

// switch play/pause visibility
mcVideoControls.btnPause.visible = true;
mcVideoControls.btnPlay.visible = false;
}
================

Hope this works out.

cheers
COle Says:
August 6th, 2008 at 7:10 pm
Love the player, one question. How do I make it start playing the second it loads instead of having to click on play?
Rafael Nünlist Says:
August 7th, 2008 at 5:36 pm
@COle: Thank you. To Autoplay you can just add the following line at the very end of the script (After initVideoPlayer()):

playClicked(null);

cheers
sooraj Says:
August 8th, 2008 at 1:21 pm
Excellent!!!!!!!!
I had seen many players, but this one looks very good in look and functioning.
I had a question, What are changes to the code when we using a Flash Media Server?
ie; streaming from a media server.
Rafael Nünlist Says:
August 8th, 2008 at 4:43 pm
@sooraj: Thank you!
When using a Flash Media Server you just need to set it to the net connection. So, the only change would be:

ncConnection.connect(null);

Which will then become:
ncConnection.connect(“rtmp://example.com/”);

That’s it.
Craig Says:
August 16th, 2008 at 12:20 am
Great tutorial! Answers a lot of questions I’ve been struggling through with AS 3.0!

Two quick questions, what is the method for stopping the video at a specific point, i.e. I want to hold on the last frame of the video file after it’s played through.

And secondly, I’ve adapted the player for larger video dimensions and everything works great with the exception of the Progress Scrubber. I can restrain it to the new, longer progress bar, but every time the video starts, it jumps 200 or so pixels to the right. I know this is probably simple, I just don’t think I’m looking in the right place within the code.

Thanks.
Rafael Nünlist Says:
August 16th, 2008 at 11:54 am
Hey Craig

Thank you for your feedback!
If you want the video player to show the last frame you just need to comment this line:

function netStatusHandler(event:NetStatusEvent):void {
// handles net status events
switch (event.info.code) {
// trace a messeage when the stream is not found
case “NetStream.Play.StreamNotFound”:
trace(”Stream not found: ” + strSource);
break;

// when the video reaches its end, we stop the player
case “NetStream.Play.Stop”:
// ################# COMMENT THIS LINE HERE
// stopVideoPlayer();
break;
}

For the other thing you need to adjust the width of the progressbar in the code since it’s static:

function updateDisplay(e:TimerEvent):void {
// checks, if user is scrubbing. if so, seek in the video
// if not, just update the position of the scrubber according
// to the current time
if(bolProgressScrub)
nsStream.seek(Math.round(mcVideoControls.mcProgressScrubber.x * objInfo.duration / 432))
else
mcVideoControls.mcProgressScrubber.x = nsStream.time * 432 / objInfo.duration;

So, the number 432 represents how far the scrubber can go. Try to set this number to the width of the progress bar, this should help you out

Greetings
Rafael
Jake Rutter Says:
August 19th, 2008 at 12:47 am
Awesome site, I just found this. I have been adding flash sites to my rss feeds reader to keep up with things. This is a great tutorial, Im working on building my own AS3 Video Player so this definitely helps!
Jake Rutter Says:
August 19th, 2008 at 12:50 am
One thing, had you thought about putting all of the code into a class? or into OOP?
John Culshaw Says:
August 20th, 2008 at 10:24 am
Fantastic tutorial — best I have seen in a long time!

I am having one problem using it in my SWF, though. In my SWF the user can toggle between looking at some still images, or a video. The still image viewing area and video area each take the entire stage area. That is, when viewing the still images, I hide all the video elements and vice versa (when viewing the video, I hide all still image elements).

My problem is that when I first toggle to the video elements part (default is still image mode) everything works hunky dory with the video elements as expected. But, if I toggle back to still image mode and then try to go back to the video mode, the player is unresponsive.

I have a feeling that the problem has something to do with trying to run the initVideoPlayer(); function after is has already been run once (at the very first toggle) — but some tests that I have run have been unsuccessful.

The behavior I would love to have is that when toggling away from the video mode elements, the video pauses (I can handle this part) and the stream suspends while I am over in still image mode. When I toggle back to video mode, the video resumes and streaming picks up where it left off.

Any ideas how this may be attained?

Regards,

-john
Craig Says:
August 20th, 2008 at 11:49 pm
Rafael,

Thanks for the tips on how to stop the video on the last frame. Would I use the same type of technique to trigger another event after the video has finished playing?

For example, I’m trying to program a “Play All” button for x number of FLVs. I imagine the function would detect the end of each video and then go to the next label on the timeline (or whatever code I put here I suppose).

Thanks in advance for your help.
Walmik Says:
August 26th, 2008 at 4:02 pm
Hi Rafael,
I do not have a query that is directly related to this tutorial but it is relevant here I hope. I m working on a site that is heavily animated and uses the flv playback component at various points in the animation. So for example a section loads with a lot of animation and comes to point and stops where a flv playback component is placed. The when another section is loaded, this section animates to its end and launches the ‘clicked’ sections animation which again goes through an elaborate animation and stops where it has a FLV Playback component on the stage which plays videos. And so on..

The problem is, when a user has requested a section and the flv playback component is still to buffer/load the video, there can be some lag on a slower internet connection hence the user changes the section before any video content had reached his computer. After a few moments, the video that could not load earlier just starts to play abruptly without any component on the stage!

While leaving a section I m checking if a flv is playing (flv.playing) and if so then stopping it. But since the video never loaded, this condition is not met. Also stopping video anyways results in an error as the script doesnt know what to stop.

So what I wanted to know is, is there some way to stop all video like there was stop all sounds in earlier versions of AS? OR is there some way I can make sure that a video request is successfully terminated?

Lastly I m terribly sorry if this query does not belong here. Many Thanks in advance AND of course… this is a gr8 tutorial… very straightforward.
Carlos Pinho Says:
August 26th, 2008 at 7:31 pm
Hi Walmik,

No problem to post a query here. I will try to add a new feature at The Tech Labs, a place where you add your doubts and questions and where developers will try to help you.

Cheers,
Carlos
Jim Says:
August 27th, 2008 at 7:54 pm
Where do you instantiate the mcVideoControls object? I’m getting errors for undefined properties since
grabek Says:
September 2nd, 2008 at 9:23 am
YOU ARE AWESOME!
you saved me like 50 hours of research. Your code is great!
Roy Says:
September 11th, 2008 at 1:06 am
Your script is really cool and exactly what I was looking for.

I tried to connect it to the sample vod file (sample.flv) on FMS using the modified code:
ncConnection.connect(“rtmp://ip-address/vod”);
But then i get an error:

“ArgumentError: Error #2126: NetConnection object must be connected.
at flash.net::NetStream/construct()
at flash.net::NetStream()
at videoplayer_fla::MainTimeline/initVideoPlayer()
at videoplayer_fla::MainTimeline/frame1()”

It can’t seem to connect.

When i use the vodtest file everything works (on my server and development pc), but that one does not connect with the netConnection code.

I hope you can help me.

Best regards,

Roy
Sems Says:
September 12th, 2008 at 9:18 pm
NetStream does not wait for the NetConnection to be established, when connecting to a Flash Media Server. So Roy, you’ll to move the NetStream code under netStatusHandler, as below (hope this displays fine):

function netStatusHandler(event:NetStatusEvent):void {
// handles net status events
switch (event.info.code) {
// trace a messeage when the stream is not found
case “NetStream.Play.StreamNotFound”:
trace(“Stream not found: ” + strSource);
break;

// when the video reaches its end, we stop the player
case “NetStream.Play.Stop”:
stopVideoPlayer();
break;
case “NetConnection.Connect.Success”:
// create a new netstream with the net connection, add event
// listener, set client to this for handling meta data and
// set the buffer time to the value from the constant
nsStream = new NetStream(ncConnection);
nsStream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
nsStream.client = this;
nsStream.bufferTime = BUFFER_TIME;

// attach net stream to video object on the stage
vidDisplay.attachNetStream(nsStream);
// set the smoothing value from the constant
vidDisplay.smoothing = SMOOTHING;

// set default volume
mcVideoControls.mcVolumeScrubber.x = (52 * DEFAULT_VOLUME) + 341;
mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x – 394 + 52;
setVolume(DEFAULT_VOLUME);
//plus other stuff if you need.
break;
}
}
Roy Says:
September 17th, 2008 at 1:06 am
Hi Sems,

Thanks.. i’ll look into it right away.

Best regards,

Roy
mmdGuru Says:
September 23rd, 2008 at 9:59 am
Hi Rafael,

Great video player=) Think you did a awesome job…

I’m trying to implement the player in a project. The project requires a skip video button to jump to another frame and when the video is finished it should also jump to the same frame as the skip function!

can you please help me to get on the right track=)

regards

Thomas
william Says:
September 29th, 2008 at 10:53 am
thanks for the tutorials. please am using AS2, can i use the code for it. if not, kindly send me a tutorials on that. am new to flash.
Rafael Nünlist Says:
October 1st, 2008 at 11:20 am
@mmdguru: just call the same function that goes to the next frame from a skip button and also call it when the netstream event is fired for stop.
:::::
case “NetStream.Play.Stop”:
callYourFunctionThatGoesToTheNextFrame();
break;
:::::

@william: no, you can’t use the code for as2. but there are many video players out there made with as2
Michael Dunn Says:
October 2nd, 2008 at 4:47 pm
Thanks for the tutorial, great videoplayer! I do have a question. I’m trying to connect to a FMS. Followed example from post Aug 8, 2008 4:43 pm and I get the following message:

ArgumentError: Error #2126: NetConnection object must be connected.
at flash.net::NetStream/flash.net:NetStream::construct()
at flash.net::NetStream$iinit()
at videoplayer_fla::MainTimeline/initVideoPlayer()
at videoplayer_fla::MainTimeline/videoplayer_fla::frame1()

I lost here, any ideas?
thanks
Kukurusta Says:
October 3rd, 2008 at 9:56 am
Hi Rafael

I can just repeat what other already said. This site is a gem.

I’m getting my movies from a FMS. I had to adopt your player with the already mentioned function netStatusHandler(event:NetStatusEvent):void and add a not yet mentioned

ncConnection.client = this;
function onBWDone():void {
trace(“onBWDone called”);
}

in order to catch all required callbacks.

I’m now wondering why I receive a NetStream.Play.Stop notification after a while even if the videostream is paused.

Any idea why this notification is fired?

Fabio
Kukurusta Says:
October 3rd, 2008 at 10:02 am
Hi Rafael and all

Again I’m getting my movies from a FMS with rtmp. I’d like to have the videostream pause when the player is loaded, but having the first frame displayed. How can I achieve that?

Fabio
Jimmy Says:
October 7th, 2008 at 8:31 pm
I am trying your AS3 Videoplayer with red5 streaming server but i can not get it to work, i cant figure what i am doing worng. Is there anyway you can post or send me a working streaming copy i would greatly appreciate it

You did a very nice job on the player.

Jimmy
Phil Says:
October 22nd, 2008 at 11:28 am
This is fantastic! Very thorough tutorial.

I wonder if anyone (more advanced than me) has managed to turn this into a class?
dvesh Says:
November 5th, 2008 at 2:53 pm
Great tutorial. Sometimes it’s hard getting all the pieces together in one place and you did an excellent job here.
Alon Says:
November 24th, 2008 at 4:28 pm
good work!!

but i have a real problem to connect it to my fms server (influxis)
i changed the code connect(“rtmp……”);
and on play(“file”);

and its always give me that:
ArgumentError: Error #2126: NetConnection object must be connected.
at flash.net::NetStream/flash.net:NetStream::construct()
at flash.net::NetStream$iinit()
at videoplayer_fla::MainTimeline/initVideoPlayer()
Jason Says:
December 28th, 2008 at 11:06 pm
Terrific. Has really helped me get up to speed with AS3. Question: I’m using your player inside of another swf and when I navigate away from the frame with the player the vid still plays. How can I get it to stop when a user navigates away?
flashDuniya Says:
January 15th, 2009 at 10:40 am
var nc:NetConnection = new NetConnection();
var ns:NetStream;
nc.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
nc.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
nc.client = this;
nc.connect(“rtmp://flashduniya.com/videos/”);

function netStatusHandler(event:NetStatusEvent):void {

switch (event.info.code) {
case “NetConnection.Connect.Success” :
connectVideo();
var it:uint = setInterval(seeking, 100);
setVolume(0);
break;
case “NetStream.Play.StreamNotFound” :
trace(“Stream not found: ” + videoURLAr[selectedNum]);
break;
}
}
function connectVideo() {
ns = new NetStream(connection);
ns.client = this;
videoObj.attachNetStream(ns);
ns.play(“flashduniya”);
}
btnPause.addEventListener(MouseEvent.CLICK, pauseVideo);
btnPlay.addEventListener(MouseEvent.CLICK, playVideo);
function pauseVideo(e:MouseEvent):void {
ns.pause();
}
function playVideo(e:MouseEvent):void {
ns.resume();
}

This above code is working fine play pause functionality also working fine. But while we pause the video and after some time(about more than 10 min) we click on play button video start playing with beging not from the paused postion.

Any one can tell me the solution of this problem.

Thanks,
FlashDuniya
Matt Says:
February 3rd, 2009 at 6:36 pm
I love the video player that you have provided. I have tried to tweak it a little bit and am having a problem. I have changed it so that it works for 640×480 videos. I was able to change the size of the progress bar and was able to move it to the right some.

The only thing that appears to be wrong is that when I click play the mcProgressScrubber starts over to the far left of the movie instead of 50px to the right where the actual scrubber bar is.

Can anyone help?

Thanks
Matt
Matt Says:
February 7th, 2009 at 3:44 am
Hello there,

Let me start off by saying that this is something that I have been looking for for the past 3 years. So now that i have found something that is just what I am looking for, I want to make it easy and perfect. In saying that I have 1 question.

Is there a way to link a different flv file into the player without going into flash every time?
Josh Says:
February 12th, 2009 at 6:23 pm
Hey man
Im sortove new to flash been using it for about a year and a half now, but this is defo the best video player ive seen so dar

cheers
Josh Says:
February 12th, 2009 at 6:24 pm
// for the previous comment.

so far*

my bad on the spelling mistake haha:)
gary simms Says:
February 16th, 2009 at 8:21 pm
Thanks for this tutorial! Just getting my hands dirty with AS3.
Will be trying to move this all to a class soon.

Hey Matt,
Or others interested in not having to put the flv source in the flash itself. Simply use swfobject to embed your swf file.
I’m using swfobject 1.5, haven’t dug in to v2.0 yet, but I’m sure it’s similar.

First make sure you call the swfobject js in the head.

HTML code edit, notice the variable I’m passing to flash.

Looks like you don’t have the flash player. Get Flash Player

var so = new SWFObject(“videoplayer.prt1.swf”, “FlashwindowName”, “440″, “365″, “9″, “#000000″);
//so.addParam(“wmode”, “transparent”);
so.addVariable(“videoPath”, “hancock-tsr2_h480p.flv”)
so.write(“flashContent”);

And in your fla file change the source variable line at top to this.

// url to flv file
var strSource:String = videoPath;

That’s it, simple right?
gary.
gary simms Says:
February 16th, 2009 at 8:26 pm
Shoot, blog stripped out the tags.
What about this?

head tag
<script type=”text/javascript” src=”swfobject.js”></script>

HTML code
<body bgcolor=”#000000″>

<div id=”flashContent”>
<h1>Looks like you don’t have the flash player.</h1> <a href=”http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash&promoid=BIOX” rel=”external”>Get Flash Player</a>
</div>

<script type=”text/javascript”>
var so = new SWFObject(“videoplayer.prt1.swf”, “FlashwindowName”, “440″, “365″, “9″, “#000000″);
//so.addParam(“wmode”, “transparent”);
so.addVariable(“videoPath”, “hancock-tsr2_h480p.flv”)
so.write(“flashContent”);
</script>

</body>
bill krings Says:
February 17th, 2009 at 8:12 pm
Great tutorial, but I think I’m missing some fundamental knowledge. I am using Flash CS3 Pro. Where is the source for the instance of Display_vid? I know it is in the library associated with you file, but where did it originate from. Is this a component you created or is is in a Flash component library somewhere?
thanks!
apompei Says:
February 18th, 2009 at 4:44 am
Great tutorial!

I am trying to add an image that will load and display before a user presses play. Once the user presses play I’d like for the image to be removed from the display list so the video is in view.

In the variables section I added a new loader object with an eventListerner listening for the COMPLETE event that then calls a function that adds the image to the displayList. Following this eventListener I have the load constructor with the required URLRequest pointing to the JPEG image I am loading. This all works but I can’t figure out how to remove the image.

Where I am falling short is when the user clicks the play button how that can call a function that will remove the loader and the associated JPEG from the list. The lay button already is call the playClicked function. Is it possible to have it call two functions?

I am at really at a lose here any help would be appreciated.
knalle Says:
February 19th, 2009 at 10:14 pm
BTW, if you want to OOP this into a class quick and dirty, then just import the following in your class:

import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.media.Video;
import flash.net.NetConnection;
import flash.net.NetStream;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.events.NetStatusEvent;
import flash.geom.Rectangle;
import flash.media.SoundTransform;

and make all funtions private
The only problem I had was that onMetaData needed to be public.
Ben Says:
February 20th, 2009 at 12:37 am
Hi, after loosing a week on trying to make a nice FLV player, i came across yours ! Wich is wonderful

But..
It works in my projet, but only on the first frame. When i put it
inside a section that i call later using addChild, it doesn’t load.

I’ve tried with a new document and it work…

Could it be a variable, or else that i have to do so it work ?

I think i’m not that clear…
Joe Says:
February 26th, 2009 at 2:59 am
Where does the number 53 come from?
knalle Says:
February 26th, 2009 at 7:46 pm
I dunno. Never heard of that number until now.
LeonD Says:
March 8th, 2009 at 11:03 pm
hey there, i love your player and it works like a charme. i have a general question. when i jump to the frame that includes the player, the player works like it should, but when i go to another frame while the player is still playing, it doesnt stop, it keeps on playing in the background until the video ends. is there some way to unload the player when leaving the frame, so it doesnt keep on working in the backgound? thx in advance
Rafael Nünlist Says:
March 9th, 2009 at 8:55 am
@ LeonD: Before you jump to the next frame, just stop the player with the stopVideoPlayer() function

stopVideoPlayer();
gotoAndStop(“yourFrameLabelOrFrameNuber”);
Sean Says:
March 11th, 2009 at 9:34 pm
This is great! Very well done. Left me with one question though… How difficult would it be to have multiple instances of the player on the stage? Im guessing putting the controls and video windows into some sort of array?
Rafael Nünlist Says:
March 12th, 2009 at 9:46 am
@ Sean: You can put all the code & visuals into a separate movieclip make several instances of it and place them on the stage. Or you can convert the code into a class and do the instantiation programmatically.
LeonD Says:
March 13th, 2009 at 1:55 am
@rafael thx it worked great. but now i have some other problem. i had to put the player and his code in an mc. whenever i need the player i put the mc with the player on the stage. but when i say stopVideoPlayer () one the main stage codeline it tells me that there is no VideoPlayer function. now i understand why it tells me that but how can i stop the player within that mc from the main timeline?
Rafael Nünlist Says:
March 16th, 2009 at 7:38 am
@ LeonD: Just give your mc a name by clicking on it and changing the value in the properties. On the main timeline you’d write something like this to stop it:

myVideoPlayerInstance.stopVideo();

Of course “myVideoPlayerInstance” would be the name of your movieclip.

cheers
petit Says:
March 20th, 2009 at 12:00 pm
Hello Raf!

Thanx for sharing. One think i like is that you can easily customize the design (which is not the case for the FLVplayer that comes with flash for instance but you probably noticed..).

One feature though i think is missing and would bring your player near perfection…:)

==> Show & hide the controls when you mouse over/out the player!

I’ve been trying to code this for some hours but i’m not a AS3 wizard yet and get jerky results.

If anyone could give it a try …Thanx a lot.
Best regards.
Rafael Nünlist Says:
March 20th, 2009 at 1:27 pm
@petit: Just add an event listener to the whole mcControls for mouseOver and mouseOut and show or hide it

Like this:

mcControls.addEventListener(MouseEvent.MOUSE_OVER, showHideControls);
mcControls.addEventListener(MouseEvent.MOUSE_OUT, showHideControls);

function showHideControls(e:MouseEvent):void {
if(e.type == MouseEvent.MOUSE_OVER)
mcControls.alpha = 1;
else
mcControls.alpha = 0;
}
codo Says:
March 21st, 2009 at 10:39 am
very nice!!
petit Says:
March 22nd, 2009 at 10:50 am
Well done Raf, you’re my hero today:)

i tried with mcVidecontrols.visible= false/true but for some reasons it gives jerky behaviours, did not think to use .alpha

tip: If you want the controls & the video to react to mouse over/out you can put an invisible layer in the mcVideoControl of the size of the video…
Thanx Again.
LeonD Says:
March 25th, 2009 at 11:23 am
is it possible that the video frame shows a preview picture of the video before you hit the play button and how would you do that?
Rafael Nünlist Says:
March 26th, 2009 at 7:05 am
@ LeonD: You could make a screenshot from your video, save it as a jpg/png/gif and the load it with the Loader class in the video player. Or you create a serverside script that does the screenshot job for you and returns the image.
I’d recommend you to take a look at the slideshow tutorial on how to load an image, the rest should then be a piece of cake
Lynne Says:
March 28th, 2009 at 7:04 am
Thanks so much for this tutorial. It really helped me out. Whew!
Younus Says:
March 28th, 2009 at 1:40 pm
@Rafeal – Thanks for this tutorial!
I have a general question, how can i use flv from XML file.

Thanks
Rafael Nünlist Says:
March 28th, 2009 at 3:20 pm
@Lynne: Glad it could help you out
@Younus: Take a look at the “Expanding the Videoplayer” Tutorial, it implements a playlist function with xml.
Ross Says:
April 2nd, 2009 at 3:55 pm
Fantastic tutorial and example! I was able to create a great dynamic streaming player using FMS 3.5 and Flash 10 using several examples from your code! Thank you!
Nick Says:
April 2nd, 2009 at 10:41 pm
This tutorial is awesome!! thanks you for covering so much. This may seem simple but I’ve been having trouble. How do I get this player to play SWF’s instead of FLV’s?
junebug Says:
April 3rd, 2009 at 6:13 am
I expanded the width of the player to 640
I moved the progress bar down to the middle part of the control bar… I have shortened the progress bar but when play is clicked the scrubber jumps all the way over to the left (Its 60px off) leaving a gap between the scrubber and progress bar… I know the problem is math related but I have played with code for 2 days and still cant get the scrubber to match back up with progress bar… in other words I have: 1.) dropped the scrubber down by 19 px
2.) I have shortened the over all length of the scrubber/progress bar to 360px
3.) slid the scrubber over to the right by 60 px

problem is that when video starts, scrubber jumps all the way back over to the left… when the video is scrubbed the scrubber will then line up… but only when scrubbed

the code that I need help with:
———————————
function updateDisplay(e:TimerEvent):void {
// checks, if user is scrubbing. if so, seek in the video
// if not, just update the position of the scrubber according
// to the current time
if(bolProgressScrub)
nsStream.seek(Math.round(mcVideoControls.mcProgressScrubber.x * objInfo.duration / 354))
else
mcVideoControls.mcProgressScrubber.x = nsStream.time * 354 / objInfo.duration;

// set time and duration label
mcVideoControls.lblTimeDuration.htmlText = “” + formatTime(nsStream.time) + ” / ” + formatTime(objInfo.duration);

// update the width from the progress bar. the grey one displays
// the loading progress
mcVideoControls.mcProgressFill.mcFillRed.width = mcVideoControls.mcProgressScrubber.x + 5;
mcVideoControls.mcProgressFill.mcFillGrey.width = nsStream.bytesLoaded * 360 / nsStream.bytesTotal;
junebug Says:
April 3rd, 2009 at 6:51 am
I moved the scrubber/progress bar down by 19 px.
I moved the scrubber/progress bar over to the right by 60 px.

I managed to get the scrubber to line up with the video progress bar after a little manipulation but now I have problems scrubbing.. trying to scrub results in the video jumping to the end…
current code:

function updateDisplay(e:TimerEvent):void {
// checks, if user is scrubbing. if so, seek in the video
// if not, just update the position of the scrubber according
// to the current time
if(bolProgressScrub)
nsStream.seek(Math.round(mcVideoControls.mcProgressScrubber.x * objInfo.duration / 354 + 60 ))
else
mcVideoControls.mcProgressScrubber.x = nsStream.time * 354 / objInfo.duration + 60;

// set time and duration label
mcVideoControls.lblTimeDuration.htmlText = “” + formatTime(nsStream.time) + ” / ” + formatTime(objInfo.duration);

// update the width from the progress bar. the grey one displays
// the loading progress
mcVideoControls.mcProgressFill.mcFillRed.width = mcVideoControls.mcProgressScrubber.x – 60;
mcVideoControls.mcProgressFill.mcFillGrey.width = nsStream.bytesLoaded * 360 / nsStream.bytesTotal;
khalil3 Says:
April 6th, 2009 at 1:55 pm
Thank you sooooo much for your fantastic tool, I been searching for an AS3 tool for FLV, and I found it.
Rahul Joshi Says:
April 10th, 2009 at 8:15 am
I am working on the video player you have posted on your site. I have modified the XML and added another entry for sponsor video in it. If a particular entry in the XML has a sponsor video, it should be played first, then the video in that tag and so on. I am checking through actionscript if a sponsor video is present, then play it else just the normal video. Can you please guide me on how I can achieve this successfully?
Agustin Says:
April 16th, 2009 at 9:32 pm
I managed to install your player in FMS 3.5 on Windows 2003.
Changed coding as explained above regarding function netStatusHandler etc.. Now i am getting the following error
1120: Access of undefined property stopClicked
lines 52 to 66 . What I am missing? I feel to be close to have this awesome player install.
Nathan Says:
April 17th, 2009 at 10:18 pm
This is great – many thanks. I had one question which I was wondering if you could help me with:

Since Flash will now play MOV files (not just FLV files) is it possible to create a preview image dynamically? For example, load the Nth frame from the movie somehow, and have that appear as a static image before the movie is played?

Or would it make more sense to merely pause the movie on the 1st frame, creating the illusion of a preview image?
Carlos Pinho Says:
April 17th, 2009 at 10:56 pm
I think you need Flash Media Server for that.
Agustin Says:
April 18th, 2009 at 12:45 am
Hello: This is the code as modified so far. I still getting an error.
Your player is excellent, but want to used in my website using FMS 3.5
Can you help me?

ERROR is:

TypeError: Error #2007: Parameter connection must be non-null.
at flash.net::NetStream/construct()
at flash.net::NetStream()
at videoplayer_fla::MainTimeline/frame1()

===============================================================

// ##########################
// ############# CONSTANTS
// ##########################

// time to buffer for the video in sec.
const BUFFER_TIME:Number = 8;
// start volume when initializing player
const DEFAULT_VOLUME:Number = 0.6;
// update delay in milliseconds.
const DISPLAY_TIMER_UPDATE_DELAY:int = 10;
// smoothing for video. may slow down old computers
const SMOOTHING:Boolean = true;

// ##########################
// ############# VARIABLES
// ##########################

// flag for knowing if flv has been loaded
var bolLoaded:Boolean = false;
// flag for volume scrubbing
var bolVolumeScrub:Boolean = false;
// flag for progress scrubbing
var bolProgressScrub:Boolean = false;
// holds the last used volume, but never 0
var intLastVolume:Number = DEFAULT_VOLUME;
// net connection object for net stream
var ncConnection:NetConnection;
// net stream object
var nsStream:NetStream;
// object holds all meta data
var objInfo:Object =”rtmp://XX.XX.XXX.XX/maximo2/”;
// url to flv file
var strSource:String = “hancock-tsr2_h480p.flv”;
// timer for updating player (progress, volume…)
var tmrDisplay:Timer;

// ##########################
// ############# FUNCTIONS
// ##########################

// sets up the player
function initVideoPlayer():void {
// hide buttons
mcVideoControls.btnUnmute.visible = false;
mcVideoControls.btnPause.visible = false;

// set the progress/preload fill width to 1
mcVideoControls.mcProgressFill.mcFillRed.width = 1;
mcVideoControls.mcProgressFill.mcFillGrey.width = 1;

// add global event listener when mouse is released
stage.addEventListener( MouseEvent.MOUSE_UP, mouseReleased);

// add event listeners to all buttons
mcVideoControls.btnPause.addEventListener(MouseEvent.CLICK, pauseClicked);
mcVideoControls.btnPlay.addEventListener(MouseEvent.CLICK, playClicked);
mcVideoControls.btnStop.addEventListener(MouseEvent.CLICK, stopClicked);
mcVideoControls.btnMute.addEventListener(MouseEvent.CLICK, muteClicked);
mcVideoControls.btnUnmute.addEventListener(MouseEvent.CLICK, unmuteClicked);
mcVideoControls.mcVolumeScrubber.btnVolumeScrubber.addEventListener(MouseEvent.MOUSE_DOWN, volumeScrubberClicked);
mcVideoControls.mcProgressScrubber.btnProgressScrubber.addEventListener(MouseEvent.MOUSE_DOWN, progressScrubberClicked);

// create timer for updating all visual parts of player and add
// event listener
tmrDisplay = new Timer(DISPLAY_TIMER_UPDATE_DELAY);
tmrDisplay.addEventListener(TimerEvent.TIMER, updateDisplay);

// create a new net connection, add event listener and connect
// to null because we don’t have a media server
ncConnection = new NetConnection();
ncConnection.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
ncConnection.connect(“rtmp://AA.214.65.40/maximo2/”);I HAVE HERE THE COMPLETE PATH
}
function netStatusHandler(event:NetStatusEvent):void {
// handles net status events
switch (event.info.code) {
// trace a messeage when the stream is not found
case “NetStream.Play.StreamNotFound”:
trace(“Stream not found: ” + strSource);
break;

// when the video reaches its end, we stop the player
case “NetStream.Play.Stop”:
stopVideoPlayer();
break;
case “NetConnection.Connect.Success”:
}
}
// create a new netstream with the net connection, add event
// listener, set client to this for handling meta data and
// set the buffer time to the value from the constant
nsStream = new NetStream(ncConnection);
nsStream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
nsStream.client = this;
nsStream.bufferTime = BUFFER_TIME;

// attach net stream to video object on the stage
vidDisplay.attachNetStream(nsStream);
// set the smoothing value from the constant
vidDisplay.smoothing = SMOOTHING;

// set default volume
mcVideoControls.mcVolumeScrubber.x = (52 * DEFAULT_VOLUME) + 341;
mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x – 394 + 52;
setVolume(DEFAULT_VOLUME);

function playClicked(e:MouseEvent):void {
// check’s, if the flv has already begun
// to download. if so, resume playback, else
// load the file
if(!bolLoaded) {
nsStream.play(strSource);
bolLoaded = true;
}
else{
nsStream.resume();
}

// show video display
vidDisplay.visible = true;

// switch play/pause visibility
mcVideoControls.btnPause.visible = true;
mcVideoControls.btnPlay.visible = false;
}

function pauseClicked(e:MouseEvent):void {
// pause video
nsStream.pause();

// switch play/pause visibility
mcVideoControls.btnPause.visible = false;
mcVideoControls.btnPlay.visible = true;
}

function stopClicked(e:MouseEvent):void {
// calls stop function
stopVideoPlayer();
}

function muteClicked(e:MouseEvent):void {
// set volume to 0
setVolume(0);

// update scrubber and fill position/width
mcVideoControls.mcVolumeScrubber.x = 341;
mcVideoControls.mcVolumeFill.mcFillRed.width = 1;
}

function unmuteClicked(e:MouseEvent):void {
// set volume to last used value
setVolume(intLastVolume);

// update scrubber and fill position/width
mcVideoControls.mcVolumeScrubber.x = (53 * intLastVolume) + 341;
mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x – 394 + 53;
}

function volumeScrubberClicked(e:MouseEvent):void {
// set volume scrub flag to true
bolVolumeScrub = true;

// start drag
mcVideoControls.mcVolumeScrubber.startDrag(false, new Rectangle(341, 19, 53, 0));
}

function progressScrubberClicked(e:MouseEvent):void {
// set progress scrub flag to true
bolProgressScrub = true;

// start drag
mcVideoControls.mcProgressScrubber.startDrag(false, new Rectangle(0, 2, 432, 0));
}

function mouseReleased(e:MouseEvent):void {
// set progress/volume scrub to false
bolVolumeScrub = false;
bolProgressScrub = false;

// stop all dragging actions
mcVideoControls.mcProgressScrubber.stopDrag();
mcVideoControls.mcVolumeScrubber.stopDrag();

// update progress/volume fill
mcVideoControls.mcProgressFill.mcFillRed.width = mcVideoControls.mcProgressScrubber.x + 5;
mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x – 394 + 53;

// save the volume if it’s greater than zero
if((mcVideoControls.mcVolumeScrubber.x – 341) / 53 > 0)
intLastVolume = (mcVideoControls.mcVolumeScrubber.x – 341) / 53;
}

function updateDisplay(e:TimerEvent):void {
// checks, if user is scrubbing. if so, seek in the video
// if not, just update the position of the scrubber according
// to the current time
if(bolProgressScrub)
nsStream.seek(Math.round(mcVideoControls.mcProgressScrubber.x * objInfo.duration / 432))
else
mcVideoControls.mcProgressScrubber.x = nsStream.time * 432 / objInfo.duration;

// set time and duration label
mcVideoControls.lblTimeDuration.htmlText = “” + formatTime(nsStream.time) + ” / ” + formatTime(objInfo.duration);

// update the width from the progress bar. the grey one displays
// the loading progress
mcVideoControls.mcProgressFill.mcFillRed.width = mcVideoControls.mcProgressScrubber.x + 5;
mcVideoControls.mcProgressFill.mcFillGrey.width = nsStream.bytesLoaded * 438 / nsStream.bytesTotal;

// update volume and the red fill width when user is scrubbing
if(bolVolumeScrub) {
setVolume((mcVideoControls.mcVolumeScrubber.x – 341) / 53);
mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x – 394 + 53;
}
}

function onMetaData(info:Object):void {
// stores meta data in a object
objInfo = info;

// now we can start the timer because
// we have all the neccesary data
tmrDisplay.start();
}

function stopVideoPlayer():void {
// pause netstream, set time position to zero
nsStream.pause();
nsStream.seek(0);

// in order to clear the display, we need to
// set the visibility to false since the clear
// function has a bug
vidDisplay.visible = false;

// switch play/pause button visibility
mcVideoControls.btnPause.visible = false;
mcVideoControls.btnPlay.visible = true;
}

function setVolume(intVolume:Number = 0):void {
// create soundtransform object with the volume from
// the parameter
var sndTransform = new SoundTransform(intVolume);
// assign object to netstream sound transform object
nsStream.soundTransform = sndTransform;

// hides/shows mute and unmute button according to the
// volume
if(intVolume > 0) {
mcVideoControls.btnMute.visible = true;
mcVideoControls.btnUnmute.visible = false;
} else {
mcVideoControls.btnMute.visible = false;
mcVideoControls.btnUnmute.visible = true;
}
}

function formatTime(t:int):String {
// returns the minutes and seconds with leading zeros
// for example: 70 returns 01:10
var s:int = Math.round(t);
var m:int = 0;
if (s > 0) {
while (s > 59) {
m++;
s -= 60;
}
return String((m < 10 ? “0″ : “”) + m + “:” + (s < 10 ? “0″ : “”) + s);
} else {
return “00:00″;
}
}

// ##########################
// ############# INIT PLAYER
// ##########################
initVideoPlayer();
agustin Says:
April 21st, 2009 at 4:05 am
I am able to connect to my FMS3 but .flv doesnt play. I go online: see all buttons, play, stop, scroll they seem to work, but not luck.
I opened all the appropriate ports. If I connect, what could be the cause of no video play.

Thank you
Rafael Nünlist Says:
April 26th, 2009 at 9:05 pm
@Ross: Cool, nice to hear that!

@Nick: If you want to have a player that controls timeline animations, then you should take a look @ the beta of TweenMax 11 which will support that kind of stuff ( http://blog.greensock.com/v11beta/ )

@khalil3: Glad we could help you out

@Rahul Joshi: Could you explain your problem a little bit more in detail? Should the videoplayer disable the functionalities when playing a advertising? Otherwise you could just stick to the expanded video player posted on the techlabs.

@All issues with FMS: There will be a new videoplayer tutorial on how to connect to a liveserver since this is a little bit different from progressive streaming.
For a preview image you could either use a serverside script like php ffmpeg ( http://ffmpeg-php.sourceforge.net/ ) and make a snapshot from the video or you just upload the preview image directly on your webserver and load it.
Rahul Joshi Says:
April 27th, 2009 at 7:29 am
I have posted the questions in the expanded video player post.
Michael Says:
May 13th, 2009 at 10:36 pm
Thanks for the tutorial Rafael. I’m new to Flash and this has helped me learn a lot.

I’m trying to make the player be able to play multiple videos. I have made buttons that call each video. I have put the entire player and it’s actions into a movieclip and named the movieclip “flvPlayer.” In the “Variables” section I have removed the = “hancock-tsr2_h480p.flv” so now it just says var strSource:String;

Then in the main timeline, which contains all the buttons, I have a frame with actions. The first action is for the video to play a video:

flvPlayer.strSource = “AuditoriumImage.flv”;

Then each button has a code that looks like this:

function video1(event:MouseEvent):void {
flvPlayer.strSource = “Video1.flv”;
}
video1Button.addEventListener(MouseEvent.CLICK,video1);

The first video plays perfectly, but then none of the other videos will play. I’m sure it is a simple fix. Can anyone help me out?
Greg Says:
May 15th, 2009 at 1:17 am
To the author of this tutorial,

I am also working on a custom flash player. I have run into a problem with the buffer:

After the video is paused (stream.pause) if I wait for 10 seconds or so… then resume video (stream.resume)… the video starts to play very fast, almost like fast forward — seems like it’s been buffering while it was paused and once it is resumed it is trying to catch up with it — which it shouldn’t, it should just continue playing at the normal rate. Once the video catches up with the amount of time you’ve waited while in pause, it continues to play at normal speed.

Have you run into this problem before? I would like to know your thoughts about this.
Flash Nut Says:
May 19th, 2009 at 12:20 am
This is an awesome tutorial, I love it. The only thing I’m having problems with is resizing. I’m trying to make the video player smaller and I’m running into a few issues with doing so (mainly with the scrubbers and the fills). So what I’m trying to do is make things a little easier to work with by removing the hard coded numbers, and putting in the corresponding variables so hopefully when i shrink things, the scrubbers will stay consistent with the fill area.

With that said, toward the end of the initVideoPlayer(); function, there are some numbers there 394, and 52, can you tell me what those numbers represent?
anonymous Says:
May 20th, 2009 at 1:17 pm
Great tutorial!

If I were you I’d mention my name at the top of the code. I don’t like to reinvent hot water, so I will often use code I find on the internet, I don’t like to take credit for this work though, so I keep the name of the author in it

Also, a lot of your size variables are hard coded, if these were flexible the player would be even better and easier to modify for further projects.
Ramin Says:
May 21st, 2009 at 3:19 pm
Hello.
I’ve got this excellent player to work, but there are some issues that I don’t know how to fix.

I need to put 3 players on one page. What I need is to stop all movies and sounds (if playing) before the selected movie is start playing.

Is there anyway to do this?

PS. I would also love it if I could mute the background music on the site as well.
James Says:
June 5th, 2009 at 1:12 pm
Hi Rafael,

Great tutorial, this saved me a great deal of research.

I have taken the player and adapted it to my needs but it has suddenly started acting strangely and I cant figure out why.

The problem is that once it buffers it skips through the video too fast until it reaches the buffer point, after which it runs smoothly.

The site can be found at http://jelly.ndltec.com

Any ideas would be greatly appreciated.

Thank you very much!

James
James Says:
June 5th, 2009 at 1:14 pm
Oh, i forgot to say. the player is at:

work – visual effects – pet dinosaur

Thanks again in advance for any help!
BJ Says:
June 12th, 2009 at 8:15 am
how can i make this player to when loading finished video starts playing.
i’m using this player for my friends website.
amar Says:
June 25th, 2009 at 10:54 am
tip: If you want the controls & the video to react to mouse over/out you can put an invisible layer in the mcVideoControl of the size of the video…

plz,explain in detail thank’s in advance
amar Says:
June 25th, 2009 at 11:56 am
tip: If you want the controls & the video to react to mouse over/out you can put an invisible layer in the mcVideoControl of the size of the video…

plz,explain in detail thank’s in advance

i do all the possible try so plz plz plz ans me
fogpuddle Says:
June 28th, 2009 at 6:58 am
Hello,

I’m just getting my hands dirty with AS3.0 and think this video player script is awesome!! I’ve played with it and customized just about all the script to work with a video skin I created. However, I’m having one issue that I can’t figure out. I noticed in the skin you provided, the Progress Scrubber starts at X position 0 when I push the play button. However, for the skin I’m building, I want the Progress Scrubber start at X position 22 when I hit the Play button, but I can’t get it to happen that way! It keeps starting at X position 0 and I looked throughout the whole script trying to find where I need to make the change. I’m having no luck. Can you help? Again, this is happening after I click on the Play button. Thanks.
James Says:
June 28th, 2009 at 1:15 pm
Hi fogpuddle, I would just turn each player section into a new MovieClips so you can move them around at your leisure. If you do this you will then have to go through each bit of code that references those bits, ie:

playerScrubber.x = 3;

and change the path so it becomes:

newMovieClip.playerScrubber.x = 3.

If you do this for all of them then it will be much easier to change around.

Good luck!
Beauceron Says:
July 1st, 2009 at 9:11 pm
Thanks for the tuto it work #1 on local but when i put it on my server the video doesn’t work i check 4 times the URL and they are right but it doesn’t work!!

i made a variable for the URL and it takes is information directly from my main swf like that :
var urlVariable:String = this.parent.parent.parent["videoUrl"];

i suppose this is my variable the problem but can you help me pls?
fogpuddle Says:
July 2nd, 2009 at 4:12 am
Thanks James for the help. After rearranging the code and numbers when creating the additional movie clips, I prefer this method over the original due to it’s flexibility. That little tidbit was all I needed to get things working.
amar Says:
July 6th, 2009 at 1:24 pm
buffering symbol in this code and put all video play that time buffering sybol put on load that video
cobretti Says:
July 15th, 2009 at 3:25 pm
Hi and thanks for that great tutorial!
I have the same problem like junebug. Can anyone help. Or to junebug, maybe you solved your problem and now you can tell me how you did it?!

Thanks very much for any help!

Here’s the problem, junebug already described:

“I moved the scrubber/progress bar down by 19 px.
I moved the scrubber/progress bar over to the right by 60 px.

I managed to get the scrubber to line up with the video progress bar after a little manipulation but now I have problems scrubbing.. trying to scrub results in the video jumping to the end…
current code:

function updateDisplay(e:TimerEvent):void {
// checks, if user is scrubbing. if so, seek in the video
// if not, just update the position of the scrubber according
// to the current time
if(bolProgressScrub)
nsStream.seek(Math.round(mcVideoControls.mcProgressScrubber.x * objInfo.duration / 354 + 60 ))
else
mcVideoControls.mcProgressScrubber.x = nsStream.time * 354 / objInfo.duration + 60;

// set time and duration label
mcVideoControls.lblTimeDuration.htmlText = “” + formatTime(nsStream.time) + ” / ” + formatTime(objInfo.duration);

// update the width from the progress bar. the grey one displays
// the loading progress
mcVideoControls.mcProgressFill.mcFillRed.width = mcVideoControls.mcProgressScrubber.x – 60;
mcVideoControls.mcProgressFill.mcFillGrey.width = nsStream.bytesLoaded * 360 / nsStream.bytesTotal;”
flashmad Says:
July 15th, 2009 at 4:47 pm
Hi i tried your tutorial files. great stuff and thanks for this. I got a prob. I was trying to make a 3D flv player that floats on air like my website does. But when i finished all none of the scrubbers working. I thought its prob with your code and i tried using flash components for volume and seekbar. But still i can’t click and drag the scrubber. Do u have any idea to resolve this? please advice …
avi Says:
July 22nd, 2009 at 6:10 am
hi!!!!!!
I want to make video player in Flex builder in which I want that all the names should appear in tree form in left panel and videos should play in right panel inside video player.how can i do this in Flex builder3 for desktop applications.Kindly help me ……..
Mert Tan Says:
July 22nd, 2009 at 9:17 pm
Thanks for great code. I have a question.
I have many flv videos. How can i play these videos as sending flv link ? Like this ‘ext: http://www.sitem.com/video.flv‘
Jorgesys Says:
July 24th, 2009 at 6:01 pm
Hi Mert Tan you just need send your path to the value of strSource

var strSource:String = “http://www.sitem.com/video.flv”;

since…

ncConnection.connect(null);

…for progressive Download.
Clint Says:
July 30th, 2009 at 7:41 pm
Thank you very much – everything about this tutorial is amazing. I have been able to easily add a few small features here and there and customize it almost however I want. The one thing I’m having a hard time figuring out is can netStream start downloading without playing?
Declan Says:
August 6th, 2009 at 5:49 pm
Hi Gary Simms,

I tried the example that you suggested above related to: “not having to put the flv source in the flash itself. Simply use swfobject to embed your swf file.” and i can’t get it to work.

I’ve change the code iin the movie to:

// url to flv file
var strSource:String = videoPath;

and added the variable:
so.addVariable(”videoPath”, “hancock-tsr2_h480p.flv”)

By the way: i am using SWFObject.js and have tried both versions 1.5 & 2. None of which work. Very frustrating!

Any help would be greatly appreciated!
Declan
Clint Says:
August 6th, 2009 at 7:00 pm
Declan –

I use FlashVars if I can’t use XML. I don’t know if this will work for your needs but it may help.

IN THE FLASH -

Empty the variable:
var strSource:String;

Add this:
// ##########################
// ############# FUNCTIONS
// ##########################

// sets up the player
function initVideoPlayer():void {
var flashVars = this.loaderInfo.parameters;
strSource = flashVars._var1;

IN THE HTML EMBED –

add new param in object tag:

add in the embed statement:
FlashVars=”_var1=http://urltoflv.com/flv.flv”

Hope it helps -
Declan Says:
August 10th, 2009 at 2:45 pm
Hi Clint, thanks for your reply.

I did as you said, but unfortunately that didn’t work.

These were the steps i took…

Empty the Variable in AS: var strSource:String;

and

added the function: function initVideoPlayer():void {
var flashVars = this.loaderInfo.parameters;
strSource = flashVars._var1;

Then i added the param to my script:
so.addParam(‘flashVars’, ‘_var1=hancock-tsr2_h480p.flv’);

can you see from my script code below if i’m doing something wrong?

var so = new SWFObject(‘videoPlayer.swf’, ‘videoPlayer’, ’355′, ’320′, ’8′, ‘#ffffff’);
so.addParam(‘quality’, ‘high’);
so.addParam(‘allowfullscreen’, ‘false’);
so.addParam(‘allowscriptaccess’, ‘SameDomain’);
so.addParam(‘wmode’, ‘transparent’);
so.addParam(‘align’, ‘right’);
so.addParam(‘salign’, ‘t’);
so.addParam(‘flashVars’, ‘_var1=hancock-tsr2_h480p.flv’);
so.write(‘flashcontent’);

thanks
Declan
Declan Says:
August 10th, 2009 at 3:02 pm
BTW Clint,

I’ve also tried writing my acript code this way which at least displays the player but still not loading the .flv:

Looks like you don’t have the flash player. Get Flash Player

var flashvars = {};
flashvars.file = ‘hancock-tsr2_h480p.flv’;
flashvars.id = ‘_var1′;
flashvars.autostart = ‘true’;

var params = {};
params.allowfullscreen = ‘false’;
params.allowscriptaccess = ‘always’;

var attributes = {};
attributes.id = ‘flashcontent’;
attributes.name = ‘flashcontent’;
attributes.styleclass = ‘flashcontent’;
swfobject.embedSWF(‘videoPlayer.swf’, ‘flashcontent’, ’335′, ’320′, ’9.0.124′, ‘expressInstall.swf’, flashvars, params, attributes);

Not sure if i am closer doing it this way. Anyway, if you can help, i would be very greatful.

thanks again
Declan
Emma Says:
August 13th, 2009 at 3:34 pm
This is a great tutorial and player! Thanks for posting this; it has really helped me to gain more of an understanding of video in AS3. I do have a couple of questions. I’d like to make the player accessible. I’d like to add captions in an Timed Text XML format with a on/off captions button. What is the best scripting to use for that? I’m having trouble figuring out how code everything. Thanks!
Pedro Says:
August 21st, 2009 at 1:09 am
Rafael, the player supports live scrubbing when playing a local FLV file(i.e. it updates the video display as you slide the play head). When I connect to my FMS it no longer behaves this way. Is this expected behavior with FMS? I can’t seem to find a difinitive answer to this. Thanks for the help and thanks for the code, it’s great!
Chi Says:
August 24th, 2009 at 10:45 pm
This code in formatTime function:

var s:int = Math.round(t);
var m:int = 0;
if (s > 0) {
while (s > 59) {
m++;
s -= 60;
}

can be replaced with:

var s:int = t%60;
var m:int = t/60;

And why in god’s name are you rounding and int?
Sachin Says:
August 26th, 2009 at 11:56 am
Thanks Raf,
This post helps me a lot i got excatlly wht i was searching from a long time.
I have a question is there any way to allow buffering while the video in paused.
Thanks in advance
Eric Beckman Says:
September 21st, 2009 at 6:57 pm
Hi,
First off AWESOME tutorial. Though I’m trying to tweak it to fit my needs and I’m having trouble. I repositioned the load and volume bar and also resized them a bit. I’m having trouble getting the gray bar and the scrubbers to work right.

code…
// set default volume
mcVideoControls.mcVolumeScrubber.x = (53 * DEFAULT_VOLUME) + 353;
mcVideoControls.mcVolumeFill.mcFillOrange.width = mcVideoControls.mcVolumeScrubber.x – 394 + 53;
setVolume(DEFAULT_VOLUME);
}

function playClicked(e:MouseEvent):void {
// check’s, if the flv has already begun
// to download. if so, resume playback, else
// load the file
if(!bolLoaded) {
nsStream.play(strSource);
bolLoaded = true;
}
else{
nsStream.resume();
}

// show video display
vidDisplay.visible = true;

// switch play/pause visibility
mcVideoControls.btnPause.visible = true;
mcVideoControls.btnPlay.visible = false;
}

function pauseClicked(e:MouseEvent):void {
// pause video
nsStream.pause();

// switch play/pause visibility
mcVideoControls.btnPause.visible = false;
mcVideoControls.btnPlay.visible = true;
}

function stopClicked(e:MouseEvent):void {
// calls stop function
stopVideoPlayer();
}

function muteClicked(e:MouseEvent):void {
// set volume to 0
setVolume(0);

// update scrubber and fill position/width
mcVideoControls.mcVolumeScrubber.x = 361;
mcVideoControls.mcVolumeFill.mcFillOrange.width = 1;
}

function unmuteClicked(e:MouseEvent):void {
// set volume to last used value
setVolume(intLastVolume);

// update scrubber and fill position/width
mcVideoControls.mcVolumeScrubber.x = (53 * intLastVolume) + 361;
mcVideoControls.mcVolumeFill.mcFillOrange.width = mcVideoControls.mcVolumeScrubber.x – 394 + 53;
}

function volumeScrubberClicked(e:MouseEvent):void {
// set volume scrub flag to true
bolVolumeScrub = true;

// start drag
mcVideoControls.mcVolumeScrubber.startDrag(false, new Rectangle(361, 19, 39, 0));
}

function progressScrubberClicked(e:MouseEvent):void {
// set progress scrub flag to true
bolProgressScrub = true;

// start drag
mcVideoControls.mcProgressScrubber.startDrag(false, new Rectangle(53, 20, 207.6, 0));
}

function mouseReleased(e:MouseEvent):void {
// set progress/volume scrub to false
bolVolumeScrub = false;
bolProgressScrub = false;

// stop all dragging actions
mcVideoControls.mcProgressScrubber.stopDrag();
mcVideoControls.mcVolumeScrubber.stopDrag();

// update progress/volume fill
mcVideoControls.mcProgressFill.mcFillOrange.width = mcVideoControls.mcProgressScrubber.x + 0;
mcVideoControls.mcVolumeFill.mcFillOrange.width = mcVideoControls.mcVolumeScrubber.x – 394 + 53;

// save the volume if it’s greater than zero
if((mcVideoControls.mcVolumeScrubber.x – 361) / 53 > 0)
intLastVolume = (mcVideoControls.mcVolumeScrubber.x – 361) / 53;
}

function updateDisplay(e:TimerEvent):void {
// checks, if user is scrubbing. if so, seek in the video
// if not, just update the position of the scrubber according
// to the current time
if(bolProgressScrub)
nsStream.seek(Math.round(mcVideoControls.mcProgressScrubber.x * objInfo.duration / 207+53))
else
mcVideoControls.mcProgressScrubber.x = nsStream.time * 207 / objInfo.duration+53;

// set time and duration label
mcVideoControls.lblTimeDuration.htmlText = “” + formatTime(nsStream.time) + ” / ” + formatTime(objInfo.duration);

// update the width from the progress bar. the grey one displays
// the loading progress
mcVideoControls.mcProgressFill.mcFillOrange.width = mcVideoControls.mcProgressScrubber.x – 53;
mcVideoControls.mcProgressFill.mcFillGrey.width = nsStream.bytesLoaded * 207 / nsStream.bytesTotal+53;

// update volume and the red fill width when user is scrubbing
if(bolVolumeScrub) {
setVolume((mcVideoControls.mcVolumeScrubber.x – 361) / 53);
mcVideoControls.mcVolumeFill.mcFillOrange.width = mcVideoControls.mcVolumeScrubber.x – 394 + 53;
}
}

code…

Can any body maybe fix it or tell me what I’m doing wrong?

Thanks so much
Matelot Says:
September 25th, 2009 at 2:33 am
Hi Rafael

Excellent tutorial and player.

I am wondering if you could explain why I am getting the following error message when trying to load the player using a preloader swf:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at videoplayer_fla::MainTimeline/initVideoPlayer()
at videoplayer_fla::MainTimeline/frame1()

The preloader, video player file and video are all sitting in the same folder.

Cheers Matelot
Robert Resendez Says:
September 29th, 2009 at 5:53 pm
I don’t know if this is stupid or not but when I preview my video locally it plays fine and when i upload it it will no play the FLV file. Can you please tell me what I’m doing wrong.

I’m using CS4
Chris Says:
October 1st, 2009 at 1:54 am
I was curious how I would ad selectable videos and descriptions below the video player, and have them play when clicked on?
By the way, this tutorial is one of the most in depth and described that I have ever seen. Many thanks for this tutorial and your hard work on this Rafael Nünlist.
Asim Kh Says:
October 2nd, 2009 at 8:41 pm
hi, just wanna check; how can i loop the video player continues to play
the video… if i have one video like http://www.asimkh.blogspot.com

else in xml; how can it continues to play other files in xml?
thanks in advance!
JC Says:
October 19th, 2009 at 9:30 pm
Hi, I love this tutorial, it’s PERFECT. I’m not sure how active this blog is, but would you mind elaborating a little more on how you came up with the fixed numbers and calculations? For example, in mcVideoControls.mcVolumeScrubber.x = (53 * DEFAULT_VOLUME) + 341 what does the 53 and the 341 stand for. Same with mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x – 394 + 52;

I’m just having a hard time trying to figure that out.
weedshaker Says:
November 2nd, 2009 at 2:33 pm
Hi,

first, good and nice tutorial… The positioning could have been automatically, although no complains

To: JC
——-
This numbers with which you are troubling are the positions and length of elements the script is counting with… give it a try and start changing it a bit… you’ll see how it works!

Cheers
Tin Says:
November 9th, 2009 at 10:21 am
How can i add in buffering image when the video is doing buffering.

Thanks,
Tin
mike Says:
November 13th, 2009 at 3:48 pm
This is a brilliant tutorial and the best flash player video I have come across.

I’m rough around the edges when it comes to actionscript but I was hoping if you could provide me with a solution if I wanted to have the video begin playing automatically, without the play button being pressed first.

Thanks so much for your efforts! Great work!
Almog Says:
November 14th, 2009 at 12:47 am
Its is possible that u can post this code as AS2?

TNx!
kara Says:
November 15th, 2009 at 7:27 am
THANKYOU!!!! Exactly what I needed and with very little to tweak to suit my video. Very well commented and explained.
Dennisj Says:
November 15th, 2009 at 9:20 pm
Thanks for the great tutorial and great player, will be customising it shortly!
Ad.frances.Fabean Says:
December 8th, 2009 at 2:47 pm
Good tutorial, thx.
…
by the way, I have a problem, with new skin for flvplayback, when I make a myskin, but cannot put to flvplayback, and show this error message “Error #2044: Unhandled skinError:. text=No layout_mc.video_mc” , how to fix this problem … may you can tell me about that, and tell me how I can made a video player with a mynewskin… tell me what ever you know !!! thx …
bebOp Says:
December 11th, 2009 at 10:19 am
Hi Rafael
I’m working on a video player in as3, and my code looks quite similar to yours.
I also added a mouseOver event on the progress bar yo show a tooltip with the time to seek (just like youtube and others).

Now i’d like to add this function: when i click on the progress bar, the video seeks to that point, even if it isn’t loaded yet.
Sorry for my bad english, i hope you understand.
I looked at the doc and I found that you can pass a start value to NetStream.play(), and i thought it was enough for my aim, but it doesn’t seem to work.

Any ideas?
forsmajor Says:
December 12th, 2009 at 9:23 pm
is there a way to close NetStream and Netconnection properly on this player?
Mark Says:
December 14th, 2009 at 5:30 pm
Does anyone know how to call a function when there’s cuePoints in the FLV?
SherrieMae Says:
December 15th, 2009 at 10:11 am
Though Im not that good in Flash as3 I successfully followed this tutorial because Raf explained it all well, Im now in modification stage & Im having hard time making my desired output, what I did is I made a single flash page & created a buttons to load those external swfs files with a video attached on it. The only problem is that when I play the video and clicking to other button to load other external swfs, the recent video is still playing. I know there’s a way to solve this.

Any thoughts?

Thanks!
Dondi Says:
December 22nd, 2009 at 1:43 pm
Could I use the video Class to create the vidDisplay? You never explained how that vidDisplay works.
Clay G Says:
December 24th, 2009 at 6:36 am
Great tutorial, this had everything I needed to know and more. Thanks!
Rajnish Says:
December 25th, 2009 at 10:56 am
Thanks
I have easily understand this code.
JCOL Says:
December 30th, 2009 at 7:07 pm
I loved this tutorial. It was a little challenging getting around those magic numbers though, cause with them, it’s almost impossible to customize. Overall, great tutorial.
Darren Says:
January 4th, 2010 at 11:34 pm
I found a nice AS3 based video player – http://videoxpress.net. Looks very intuitive.
hek718 Says:
January 6th, 2010 at 7:36 am
this tutorial was invaluable! Best AS3 tut by far, takes you step by step so learn…
DeltaFrog Says:
January 11th, 2010 at 9:07 am
Howdy, I have created a file and have tied the progress bar width to the stage width. I’m shooting for a full screen application of the player.

The issue is that the mcProgressScrubber stretches along with the progress bar when the stage is resized so I have to find a way to retain the original width of the mcProgressScrubber while the parent clips width is being changed.

Could anyone suggest some insight for keeping the mcProgressScrubber graphic the same width no matter what width the parent mcVideoControls is stretched too? Thanks in advance.
DeltaFrog Says:
January 11th, 2010 at 9:40 am
Got it.
saintz Says:
January 16th, 2010 at 4:19 pm
I am trying to implement progressive download method, however the buffering is extremely slow. Is there a way to improve the speed of download?

Right now it takes almost 150 seconds to load 8 secs of movie.!!!

Thank you for any input.
Ben Says:
January 18th, 2010 at 3:12 am
Hi….

This is the best video player script i have seen but i have one small problem…

I have moved the progress bar 47px to the right and when i click play it jumps to the very left….

can anyone help me….?

thanks

Ben
JaymanJohn Says:
January 24th, 2010 at 5:32 am
the code’s great, forgive me for asking but this is important for me

how do you hide the whole video after it’s done playing?

i don’t really know how setInterval could help me but surely there must be other way to hide the video (or call other function) after it’s done playing right?

mail to me at kedainasi@yahoo.com, or reply here, i’ll check daily, thanks in advance
Lauren Says:
January 28th, 2010 at 7:15 pm
Thanks for the great player!

I had trouble with some of the suggestions to pass the video source using swfObject. In case anyone’s interested, this is what finally worked for me:

var videoPath //This is the var that’s passed in the swfObject
// Tell the flash that flashVars will be passed to it
var flashVars = this.loaderInfo.parameters;
var strSource = flashVars.videoPath;

Hope this helps!
Kevin McMurdie Says:
February 5th, 2010 at 12:16 am
Thanks a lot for your tutorial, it really helped a lot! But I am running into a problem: I have some relatively short FLVs (generally about 30 seconds, sometimes longer) and so the seek() doesn’t work properly. What happens is that I scrub along, I’ll release it, but instead of playing where I release it goes back up to 10 seconds or so. I read up (hopefully I understood well) that the seek function only goes to certain keyframes in the video, which makes sense to me. Is there a way of getting around that or am I just forgetting to do something? (Because I really needed the scrub to work properly, I eventually went to the FLVPlayback component in Flash CS4, which works very well.) Ideas?
Gordon Says:
February 5th, 2010 at 1:23 pm
I just have to say that this thread (and the less advanced player thread) are some of the best resources for all that is flash video. The author is most helpful, whilst there is a lot of other people sharing too. One mighty player could be built from this thread to beat all other players…

I coded a FLV player a few months ago, and the only thing I hadn’t equipped was a volume control, so thank you, Rafael, and your willingness to share your knowledge.
Pixel Paul Says:
February 11th, 2010 at 2:12 pm
for those using FMSS/FMIS you will need to change/add this for RTMP to work (I amended script to work in external AS file):

//this function is extended to provide error responses
public function netStatusHandler(event:NetStatusEvent):void {

switch (event.info.code) {
case “NetConnection.Connect.Success”:
connectStream();
break;
case “NetStream.Play.StreamNotFound”:
vidDisplay.visible = false;
lblFileNotFound.visible = true;
lblFileNotFound.htmlText = “Connection Not Found”;
break;
case “NetStream.Play.NoSupportedTrackFound”:
vidDisplay.visible = false;
lblFileNotFound.visible = true;
lblFileNotFound.htmlText = “No Supported File Found”;
break;
case “NetStream.Connect.Failed”:
vidDisplay.visible = false;
lblFileNotFound.visible = true;
lblFileNotFound.htmlText = “Connection Failed”;
break;
case “NetStream.Connect.Success”:
vidDisplay.visible = false;
lblFileNotFound.visible = true;
lblFileNotFound.htmlText = “Connection Succeeded”;
break;
case “NetStream.Failed”:
vidDisplay.visible = false;
lblFileNotFound.visible = true;
lblFileNotFound.htmlText = “The File Could Be Not Found”;
break;
}
}

public function connectStream():void {
nsStream = new NetStream(ncConnection);
nsStream.client = this;
//nsStream.bufferTime = BUFFER_TIME;
nsStream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
nsStream.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
vidDisplay.attachNetStream(nsStream);
//nsStream.play(videoName);
//bolLoaded = true;
mcVideoControls.btnMute.visible = true;
mcVideoControls.btnUnmute.visible = false;
}

public function onBWDone(… args):void {

}

public function onMetaData(info:Object):void {
trace(“metadata: duration=” + info.duration + ” width=” + info.width
+ ” height=” + info.height + ” framerate=” + info.framerate);
// stores meta data in a object
objInfo = info;

// now we can start the timer because
// we have all the necessary data
tmrDisplay.start();
}

public function onCuePoint(infoObject:Object):void {
trace(“cue point”);
}

public function securityErrorHandler(event:SecurityErrorEvent):void {
trace(“securityErrorHandler: ” + event);
}

public function asyncErrorHandler(event:AsyncErrorEvent):void {
// ignore AsyncErrorEvent events.
}
jason Says:
February 23rd, 2010 at 11:58 am
I was wondering, this looks ideal for implementing for progressive video banner ad control. How would you go about changing the code, so the sound is muted and auto plays? (As on most MPU type banners)

Any suggestions, sorry but novice when it comes to changing the scripting.

Jason
jason Says:
February 24th, 2010 at 12:02 pm
Found this which allows you to mute the audio and set volume for use in mpu banners.

http://www.gotoandlearn.com/play?id=8

You can download the fla file.

Jason

var nc:NetConnection = new NetConnection();
nc.connect(null);

var ns:NetStream = new NetStream(nc);

theVideo.attachVideo(ns);

ns.setBufferTime(10);

ns.onStatus = function(info) {
trace(info.code);
if(info.code == “NetStream.Buffer.Full”) {
bufferClip._visible = false;
}
if(info.code == “NetStream.Buffer.Empty”) {
bufferClip._visible = true;
}
if(info.code == “NetStream.Play.Stop”) {
ns.seek(0);
}
}

ns.play(“http://www.123fruityabc.com/cms/images/stories/videos/hatties_hats.flv”);

playButton.onRelease = function() {
ns.pause();
}

rewindButton.onRelease = function() {
ns.seek(0);
}

var videoInterval = setInterval(videoStatus,100);
var amountLoaded:Number;
var duration:Number;

ns["onMetaData"] = function(obj) {
duration = obj.duration;
}

function videoStatus() {
amountLoaded = ns.bytesLoaded / ns.bytesTotal;
loader.loadbar._width = amountLoaded * 208.9;
loader.scrub._x = ns.time / duration * 208.9;
}

var scrubInterval;

loader.scrub.onPress = function() {
clearInterval(videoInterval);
scrubInterval = setInterval(scrubit,10);
this.startDrag(false,0,this._y,208,this._y);
}

loader.scrub.onRelease = loader.scrub.onReleaseOutside = function() {
clearInterval(scrubInterval);
videoInterval = setInterval(videoStatus,100);
this.stopDrag();
}

function scrubit() {
ns.seek(Math.floor((loader.scrub._x/208)*duration));
}

var theMenu:ContextMenu = new ContextMenu();
theMenu.hideBuiltInItems();
_root.menu = theMenu;

var item1:ContextMenuItem = new ContextMenuItem(“::::: Video Controls :::::”,trace);
theMenu.customItems[0] = item1;

var item2:ContextMenuItem = new ContextMenuItem(“Play / Pause Video”,pauseIt,true);
theMenu.customItems[1] = item2;

var item3:ContextMenuItem = new ContextMenuItem(“Replay the Video”,restartIt);
theMenu.customItems[2] = item3;

var item4:ContextMenuItem = new ContextMenuItem(“© 2005 Lee Brimelow”,trace,true);
theMenu.customItems[3] = item4;

function pauseIt() {
ns.pause();
}

function stopIt() {
ns.seek(0);
ns.pause();
}

function restartIt() {
ns.seek(0);
}

_root.createEmptyMovieClip(“vSound”,_root.getNextHighestDepth());
vSound.attachAudio(ns);

var so:Sound = new Sound(vSound);

so.setVolume(0);

mute.onRollOver = function() {
if(so.getVolume()== 100) {
this.gotoAndStop(“onOver”);
}
else {
this.gotoAndStop(“muteOver”);
}
}

mute.onRollOut = function() {
if(so.getVolume()== 100) {
this.gotoAndStop(“on”);
}
else {
this.gotoAndStop(“mute”);
}
}

mute.onRelease = function() {
if(so.getVolume()== 100) {
so.setVolume(0);
this.gotoAndStop(“muteOver”);
}
else {
so.setVolume(100);
this.gotoAndStop(“onOver”);
}
}
Cícero Says:
February 27th, 2010 at 2:59 pm
Amazing! Simple and efficient job!

Thanks for sharing. It saves me hours of developing! Uhuuuu!!!
Mark Says:
March 16th, 2010 at 3:09 pm
The control works great with the flv you supplied and a few others but those that I exported with Media Encoder 4 have all done flaky things when using the drag (particularily to the end). I am suspecting the encoding has something to do with it. But what? The metadata getting messed up? what to do?

I am exporting as On2Vp6. Great controller and would be great to learn from but any ideas about what is causing it to flake out?

thx
wqkid Says:
March 23rd, 2010 at 7:26 pm
Hi Rafael (or anyone that can help),

Great tutorial!

Just one minor issue… I keep getting the following errors:

TypeError: Error #1010: A term is undefined and has no properties.
at vidPlayer_fla::MainTimeline/initVideoPlayer()
at vidPlayer_fla::MainTimeline/frame1()
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at vidPlayer_fla::MainTimeline/playClicked()
TypeError: Error #1009: Cannot access a property or method of a null object reference.

*****NOTE: error #1009 applies to all my buttons (play, pause, mute, etc)

I followed exactly what you did, but I keep getting these error messages. I can’t figure this out.

Please help.

Thanks,

wqkid
Patrick Says:
March 31st, 2010 at 3:27 pm
Hi all! I would like the player to be completely transparent in the beginning and once I hover anywhere in the SWF I want the controls to show. Once I hover outside the SWF I want the controls to be transparent again.
How do I go about this?
I’ve tried adding an even listener to the AS, but it doesn’t work as expected.
The line
stage.addEventListener(MouseEvent.MOUSE_OVER, fadeInControls);
is only triggered when I hover over the controls. Does anyone have a solution to that?
Anuradha Says:
April 5th, 2010 at 6:21 am
Hi,

Very useful video code.

I would like to know where can we use this code?
1) Application file or
2) AS class or
3) AS File.

Thanks
Anuradha
Chris Says:
April 5th, 2010 at 7:18 pm
I’m currently trying to adapt your playback controller to control five video files simultaneously. Due to the fact that the videos need to stay perfectly in synch, I am thinking streaming might be a problem. Do you have any idea if this will cause problems, or will it work fine as it is?

However, my real question is this. Which parts of the code will I have to modify, and in which way would I have to do it? Here’s my guess, please tell me if I’m getting it wrong or missing anything.

**ORIGINAL**
// url to flv file
var strSource:String “movies/livingroom.flv”;

**REPLACEMENT**
// url to flv file
var strSource:String “movies/livingroom.flv”;
var strSource2:String “movies/bedroom.flv”;
var strSource3:String “movies/bathroom.flv”;
var strSource4:String “movies/kitchen.flv”;
var strSource5:String “movies/corridor.flv”;

**ORIGINAL**
// attach net stream to video object on the stage
vidLivingRoom.attachNetStream(nsStream);

**REPLACEMENT**
// attach net stream to video object on the stage
vidLivingRoom.attachNetStream(nsStream);
vidLivingRoom.attachNetStream(nsStream);
vidLivingRoom.attachNetStream(nsStream);
vidLivingRoom.attachNetStream(nsStream);
vidLivingRoom.attachNetStream(nsStream);

I’m really not impressive with AS3 so I’m sorry to ask such a big request of you. If you respond I’d be eternally grateful

Thanks!
Dan Says:
April 11th, 2010 at 9:43 pm
Does it need to have special rendering codex or format for the video file?

I tried using my own video render from final cut and none play on this flash player.
Calvinalibra Says:
April 12th, 2010 at 6:35 pm
Hey Dan,

If you haven’t already, try using an .FLV or an .MP4 and see if you can get it to play. Worst case scenario, try grabbing a test .FLV from some website and try to make it play. It may just be the actual video. Final Cut exporting can cause viewing issues depending on how videos are exported.
one giant media Says:
April 20th, 2010 at 1:38 am
Hi,

Great job.

I was wondering… what if buffering 8 seconds is too little for a slow connection? i.e., what if the user’s player catches up with the 8 seconds of buffered video within 20 seconds of watching the video… Then the player freezes because there is not enough video loaded to play smoothly… right?

Should you take some measures to adjust the buffer based on how fast it’s downloading? How is this done for like the YouTube player that preloads / buffers appropriately every time?
jcc Says:
April 27th, 2010 at 11:01 pm
many of your variables should have been put has globals, so theres no need to change many vars when you want to have a larger player
cheers
Jeff Says:
April 28th, 2010 at 12:47 am
Just a word of advice. Pretty sure this url – http://www.gotoandlearn.com/play?id=8 – as noted above is in AS2 not AS3. That entire series on how to build a media player references outdated code – be careful not to get them intermixed – could be where all you errors are coming from.
Janis Says:
April 28th, 2010 at 2:38 pm
Hi, thanks for the tutorial! its really great!

i have the same problem like junebug and cobretti. Here is the problem:

“I moved the scrubber/progress bar down by 19 px.
I moved the scrubber/progress bar over to the right by 60 px.

I managed to get the scrubber to line up with the video progress bar after a little manipulation but now I have problems scrubbing.. trying to scrub results in the video jumping to the end…
current code:

function updateDisplay(e:TimerEvent):void {
// checks, if user is scrubbing. if so, seek in the video
// if not, just update the position of the scrubber according
// to the current time
if(bolProgressScrub)
nsStream.seek(Math.round(mcVideoControls.mcProgressScrubber.x * objInfo.duration / 354 + 60 ))
else
mcVideoControls.mcProgressScrubber.x = nsStream.time * 354 / objInfo.duration + 60;

// set time and duration label
mcVideoControls.lblTimeDuration.htmlText = “” + formatTime(nsStream.time) + ” / ” + formatTime(objInfo.duration);

// update the width from the progress bar. the grey one displays
// the loading progress
mcVideoControls.mcProgressFill.mcFillRed.width = mcVideoControls.mcProgressScrubber.x – 60;
mcVideoControls.mcProgressFill.mcFillGrey.width = nsStream.bytesLoaded * 360 / nsStream.bytesTotal;”

@ junebug and cobretti: do you solved the problem? can you tell my how to do it?

or somebody else can help me? i dont know what to do…

thank you for any help!
Pato Says:
April 29th, 2010 at 12:29 am
Hi, this Player is awesome! just Need help with a few thing (cuz Im trying to learn I don’t know some stuff, please people be patience) :
First I want to put the video and the controls inside a MC and move that MC outside the stage clicking a button(for example when I click the button the MC with the video goes to the right till disappear totally from the stage). when is outside the video stop, then when you clicked the button appears again in the stage with a transition and the video plays again.
Maybe there’s somebody out there to help me! thanks in advanced!
jcc Says:
May 4th, 2010 at 9:17 pm
theres a problem with your player if you scroll to the end and get back scrolling nothing will appear, video black.
jcc Says:
May 4th, 2010 at 11:31 pm
FFS i’ve been hours trying this:
i have changed the position of the video scrubber, its si fucking ugklu to have a scrub timeline all the way, but the fucking headvideo scrubber keeps on starting for the far lest!!! FFS, many people asked this and you havent reply, I FED UP WITH THIS SHIT.
alfonse Says:
May 5th, 2010 at 6:36 am
hi i have the same problem as junebug ,cobretti and janis.
Mark Says:
May 7th, 2010 at 12:27 pm
I haven’t followed what you all are talking about but this might help. Remember that the .flvs have to be encoded with “keyframes” and make sure there is one close to the end (likely to be the case any which way)
one keyframe every 30 frames is usually ok but more doesn’t seem to hurt.
Janis Says:
May 10th, 2010 at 12:10 pm
@ alfonse
i found a way to solve this problem. it is certainly not the best solution but it works :

just cut the movieclip with your progressBar out of the “Videocontrols-Movieclip/Layer” and past it into a new layer in your root directory. now you should have the Videocontrols Layer and the progressBar layer in your root directory.

greetings
Don9of11 Says:
May 12th, 2010 at 4:16 pm
I need to make the video player larger. When I do the controls get stretched out. Do I need to remake the controls to fit the video player?
Alex Says:
May 16th, 2010 at 6:56 am
Thank you so much for this. This saved me so much research time. I can’t thank you enough!
Dean Mellis Says:
June 6th, 2010 at 11:16 pm
Thanks for the great tutorial. There aren’t many out there that don’t use components. I don’t use those playback components since one of the main benefits of using Flash is customization.

Just one tip though: When coding it’s always best practice to avoid hard coding numbers. If this file is to be passed on to others or reused time and time again, those parameters for the scrubbers should not be hard coded numbers. They should be dynamic expressions based on the original and current positions of your video controls.
Gys Says:
June 10th, 2010 at 2:11 pm
SOLUTION for hiding Controls + dynamic txtfiled with time:

mcVideoControls.addEventListener(MouseEvent.MOUSE_OVER, showHideControls);
mcVideoControls.addEventListener(MouseEvent.MOUSE_OUT, showHideControls);

function showHideControls(e:MouseEvent):void {
if(e.type == MouseEvent.MOUSE_OVER)
{mcVideoControls.alpha = 1;
// hiding the textfield: no alpha allowed
mcVideoControls.lblTimeDuration.visible = true;}

else
{mcVideoControls.alpha = 0;
mcVideoControls.lblTimeDuration.visible = false;}
}
Cyrus Says:
June 11th, 2010 at 3:52 pm
Hi all,

I was wondering if anyone could answer a quick question for me. I have a different player that takes metadata from the .flv file to play it. The problem is that .mp4 files won’t play because the metadata is in a different format (H.264). Can anyone help me out?
newbie boy Says:
July 22nd, 2010 at 5:17 am
Great turorial! Thanks!!!
One more thing, how can i make the player play automatically when loaded?
Thanks!!!
Hector Aranda Says:
July 22nd, 2010 at 5:01 pm
Great vid player.

I am wondering if there is an option to restart, loop back, return to beginning when the the video ends playing. Is it possible?
CACUSER Says:
July 30th, 2010 at 9:39 pm
How do you access the currentFrame in this example? Using the variable currentFrame always returns 1.
newbie boy Says:
August 5th, 2010 at 10:35 am
how can i load a thumbnail and display it when players is not playing and stops from playing?

9 Trackbacks For This Post

Tutorials | The Tech Labs Roundup « Flash Enabled Blog Says:
July 30th, 2008 at 11:48 pm
[...] How to build a AS3 Videoplayer [...]
AS3 Video Player tutorials roundup | Lemlinh.com Says:
August 15th, 2008 at 3:49 pm
[...] Read more [...]
Link Post Sunday 08/24 | Mr Sun Studios Says:
August 24th, 2008 at 5:00 pm
[...] How to Build an AS3 Videoplayer by The Tech Labs [...]
Ramblings › Just another WordPress weblog Says:
December 31st, 2008 at 5:33 pm
[...] How to build a AS3 Videoplayer | The Tech Labs (tags: flash actionscript tutorial) [...]
Ultimate List Of 40 Quality Flash Tutorials For Your Animated Desire | The Theme Blog Says:
February 11th, 2009 at 6:25 pm
[...] How To Build An AS3 Videoplayer [...]
Flash Video - Year of the Ape Says:
March 23rd, 2009 at 7:22 pm
[...] > How to build a Flash AS3 Videoplayer: http://www.thetechlabs.com/video/how-to-build-a-as3-videoplayer/ [...]
Flash Actionscript 3 URL link button | Alex Brooke Says:
May 25th, 2009 at 1:39 pm
[...] The video player I used for this example was made by Rafael Nuenlist. You can view the tutorial here. [...]
Daily Digest - Inspiration & Resources 19 June 09 » De Web Times - Sharing Useful Resources. Says:
June 19th, 2009 at 10:14 am
[...] How to build a Flash Actionscript 3.0 Videoplayer [...]
How to build a Flash Actionscript 3.0 Videoplayer Part 1 | codes.creativebrain.ca Says:
September 22nd, 2009 at 3:05 pm
[...] tutorial of “how to build basic flash video player using AS3.0″ from http://www.thetechlabs.com/tutorials/audionvideo/how-to-build-a-as3-videoplayer/. Click on this link for detailed information about this [...]

Flash Platform and ActionScript Tutorials

How to build a Flash Actionscript 3.0 Videoplayer

Requirements

Constants

Variables

Functions

Call init function

Full code with comments

Related posts:

About the Author

162 Comments For This Post

9 Trackbacks For This Post

Leave a Reply

Become an Author

Suggest a Tutorial

What's Coming Next

1093 Subscribers