Video Loader "Playlist"

[joshuaMaverick]

I'm trying to use the video loaders to create a playlist of videos, so that videos continuously load, and play sequentially.

 

Ideally, I'd like it to work in the following manner:

 

1. begin preloading an array of videos

2. when 3 videos are completed loading, begin playing the first video

3. when a video is complete, begin to play the next video

4. when the videos are done, begin the list again.

 

I'm going through the docs and I've done the following:

 

	private function initPreload(vidArray:Array):void
	{
		queue = new LoaderMax({name:"mainQueue", onChildComplete:childCompleteHandler});

		for (var i:int = 0; i < vidArray.length; i++)
		{
			queue.append(new VideoLoader(vidArray[i], {name:"vid"+i, container:this, width:400, height:300, scaleMode:"proportionalInside", autoPlay:false}));
		}	
		queue.load();
	}

	private function childCompleteHandler(event:LoaderEvent):void
	{
		cNum++;

		if (cNum == 2)
		{
			queue.getLoader("vid0").playVideo();
		}
	}

 

So here I'm just trying to get the first video to play, once 3 videos have been finished loading. But instead, three videos kind of play/appear when i test this :S

 

Thank you.

[GreenSock]

Your code was putting all the videos on the stage right away with the first one on the bottom of the stack, and the last one on the top. So you couldn't see your first video playing since the last one in the array was on top of all the others.

 

Here's some relatively simple code that would do what you asked (and has the videos fade in/out):

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
import com.greensock.loading.*;
import com.greensock.events.*;

TweenPlugin.activate([AutoAlphaPlugin]);

var queue:LoaderMax;
var preloadCount:uint = 0;
var curVideoIndex:int = -1;
var vidArray:Array = ["video1.flv","video2.flv","video3.flv","video4.flv"];
initPreload();

function initPreload():void {
queue = new LoaderMax({name:"mainQueue", onChildComplete:childCompleteHandler, maxConnections:1});
for (var i:int = 0; i 		queue.append(new VideoLoader(vidArray[i], {name:"vid"+i, container:this, width:400, height:300, alpha:0, visible:0, scaleMode:"proportionalInside", autoPlay:false}));
}
queue.load();
}

function childCompleteHandler(event:LoaderEvent):void {
preloadCount++;
if (preloadCount == 2) {
	showVideo(0);
}
}

function showVideo(index:uint):void {
if (curVideoIndex != -1) {
	var old:VideoLoader = LoaderMax.getLoader(vidArray[curVideoIndex]) as VideoLoader;
	old.removeEventListener(VideoLoader.VIDEO_COMPLETE, videoCompleteHandler);
	TweenLite.to(old.content, 1, {autoAlpha:0}); //fade it out
	TweenLite.to(old, 1, {volume:0, onComplete:old.pauseVideo}); //fade the volume down and then pause the video.
}
curVideoIndex = index;
var video:VideoLoader = LoaderMax.getLoader(vidArray[index]) as VideoLoader;
addChild(video.content); //brings the video to the top of the display list.
video.addEventListener(VideoLoader.VIDEO_COMPLETE, videoCompleteHandler);
video.gotoVideoTime(0, true);
TweenLite.to(video.content, 1, {autoAlpha:1});
TweenLite.to(video, 1, {volume:1});
}

function videoCompleteHandler(event:LoaderEvent):void {
var nextIndex:int = curVideoIndex + 1;
if (nextIndex >= vidArray.length) {
	nextIndex = 0;
}
showVideo(nextIndex);
}

[joshuaMaverick]

Sweet!

 

It's half working now. I did make some minor adjustments, just to the tween length etc. It's randomly not displaying certain videos, and quickly skipping over others :S. Thoughts on this would be helpful. Thank you so much for your efforts so far, it is HIGHLY appreciated. I'll be telling everyone I know to join the premium club.

 

        private function loadVideos(videoInput:XML):void
       {
           videoList = videoInput.children();

           initArray = new Array();

           for (var i:int = 0; i < videoList.length(); i++)
           {
               var videoElement:XML = videoList[i];

               initArray.push("javAdmin/"+videoElement);

           } 

           randomizeArray(initArray);
       }

       private function randomizeArray(array:Array):void
       {

           vidArray = new Array();

           while (array.length > 0)
           {
               var r:int = Math.floor(Math.random() * array.length);
               vidArray.push(array[r]);
               array.splice(r, 1);
           }

           initPreload();
       }

       private function initPreload(e:Event = null):void
       {
           queue = new LoaderMax({name:"mainQueue", onChildComplete:childCompleteHandler, maxConnections:2});
           for (var i:int = 0; i < vidArray.length; i++) 
           {
               queue.append(new VideoLoader(vidArray[i], {name:"vid"+i, container:this, width:stage.stageWidth, height:stage.stageHeight, alpha:0, visible:0, scaleMode:"proportionalInside", autoPlay:false}));
           }
           queue.load();
       }

       private function childCompleteHandler(event:LoaderEvent):void
       {
           preloadCount++;
           if (preloadCount == 3) 
           {
               showVideo(0);
           }
       }

       private function showVideo(index:uint):void 
       {
           if (curVideoIndex != -1) 
           {
               var old:VideoLoader = LoaderMax.getLoader(vidArray[curVideoIndex]) as VideoLoader;
               old.removeEventListener(VideoLoader.VIDEO_COMPLETE, videoCompleteHandler);
               TweenLite.to(old.content, .15, {autoAlpha:0}); //fade it out
               TweenLite.to(old, .15, {volume:0, onComplete:old.pauseVideo}); //fade the volume down and then pause the video.
           }

           curVideoIndex = index;
           trace("index: "+vidArray[index]);
           var video:VideoLoader = LoaderMax.getLoader(vidArray[index]) as VideoLoader;
           addChild(video.content); //brings the video to the top of the display list.
           video.addEventListener(VideoLoader.VIDEO_COMPLETE, videoCompleteHandler);
           video.gotoVideoTime(0, true);
           TweenLite.to(video.content, .15, {autoAlpha:1});
           TweenLite.to(video, .15, {volume:1});
       }

       private function videoCompleteHandler(event:LoaderEvent):void 
       {
           var nextIndex:int = curVideoIndex + 1;
           if (nextIndex >= vidArray.length) 
           {
               nextIndex = 0;
           }
           showVideo(nextIndex);
       }

[GreenSock]

Maybe you have bad paths set up or the videos weren't encoded properly or they were trying to be played before they had loaded? Very tough to troubleshoot without having your stuff to look at (including videos). I'd recommend setting up onFail listeners to see if any of your videos aren't loading properly. And add logic to handle when showVideo() is called for a video that hasn't loaded yet. And be careful about setting maxConnections to 2 - I set it to 1 in my example because your code seemed to rely on things loading sequentially. For example, let's say the first video in the queue is 20k, the next is 500000k and the 3rd and 4th are 20k. If maxConnections is 2, there's a very good chance that videos 1, 3, and 4 will load BEFORE video 2. If that doesn't cause problems for your app, cool.

[joshuaMaverick]

When it skips the videos, it seems to wait the duration of the video before it jumps to the next file. Also, I'm testing locally right now, so shouldn't they all be considered fully loaded? It's not the paths, because the videos that fail are never the same. However, after 3 tests it does seem like 10 of the 15 clips fail each time. 10 random videos, in a random order. I'd actually like it to attempt to load the sequence, but if the users connection is too slow, cycle through the array until it hits a completed clip. The clips are only 3 - 10 seconds long.

[GreenSock]

Not sure - I'd really need to see the problem reproduced to effectively troubleshoot it. Sounds like there's something funky in your code - it appeared to work fine in my limited tests locally with my own FLV files. Feel free to post a link to your files if you'd like more help.

[joshuaMaverick]

Here are the videos

 

http://www.mav-media.com/clients/JAV/bg.zip < contains the videos that should play sequentially.

 

I can't seem to find a pattern as to why the videos are not playing. I had my array randomizing, so I took that off, but I still can't see any issues. The code you provided makes sense to me.

 

All help GREATLY appreciated.

 

Thank you!

[GreenSock]

Works fine for me. I just tried it with the example code I had given you and it looked like every video played. None were frozen. I'm not sure what to tell you. Just download those videos, put them in a "videos" folder that's in the same directory as the attached FLA file and publish - you should see everything work great.

[joshuaMaverick]

Damn, still not working correctly with the fla and instructions you gave me. Can I send you a zip of the package, maybe there is something else I'm missing? thanks so much for your help.

[joshuaMaverick]

http://www.mav-media.com/clients/JAV/src.zip

 

contains the instructions, fla and swf I produced. Maybe my loader package is dated and has a bug :S

 

Thanks yet again. Much, much appreciated.

[GreenSock]

Yep, it looks like you had a pretty stale version of the LoaderMax system. Try the latest: http://www.LoaderMax.com. Worked well for me once I updated. About a month ago I patched the system to work around another NetStream bug.