VideoLoader Play while loading rest of queue

[digitaldesignsvc]

Hello!

We are using this tutorial as a starting point:

http://codeknow.com/...ce/videoLoader/

 

What we have is seven F4V videos that are relatively large (smallest 5.2MB; largest 44.3MB). I am using the XML loader to create the queue and then load it as the tutorial link above demonstrates.

 

The first video in the queue should play when enough of it is buffered in (it's 8.9MB) while the rest of the videos download in the background. I am using MaxConnections = 1.

 

What is happening though is that the first video doesn't show until the entire queue of videos is loaded completely. The audio plays though. Can anyone lend some assistance to me to help troubleshoot this?

 

XML file content:

<?xml version="1.0" encoding="iso-8859-1"?>
<videoList>
<LoaderMax name="videoListLoader" prependURLs="video/" load="true" maxConnections="1" >
 <VideoLoader url="Intro.f4v" name="videoID0" width="1060" height="620" scaleMode="proportionalInside" centerRegistration="true" alpha="1" autoPlay="true" estimatedBytes="8887418" />
 <VideoLoader url="RC.f4v" name="videoID1" width="856" height="530" scaleMode="proportionalInside" centerRegistration="true" alpha="0" autoPlay="false" estimatedBytes="14602065" />
 <VideoLoader url="PED.f4v" name="videoID2" width="856" height="530" scaleMode="proportionalInside" centerRegistration="true" alpha="0" autoPlay="false" estimatedBytes="37803458" />
 <VideoLoader url="AMT.f4v" name="videoID3" width="856" height="530" scaleMode="proportionalInside" centerRegistration="true" alpha="0" autoPlay="false" estimatedBytes="44307106" />
 <VideoLoader url="ECR.f4v" name="videoID4" width="856" height="530" scaleMode="proportionalInside" centerRegistration="true" alpha="0" autoPlay="false" estimatedBytes="22076283" />
 <VideoLoader url="REC.f4v" name="videoID5" width="856" height="530" scaleMode="proportionalInside" centerRegistration="true" alpha="0" autoPlay="false" estimatedBytes="27594500" />
 <VideoLoader url="Outro.f4v" name="videoID6" width="856" height="530" scaleMode="proportionalInside" centerRegistration="true" alpha="0" autoPlay="false" estimatedBytes="5196856" />
</LoaderMax>
</videoList>

 

My Flash is too big to upload but here is the frame 1 script

 

// Import Scripts
import flash.net.URLRequest;
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import com.greensock.TweenMax;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.LoaderMax;
import com.greensock.loading.XMLLoader;
import com.greensock.loading.VideoLoader;
import flash.geom.Rectangle;
//---- LOADER MAX ----------------------------------------------------------------;
//an array containing the VideoLoaders in the order they should be played
var _videos:Array;
//keeps track of the VideoLoader that is currently playing
var _currentVideo:VideoLoader;
//If true, the audio has been muted
var _silentMode:Boolean = false;
//Check if we are in PlayAll Mode (true)
var _playAllMode:Boolean = false;
MainP();
//txt_progress.text = "0";
function MainP()
{
LoaderMax.activate([xmlLoader, VideoLoader]);
initUI();
var xmlLoader:XMLLoader = new XMLLoader("videos.xml",{name:"videoList",onComplete:xmlHandler});
trace("XML Loader started");
xmlLoader.load();
trace("XML Loader Processing");
}
function xmlHandler(event:LoaderEvent):void
{
trace("XML Complete Handler Started");
var queue:LoaderMax = LoaderMax.getLoader("videoListLoader");//get the LoaderMax named "videoListLoader" which was inside our XML
_videos = queue.getChildren();//store the nested VideoLoaders in an array
trace("Loading XML...");
queue.load();
//start loading the queue of VideoLoaders (they will load in sequence);
trace("XML and videoListLoader loading!");
showVideo(_videos[0]);//show the first video
}
function initUI():void
{
//ignore mouse interaction with preloader_mc
preloader_mc.mouseEnabled = false;
//initially hide the user interface - autoAlpha:0 sets alpha to 0 and visible to false.
TweenMax.allTo([preloader_mc], 0, {autoAlpha:0});
}
function activateUI():void
{
btn_play.addEventListener(MouseEvent.CLICK, togglePlayPause);
btn_next.addEventListener(MouseEvent.CLICK, nextVideo);
btn_back.addEventListener(MouseEvent.CLICK, previousVideo);
//loop through various UI elements and set buttonMode to true and mouseChildren to false so that rollovers/outs work smoothly;
//var controls:Array = [btn_play];
//var i:int = controls.length;
//while (i--)
//{
//controls[i].buttonMode = true;
//controls[i].mouseChildren = false;
//}
}
//---- MENU BUTTONS ----------------------------------------------------------------;
function play0(evt:MouseEvent):void
{
gotoAndPlay("Regulatory");
_playAllMode = false;
selectedVideo(evt,1);
}
function play1(evt:MouseEvent):void
{
gotoAndPlay("EmplDev");
_playAllMode = false;
selectedVideo(evt,2);
}
function play2(evt:MouseEvent):void
{
gotoAndPlay("AdvMgtTools");
_playAllMode = false;
selectedVideo(evt,3);
}
function play3(evt:MouseEvent):void
{
gotoAndPlay("EmplRecords");
_playAllMode = false;
selectedVideo(evt,4);
}
function play4(evt:MouseEvent):void
{
gotoAndPlay("Recruiting");
_playAllMode = false;
selectedVideo(evt,5);
}
function play5(evt:MouseEvent):void
{
rewindAndPause(_currentVideo);
_playAllMode = false;
gotoAndPlay("MainMenu");
}
function gotoViewAll(evt:MouseEvent):void
{
//rewindAndPause(_currentVideo);
//gotoAndPlay("PlayAll","ViewAll");
_playAllMode = true;
gotoAndPlay("Regulatory");
selectedVideo(evt,1);
}
// Button Setups - MENU BAR
btn1.addEventListener(MouseEvent.CLICK, play0);
btn2.addEventListener(MouseEvent.CLICK, play1);
btn3.addEventListener(MouseEvent.CLICK, play2);
btn4.addEventListener(MouseEvent.CLICK, play3);
btn5.addEventListener(MouseEvent.CLICK, play4);
btn6.addEventListener(MouseEvent.CLICK, play5);
btn_viewall.addEventListener(MouseEvent.CLICK, gotoViewAll);

// Trial Button Link
btn_trial.addEventListener(MouseEvent.MOUSE_DOWN, trialButtonHandler);
function trialButtonHandler(event:MouseEvent):void
{
navigateToURL(new URLRequest("https://www.prospera.com/signup/trialsignup.aspx?ActCode=00101817"),"_blank");
}
// Contact Button Link
btn_contact.addEventListener(MouseEvent.MOUSE_DOWN, contactButtonHandler);
function contactButtonHandler(event:MouseEvent):void
{
navigateToURL(new URLRequest("http://www.prospera.com/"), "_blank");
}
// Big SignUp Trial Button
btn_signup.addEventListener(MouseEvent.MOUSE_DOWN, signupButtonHandler);
function signupButtonHandler(event:MouseEvent):void
{
navigateToURL(new URLRequest("https://www.prospera.com/signup/trialsignup.aspx?ActCode=00101817"),"_blank");
}
// Pricing Button Link
btn_pricing.addEventListener(MouseEvent.MOUSE_DOWN, pricingButtonHandler);
function pricingButtonHandler(event:MouseEvent):void
{
// NEED REAL LINK
navigateToURL(new URLRequest("https://www.Prospera.com/HelpOutside/info.aspx?view=1"),"_blank");
}
// Logo Click Button
btn_logoClick.addEventListener(MouseEvent.MOUSE_DOWN, logoButtonHandler);
function logoButtonHandler(event:MouseEvent):void
{
navigateToURL(new URLRequest("http://www.jjkeller.com/"),"_blank");
}
//---- LoaderMax Video Controls -------------------------------------------------------------
function showVideo(video:VideoLoader):void
{
//if the new video is the one that's currently showing, do nothing.
if (video == _currentVideo)
{
return;
}
//The first time through, the _currentVideo will be null. That's when we need to activate the user interface
if (_currentVideo == null)
{
// NOT USING
activateUI();//don't activate the UI until the first video is ready. This avoids errors when _currentVideo is null.
}
else
{
//remove the event listeners from the _currentVideo (which is now the old one that will be replaced)
_currentVideo.removeEventListener(LoaderEvent.PROGRESS, updateDownloadProgress);
if (_videos.indexOf(_currentVideo) == 0) {
_currentVideo.addEventListener(VideoLoader.VIDEO_COMPLETE, gotoMainMenu);
} else {
if (_playAllMode == false) {
_currentVideo.removeEventListener(VideoLoader.VIDEO_COMPLETE, gotoClosing);
} else {
_currentVideo.removeEventListener(VideoLoader.VIDEO_COMPLETE, nextVideo);
}
}

_currentVideo.removeEventListener(VideoLoader.VIDEO_BUFFER_FULL, bufferFullHandler);
//If the video is paused, we should togglePlayPause() so that the new video plays and the interface matches.;
if (_currentVideo.videoPaused)
{
togglePlayPause();
}
//fade out the preloader and then stop() it. If the new video needs to display the preloader, that's okay because the fade-in tween we create later will overwrite this one.
TweenMax.to(preloader_mc, 0.3, {autoAlpha:0, onComplete:preloader_mc.stop});
//fade the current (old) video's alpha out. Remember the VideoLoader's "content" refers to the ContentDisplay Sprite we see on the screen.;
TweenMax.to(_currentVideo.content, 0.8, {autoAlpha:0});
//fade the current (old) video's volume down to zero and then pause and rewind the video (it will be invisible by that time).;
TweenMax.to(_currentVideo, 0.8, {volume:0, onComplete:rewindAndPause, onCompleteParams:[_currentVideo]});
}
//now swap the _currentLoader variable so it refers to the new video.
_currentVideo = video;
//listen for PROGRESS events so that we can update the loadingBar_mc's scaleX accordingly
_currentVideo.addEventListener(LoaderEvent.PROGRESS, updateDownloadProgress);
//listen for a VIDEO_COMPLETE event so that we can automatically advance to the next video.;
//##########################################################################################
if (_videos.indexOf(_currentVideo) == 0) {
_currentVideo.addEventListener(VideoLoader.VIDEO_COMPLETE, gotoMainMenu);
} else {

if (_playAllMode == false) {
_currentVideo.addEventListener(VideoLoader.VIDEO_COMPLETE, gotoClosing);
} else {
_currentVideo.addEventListener(VideoLoader.VIDEO_COMPLETE, nextVideo);
}
}
//##########################################################################################
//if the video hasn't fully loaded yet and is still buffering, show the preloader;
if (_currentVideo.progress < 1 && _currentVideo.bufferProgress < 1)
{
//when the buffer fills, we'll fade out the preloader
_currentVideo.addEventListener(VideoLoader.VIDEO_BUFFER_FULL, bufferFullHandler);
//prioritizing the video ensures that it moves to the top of the LoaderMax gueue and any other loaders that were loading are canceled to maximize bandwidth available for the new video.;
_currentVideo.prioritize(true);
//play() the preloader and fade its alpha up.;
preloader_mc.play();
TweenMax.to(preloader_mc, 0.3, {autoAlpha:1});
}
//start playing the video from its beginning
_currentVideo.gotoVideoTime(0, true);
//always start with the volume at 0, and fade it up to 1 if necessary.;
_currentVideo.volume = 0;
if (! _silentMode)
{
TweenMax.to(_currentVideo, 0.8, {volume:1});
}
//when we addChild() the VideoLoader's content, it makes it rise to the top of the stacking order
videoContainerInset_mc.addChild(_currentVideo.content);
//fade the VideoLoader's content alpha in. Remember, the "content" refers to the ContentDisplay Sprite that we see on the stage.;
TweenMax.to(_currentVideo.content, 0.8, {autoAlpha:1});
//update the progressBar_mc and loadingBar_mc;
updateDownloadProgress();
}
function bufferFullHandler(event:LoaderEvent):void
{
TweenMax.to(preloader_mc, 0.3, {autoAlpha:0, onComplete:preloader_mc.stop});
}
function rewindAndPause(video:VideoLoader):void
{
video.pauseVideo();
//rewind the video so that when we fade it in again later, it's already displaying the first frame and there's no delay skipping to it. ;
video.gotoVideoTime(0);
}
function rewindAndHide(video:VideoLoader):void
{
video.pauseVideo();
TweenMax.to(_currentVideo.content, 0.8, {autoAlpha:0});
//rewind the video so that when we fade it in again later, it's already displaying the first frame and there's no delay skipping to it. ;
video.gotoVideoTime(0);
}
function nextVideo(event:Event):void
{
var next1:int = _videos.indexOf(_currentVideo) + 1;
if (next1 >= _videos.length)
{
next1 = 1;
rewindAndPause(_currentVideo);
gotoAndPlay("MainMenu");
} else {
if (next1 <= 6) {
showVideo(_videos[next1]);
} else {
return;
}
}
}
function gotoClosing(event:Event):void
{
gotoAndPlay("Closing");
showVideo(_videos[6]);
}
function gotoMainMenu(event:Event):void
{
//rewindAndHide(_currentVideo);
_playAllMode = false;
gotoAndPlay("MainMenu");
}
function previousVideo(event:Event):void
{
var prev:int = _videos.indexOf(_currentVideo) - 1;
if (prev < 1)
{
prev = _videos.length - 1;
}
showVideo(_videos[prev]);
}
function selectedVideo(event:Event,whichVid:Number):void
{
showVideo(_videos[whichVid]);
}
//---- PROGRESS AND LOADING BAR FUNCTIONS -------------------------------------------------------------
function updateDownloadProgress(event:LoaderEvent=null):void
{
//loadingBar_mc.scaleX = _currentVideo.progress;
//trace("progress: " + event.target.progress);
//loadingBar_mc.scaleX = event.target.progress;
//var currentProgress:Number = (int(event.target.progress * 100 ));
//txt_progress.text = currentProgress.toString();
}
//---- TOGGLE FUNCTIONS -------------------------------------------------------------------------------
function togglePlayPause(event:MouseEvent=null):void
{
_currentVideo.videoPaused = ! _currentVideo.videoPaused;
if (_currentVideo.videoPaused)
{
//TweenMax.to(btn_play, 0.3, {autoAlpha:1});
btn_play.gotoAndStop("paused");
TweenMax.to(videoContainerInset_mc, 0.3, {blurFilter:{blurX:6, blurY:6}, colorMatrixFilter:{brightness:0.5}});
}
else
{
//TweenMax.to(btn_play, 0.3, {autoAlpha:0});
btn_play.gotoAndStop("playing");
TweenMax.to(videoContainerInset_mc, 0.3, {blurFilter:{blurX:0, blurY:0, remove:true}, colorMatrixFilter:{brightness:1, remove:true}});
}
}
//---- UTILITY FUNCTIONS -------------------------------------------------------------------------------------
function addListeners(objects:Array, type:String, func:Function):void
{
var i:int = objects.length;
while (i--)
{
objects[i].addEventListener(type, func);
}
}
function force2Digits(value:Number):String
{
return (value < 10) ? "0" + String(value) : String(value);
}

 

Kindest Regards,

Monica

[Carl]

Hi,

 

The problem is how you are using the XMLLoader's onComplete callback.

 

From the docs:

The XMLLoader's progress will automatically factor in the dynamically-created loaders that have the load="true" attribute and it won't dispatch its COMPLETE event until those loaders have completed as well.

 

http://api.greensock.../XMLLoader.html (please read first 2 paragraphs)

 

Basically, by giving your LoaderMax a load="true" attribute, you are telling the XMLLoader that its COMPLETE event shouldn't fire until AFTER all the videos are loaded.

 

Your function called XMLHandler isn't firing until after all the videos are loaded, and that's the function that calls: showVideo(_videos[0])

 

Also your first video has autoPlay=true (which is fine) but the problem is that it is autoPlaying BEFORE showVideo(_videos[0]) is called which is why you can't see it.

 

Once you read over the first 2 paragraphs of the docs, you'll see that the XMLLoader's INIT event will let you target your VideoLoaders as soon as the XML is loaded, parsed AND the VideoLoaders are created.

 

I'm pretty sure you can get this to work the right way by just changing

 

var xmlLoader:XMLLoader = new XMLLoader("videos.xml",{name:"videoList",onComplete:xmlHandler});

 

to use onInit

 

var xmlLoader:XMLLoader = new XMLLoader("videos.xml",{name:"videoList",onInit:xmlHandler});

 

Also, in your xmlHandler function you probably don't need queue.load(); because you already have load="true" assigned to the LoaderMax in the xml file.

 

Let us know if that works for you or if you need any more help.

[digitaldesignsvc]

Dear Carl,

 

I changed the autoplay from true to false on the first video, changed the load=true to false and updated the Loader handler to onInit. Works great!!!

 

THANK YOU so much!

Reading the documents helped me to understand what some of those parameters were doing.

 

I appreciate the help immensely!

Cheers,

Monica

[Carl]

You're very welcome. Happy to hear things are working.