Jump to content
Search Community

VideoLoader init trouble

failure13 test
Moderator Tag

Recommended Posts

Strange thing, locally - everything is ok, but when i upload to server, first time i load video - i hear only sound for few seconds, and then video start, and sound starts over from 0 with it...

Probably this is some kind of buffering trouble (i'm not really familiar with that), can someone please shread a light? :)

 

Here's loader and some of the relevant functions from my code:

var video:VideoLoader = new VideoLoader(VIDpath, {
   name: "video",
   autoPlay: false,
   container: this,
   alpha: 0,
   bgColor: backgroundsColor,
   bgAlpha: bgAlphaVideo,
   width: vW,
   height: vH,
   centerRegistration: true,
   scaleMode: "proportionalInside",
   onComplete: initVideo,
   onError: errorCatch,
   onProgress: updateDownloadProgress
});

// set up video
function initVideo(e:LoaderEvent):void {
   // listener for video complete
   video.addEventListener(VideoLoader.VIDEO_COMPLETE, stopVideoPlayer);
   // progress listener
   video.addEventListener(VideoLoader.PLAY_PROGRESS, updatePlayProgress);
   // set time to begin from 00:00
   video.gotoVideoTime(0, false);
   // get duration
   videoDurationTime();
   // check if mute activated
   if (videoControls.volumeFill.scaleX == 0) {
       // reset volume
       video.volume = 0;
   }
   else {
       // set volume
       video.volume = volumeValue;
   }
   // appear video & time display
   TweenMax.to([video.content, video.rawContent, videoControls.lblTimeDuration], 0.7,{alpha: 1});
}

function playClicked(e:MouseEvent = null):void {
   if (!firstPlay) {
       // set first play flag
       firstPlay = true;
       // load video
       video.load();
   }
   if (video.playProgress == 0) {
       // add controls hide listeners
       controlsHideListeners();
       // hide controls after a while
       controlsRollOver();
       // disappear logo & play sign
       TweenMax.to([logo.cleverLine, logo.playSign], logoSwitchTime + 0.5,{alpha: 0, delay: logoSwitchDelay, overwrite: "all"});
   }
   // set video playing flag
   videoPlaying = true;
   // play video
   video.playVideo();
   // switch play / pause visibility
   videoControls.btnPause.visible = true;
   videoControls.btnPlay.visible = false;
}

Link to comment
Share on other sites

Haven't heard about sound playing before video. It seems like perhaps autoPlay:false is being ignored possibly. Like maybe the video is running before the onComplete callback runs, thus you'd hear it before you see it. I would remove the alpha settings so that I could see whether or not video is playing or not before the onComplete runs.

 

What type of video are you using? How big is it? Can you post some files that we can test?

 

thanks

Link to comment
Share on other sites

It's pretty hard to replicate, since it's only on server, and sometimes it doesn't happen at all...And if it happens - only once, after browser restart, but when you refresh page then everything is as usual. I use .mp4 15 second long video..

 

I think i found error, i was using this in my error function.

The purpose of error function is:

1. If it used inside flash, firstly try original url string

2. If original url gives error AND if video player wasn't loaded from html. which have parameter GetVideoURL - than throw an error message, and turn player 'off'

3. If foriginal url gives an error AND video player was loaded from html...etc - than try video.url = videoURL; and load / play video again.

4. If it videoURL is not valid also - throw an error and turn "off" player.

 

Here's how i was doing it before, i was creating a loop with playError, but probably it wasn't stable and fast enough:

function errorCatch(e:LoaderEvent):void {
// try to switch url for html videoURL parameter
if (!playError && loaderParams.hasOwnProperty("GetVideoURL")) {
	// reset first play flag
  	 var playError:Boolean = true;
	// reload video
	video.url = videoURL;
	video.load();
	video.playVideo();
}
else {
	// remove listeners
	stage.removeEventListener(KeyboardEvent.KEY_DOWN, keyClick);
	video.content.removeEventListener(MouseEvent.CLICK, playPauseSwitch);
	videoControls.btnStop.removeEventListener(MouseEvent.CLICK, stopClicked);
	videoControls.btnPlay.removeEventListener(MouseEvent.CLICK, playClicked);
	videoControls.btnPause.removeEventListener(MouseEvent.CLICK, pauseClicked);
	// show display and write error message
	TweenMax.to([logo.playSign, logo.pauseSign], 0.7,{alpha: 0, overwrite: true});
	TweenMax.to([videoControls.lblTimeDuration, logo.cleverLine], 0.7,{alpha: 1, overwrite: true});
	videoControls.lblTimeDuration.text = "  URL ERROR";
}
}

 

Now i do the whole thing like this, check error catch function.

It seem to be impossible now to get such a result of double play, right?

// video first play flag
var firstPlay:Boolean = false;


var video:VideoLoader = new VideoLoader(VIDpath, {
name: "video",
autoPlay: false,
container: this,
alpha: 0,
bgColor: backgroundsColor,
bgAlpha: bgAlphaVideo,
width: vW,
height: vH,
centerRegistration: true,
scaleMode: "proportionalInside",
onComplete: initVideo,
onError: errorCatch,
onProgress: updateDownloadProgress
});

// set up video
function initVideo(e:LoaderEvent):void {
// listener for video complete
video.addEventListener(VideoLoader.VIDEO_COMPLETE, stopVideoPlayer);
// progress listener
video.addEventListener(VideoLoader.PLAY_PROGRESS, updatePlayProgress);
// set time to begin from 00:00
video.gotoVideoTime(0, false);
// get duration
videoDurationTime();
// check if mute activated
if (videoControls.volumeFill.scaleX == 0) {
	// reset volume
	video.volume = 0;
}
else {
	// set volume
	video.volume = volumeValue;
}
// appear video & time display
TweenMax.to([video.content, video.rawContent, videoControls.lblTimeDuration], 0.7,{alpha: 1});
}

function playClicked(e:MouseEvent = null):void {
if (!firstPlay) {
	// set first play flag
	firstPlay = true;
	// load video
	video.load();
}
if (video.playProgress == 0) {
	// add controls hide listeners
	controlsHideListeners();
	// hide controls after a while
	controlsRollOver();
	// disappear logo & play sign
	TweenMax.to([logo.cleverLine, logo.playSign], logoSwitchTime + 0.5,{alpha: 0, delay: logoSwitchDelay, overwrite: "all"});
}
// set video playing flag
videoPlaying = true;
// play video
video.playVideo();
// switch play / pause visibility
videoControls.btnPause.visible = true;
videoControls.btnPlay.visible = false;
}

function errorCatch(e:LoaderEvent):void {
// try to switch url for html videoURL parameter
if (firstPlay && loaderParams.hasOwnProperty("GetVideoURL")) {
	// reset first play flag
	firstPlay = false;
	// reload video
	video.url = videoURL;
	video.load();
	video.playVideo();
}
else {
	// remove listeners
	stage.removeEventListener(KeyboardEvent.KEY_DOWN, keyClick);
	video.content.removeEventListener(MouseEvent.CLICK, playPauseSwitch);
	videoControls.btnStop.removeEventListener(MouseEvent.CLICK, stopClicked);
	videoControls.btnPlay.removeEventListener(MouseEvent.CLICK, playClicked);
	videoControls.btnPause.removeEventListener(MouseEvent.CLICK, pauseClicked);
	// show display and write error message
	TweenMax.to([logo.playSign, logo.pauseSign], 0.7,{alpha: 0, overwrite: true});
	TweenMax.to([videoControls.lblTimeDuration, logo.cleverLine], 0.7,{alpha: 1, overwrite: true});
	videoControls.lblTimeDuration.text = "  URL ERROR";
}
}

 

Since i started to use such code, i wasn't able to replicate such behaviour yet, so i suppose that was the thing...

Link to comment
Share on other sites

Hi,

 

You're logic for testing whether or not a url exists or is valid appears to be fairly sound. I haven't tested various scenarios though to see if it works though.

 

What are the circumstances under which the behavior of "sound playing before video appears" occur? Is it only when there is a problem with the url from the html page?

 

Does it ever happen when a valid url is available from the loaderinfo params?

 

If this issue can be replicated with a valid url it will be much easier to try to narrow down the issue. I'm afraid we don't have a ton of time to test various scenarios that would trigger unique error handling routines.

 

In other words, does the issue ever appear if you simply hardcode a valid url into your VideoLoader constructor? If so, we would be very interested in fixing that.

 

Also, are you using the latest LoaderMax files? Some changes have been made recently that account for new bugs that Adobe introduced in the latest version of Flash Player.

Link to comment
Share on other sites

In other words, does the issue ever appear if you simply hardcode a valid url into your VideoLoader constructor?

 

Sorry for not clearing it, yes it happens.

It doesn't actually tied with error catch i think, coz when there are no url in html, with my alst addition - it just throw an error..So you can just hardcode it and remove error like this:

// create video loader
var video:VideoLoader = new VideoLoader(videoURL, {
name: "video",
autoPlay: false,
container: this,
alpha: 0,
bgColor: backgroundsColor,
bgAlpha: bgAlphaVideo,
width: vW,
height: vH,
centerRegistration: true,
scaleMode: "proportionalInside",
onComplete: initVideo,
onProgress: updateDownloadProgress
});

 

Also, are you using the latest LoaderMax files? Some changes have been made recently that account for new bugs that Adobe introduced in the latest version of Flash Player.

Well, i have GSAP v12 (beta) for AS3, i guess i have downloaded it in August or September, was there any updates since that date, should i install new one?

 

P.S. My friend was able to replicate this issue using opera on medium speed conection (200-300 kb/s), only when he watched first time (that means video was unbuffered or something like that i guess?)

 

I for myself cannot replicate it since i have updated my code in previous message, still cannot see this effect...Trying to reboot browser, using different browser, clear cookies and cache - still no luck :\ I'm puzzled...

 

P.P.S. Two friends of mine have just replicated this issue, one on Internet Explorer, other on Chromium in Ubuntu...And for both of them it was only on first loading...Then it must be cache i believe? If so - how to eliminate this issue?

Probably no auto play gets ignored...i don't know :(

Link to comment
Share on other sites

I was able to replicate the issue with your files on my server.

I would hear 1-2 seconds of audio, then video would appear and I would hear the same audio again.

 

So it appears that the video starts playing with no visuals and only audio and then restarts again with visuals and audio.

 

I was able to see this in Firefox on initial load, on reload of page it worked fine. Clear cache and try again, the issue occurs again.

 

---

 

I also created a very simple file with your video and the latest LoaderMax files (from 9/5/2012)

That only has this code:

 

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.*;
import com.greensock.loading.display.*;
import flash.display.Sprite;

var container:Sprite = new Sprite();
addChild(container);
var video:VideoLoader = new VideoLoader("videos/vid.mp4", {container:container, alpha:0, autoPlay:false, onComplete:playVideo});


function playVideo(e:LoaderEvent):void{
trace("done");
TweenLite.to(e.target.content, .4, {alpha:1});
video.playVideo(); // or video.gotoVideoTime(0) // both work
}

video.load(); 

 

The video fades in when its ready and starts playing, no trouble. This proves that a) LoaderMax is working as expected and B) there is nothing inherently wrong with the encoding of your video.

 

----

 

Also in your files I removed your onError routine and also hardcoded the video path into the VideoLoader constructor (no params coming from html, no chance of wrong url or broken path).

I still got the errors you described on initial load from server.

 

My only guess is that there is something else in your code that is causing this "double-play effect". I have a good idea what it it is.

 

you have your onComplete:initVideo handler on the VideoLoader configured to play the video, fade it up and adjust the volume like so:

 

 

function initVideo(e:LoaderEvent):void {
// listener for video complete
video.addEventListener(VideoLoader.VIDEO_COMPLETE, stopVideoPlayer);
// progress listener
video.addEventListener(VideoLoader.PLAY_PROGRESS, updatePlayProgress);
// set time to begin from 00:00
video.gotoVideoTime(0, false);
// get duration
videoDurationTime();
// check if mute activated
if (videoControls.volumeFill.scaleX == 0) {
// reset volume
video.volume = 0;
}
else {
// set volume
video.volume = volumeValue;
}
// appear video & time display
TweenMax.to([video.content, video.rawContent, videoControls.lblTimeDuration], 0.7,{alpha: 1});
}

 

 

BUT your playClickHandler does the following:

 

 

function playClicked(e:MouseEvent = null):void {

if (!firstPlay) { // firstPlay is hardcoded to false so this always runs the first time you click play

// set first play flag

firstPlay = true;

// load video

video.load();

}

if (video.playProgress == 0) {

// add controls hide listeners

controlsHideListeners();

// hide controls after a while

controlsRollOver();

// disappear logo & play sign

TweenMax.to([logo.cleverLine, logo.playSign], logoSwitchTime + 0.5,{alpha: 0, delay: logoSwitchDelay, overwrite: "all"});

}

// set video playing flag

videoPlaying = true;

// play video

video.playVideo(); // HERE YOU ARE telling the video to PLAY. so autoPlay:false does nothing.

// your video starts playing immediately and then with videoInit runs, you play from the beginning again.

// switch play / pause visibility

videoControls.btnPause.visible = true;

videoControls.btnPlay.visible = false;

}

 

in essence as soon as you click a play button you tell the video to load and play immediately. Then when the video completes loading you are telling it to fade up and play from the beginning.

  • Like 2
Link to comment
Share on other sites

Wait, you mean that video.gotoVideoTime(0, false); doesn't only rewind to the desired video time, but also do play??

Than it definately make sense...I thought it's only about telling where you want the playhead to be.

 

How would i stop it then?

I have put this command in function initVideo only for the future, in case i will have more than 1 video, and then each next will start from 0..I can just delete it for now, but i suppose i should do this before video initialization stage (which is really stupid as i think of it now, but back than for some reason it was logical... :D).

Link to comment
Share on other sites

Yes, the "false" is the "forcePlay" parameter which is false by default, meaning that the playhead position will change and the current paused state will be maintained.

 

You would really only need to specify a forcePlay parameter if you want forcePlay to be true.

This is handy if your video is currently paused at say 5 seconds.

 

video.gotoVideoTime(0, true)

 

That code simply allows you to go to the beginning and automatically resume playback without additionally invoking video.playVideo();

 

if in the same situation you use

 

video.gotoVideoTime(0, false) //or just video.gotoVideoTime(0)

 

the playhead will jump to a time of 0 and the video will remain paused

 

I think you've got it now.

  • Like 1
Link to comment
Share on other sites

I still got trouble, please check new pm!

I have sent you new .fla to look on, now for test i've hardcoded the url from html, restricted whole error-catch code, removed any possible play calls, except autoPlay in loader itself, now loader looks like this:

// create video loader
var video:VideoLoader = new VideoLoader(videoURL, {
   name: "video",
   autoPlay: true,
   container: this,
   alpha: 0,
   bgColor: backgroundsColor,
   bgAlpha: bgAlphaVideo,
   width: vW,
   height: vH,
   centerRegistration: true,
   scaleMode: "proportionalInside",
   onComplete: initVideo,
   //onError: errorCatch,
   onProgress: updateDownloadProgress
});

 

But i still can reproduce issue, delete cache launch html page again, pressed play - sound starts, video don't, than when download progress indicator ends video & audio starts from scratch...

I don't get it :\

Seem that there is something weird going on when grabbing url from html...

Link to comment
Share on other sites

The reason the video starts again and fades in is because of your your onComplete:initVideo callback which contains:

 

 

// set time to begin from 00:00
video.gotoVideoTime(0);

 

when the video completes loading you are saying "go play from the beginning".

 

comment out video.gotoVideoTime(0) and you will hear that the video only plays once.

you will not be able to see it though until onComplete fires because initVideo() is also being used to fade the alpha to 1.

  • Like 1
Link to comment
Share on other sites

Sorry again, have bashed into the same wall...

Understood about video.gotoVideoTime(0);, it's just pointless at this stage coz it's final loading stage, when whole video loaded...

 

What i want is to Fade alpha slowly when video actually started to play (after it is buffered?), how would i do it?

 

Probably i can guess, that i should use onInit in such case?

 

P.S. Yes, it seem that in my mind onComplete for this case was actually onInit, so this way it works, when i switch it works totally as desired!

 

But i got another short question, have you noticed with my small video, that sometimes after you drag progress scrubber, and then release it - it starts to move in pretty shifted place, from where it should be, why drag progress doesn't totally equal to video progress in my case?

It only can be determined with really small video, with bigger it is ok...

I wonder if it is how flash works, or probably i have made some mistake in progress calculations?

Link to comment
Share on other sites

I think the scrubber jump has to do with the spacing of the keyframes in your shorter videos.

when you have a shorter video with a very wide progressbar there is more spacing in between each keyframe.

 

launch the swf.

play the video

pause the video.

scrub VERY slowly to the right

you will see that as the scrubber moves, the frames aren't updating.

scrub very slowly and as soon as the frame changes release.

now hit play,

the progress bar doesn't jump back.

 

this is because when you released you were right at a keyframe.

 

 

now pause again, scrub very slowly.

try to scrub and release the mouse right before you get to the next keyframe.

hit play,

you'll see the progress jump back to the previous keyframe.

 

here is a great explanation:

http://cookbooks.adobe.com/post_Enabling_accurate_seeking_in_video-18938.html

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...