flash/AS3 netstream loading/buffering very slow, what am I missing? - actionscript-3

My custom movieplayer uses the following code for playing video. It takes a really long time for the clip to start playing, but once it does, you can skip directly to the end.
I have a feeling that there is some knowledge I'm missing in how buffers and preload works. Could somebody send me in the right direcion?
private function init(e:Event = null):void {
connection = new NetConnection();
connection.addEventListener(NetStatusEvent.NET_STATUS, doNetStatus);
connection.addEventListener(IOErrorEvent.IO_ERROR, doIOError);
connection.addEventListener(SecurityErrorEvent.SECURITY_ERROR, doSecurityError);
connection.connect(null);
stream = new NetStream(connection);
stream.addEventListener(AsyncErrorEvent.ASYNC_ERROR, doAsyncError);
stream.addEventListener(NetStatusEvent.NET_STATUS, doNetStatus);
stream.addEventListener(IOErrorEvent.IO_ERROR, doIOError);
stream.client = this;
video = new Video(1024, 576);
mc = new MovieClip();
mc.addChild(video);
stage.addChild(mc);
mc.addEventListener(MouseEvent.CLICK, onClick);
video.attachNetStream(stream);
stream.bufferTime = 5;
stream.receiveAudio(true);
stream.receiveVideo(true);
stream.play(SITEURL + vidID +".mp4");
}
You can see the player in action here: http://joon.be/serve/ngjd_player.swf

Apparently the video's weren't streaming because I needed to run QT FastStart on them.
This solved the problem, netstream is now running as expected.

You can download qt-faststart.exe and then in admin command promt run:
qt-faststart.exe "source.mp4" "fixed.mp4"
Took about 15-30 seconds for 10 minutes long video.
Credit: https://articulate.com/support/article/mp4-movie-doesnt-begin-playing-until-it-has-fully-downloaded
I also tried this free opensource converter HandBrake with Web Optimized checked. (took all 10 minutes to convert)

Related

How to pause and restart a NetStream object?

I have a NetStream object, based upon the following code:
streamID = "mystreamkey";
videoURL = "rtmp://mystreamurl";
vid = new Video();
nc = new NetConnection();
nc.addEventListener(NetStatusEvent.NET_STATUS, onConnectionStatus);
nc.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
nc.client = { onBWDone: function():void{}, streamConnected: streamConnected, streamDisconnected: streamDisconnected };
nc.connect(videoURL);
...
metaListener = new Object();
metaListener.onMetaData = received_Meta;
netStreamObj.client = metaListener;
netStreamObj.play(streamID);
vid.attachNetStream(netStreamObj);
addChild(vid);
All this is working fine, and I can also use netStreamObj.pause() to pause the live stream.
But how do I restart it? netStreamObj.play() won't work - it requires one parameter, so then I wrote this:
netStreamObj.play(streamID);
vid.attachNetStream(netStreamObj);
But this isn't working either.
How do I restart the stream, so that it connects to the live stream it was previously connected to?
How do I restart the stream, so that it connects to the live stream it
was previously connected to?
For future reference, check the NetStream API documentation for options. You'll be looking to check out the commands listed under the Public methods section.
You can use either :
resume(): Resumes playback of a video stream that is paused.
usage : netStreamObj.resume();
togglePause(): Pauses or resumes playback of a stream.
usage : netStreamObj.togglePause();
I suggest using togglePausesince it auto-detects the playback state of the NetStream object. Your "Pause" button (or MovieClip) should simply have a click listener event whose function has this line : netStreamObj.togglePause();. It's that easy...

Flash AS3 load videos while another is playing

my flash site needs to play let's say 10 videos one after each other, to reduce waiting time I need to preload video 2 and video 3 while video 1 is playing and so on...
I need to follow this structure because at the end of video 1 users will have the chance to choose which will be the next (2 or 3).
All the code is on the first frame of my movie, I still have to learn classes, packages etc.
The first video is played through a linked video (myVideo) that I placed on the stage with the following code:
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
ns.addEventListener(NetStatusEvent.NET_STATUS, statusHandler);
ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
ns.play("video1.f4v");
var myVideo:Video = new Video();
myVideo.attachNetStream(ns);
addChild(myVideo);
I need to understand the best way to preload the other two videos while nr. 1 is playing.
Shall I create 2 more linked videos, place them out of the stage and load videos there so they will be immediately available when needed?
Thanks very much for your help!
--- EDIT: Added more details to my post ---
I'm doing some test to understand this procedure, I've tried the following:
var ns2:NetStream = new NetStream(nc);
var ns3:NetStream = new NetStream(nc);
ns2.play("video/video2.f4v");
ns2.pause();
ns2.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
ns3.play("video/video3.f4v");
ns3.pause();
ns3.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
it works, but loading 2 movies in this way will result in 100% cpu usage and poor frame rate of video playing... maybe I have to load video 2, check for loading complete and then start loading video 3... is this the proper way to do that?
Thanks again
I believe I found the way, here is the full script:
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
ns.addEventListener(NetStatusEvent.NET_STATUS, statusHandler);
ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
ns.play("video1.f4v");
var myVideo:Video = new Video();
myVideo.attachNetStream(ns);
addChild(myVideo);
var ns2:NetStream = new NetStream(nc);
var ns3:NetStream = new NetStream(nc);
function statusHandler(event:NetStatusEvent):void
{
switch (event.info.code)
{
case "NetStream.Play.Start" :
ns2.play("video/video2.f4v");
ns2.pause();
ns2.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
ns3.play("video/video3.f4v");
ns3.pause();
ns3.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
break;
case "NetStream.Play.Stop" :
trace("ns video stop");
break;
}
}
when I call ns.play("video2.f4v"); the video is already in the browser cache so immediately starts playing and Cpu usage looks good too.
If there is a more professional way I'd like to learn more.
trace("thanks, see you soon");
The easiest way of achieving this would be using Greensock's LoaderMax. You can set up the list of videos you want to load and then prioritise some of them depending of user's actions.
LoaderMax has some great functionality which would be quite hard to build from scratch, it also fixes some weird Flashplayer behaviour.
There is a little bit of learning curve but it is not too steep.

How to cache audio stream data and access it in AS3

I'm streaming an MP3 file in AS3. All is working fine (I can play it) but I'm looking to implement a 'seek' bar. This means I will need to cache the file (as it's being downloaded) and then access the cached data when the user seeks a specific time in the song.
The code to actually play the mp3 stream:
function openStream( stream )
{
var s:Sound = new Sound();
var req:URLRequest = new URLRequest(stream);
var context:SoundLoaderContext = new SoundLoaderContext(500, true);
s.load(req, context);
s.play();
}
So how would I cache the file as it's being downloaded and then access the data from the cache?
I know this is pretty far from a trivial task, so I would be grateful if you could even just provide a few links to some tutorials/docs/articles.
You do not need to cache the sound for this.
The downloaded sound data is is available as long as the sound object lives in memory.
So all you need to do is take the sound object outside the function into the class scope..
Also the play function returns the current SoundChannel used by the Sound.
private var snd:Sound = new Sound();
private var channel:SoundChannel;
function openStream( stream ) {
...
channel = snd.play();
}
To implement the seek functionality you may make use of,
bytesLoaded (To know how much of the sound is downloaded)
soundChannel.position (To know current sound position)

How do you loop a sound in flash AS3 when it ends?

What AS3 code is used to loop a sound using AS3?
This won't give you perfect, gapless playback but it will cause the sound to loop.
var sound:Sound = new Sound();
var soundChannel:SoundChannel;
sound.addEventListener(Event.COMPLETE, onSoundLoadComplete);
sound.load("yourmp3.mp3");
// we wait until the sound finishes loading and then play it, storing the
// soundchannel so that we can hear when it "completes".
function onSoundLoadComplete(e:Event):void{
sound.removeEventListener(Event.COMPLETE, onSoundLoadComplete);
soundChannel = sound.play();
soundChannel.addEventListener(Event.SOUND_COMPLETE, onSoundChannelSoundComplete);
}
// this is called when the sound channel completes.
function onSoundChannelSoundComplete(e:Event):void{
e.currentTarget.removeEventListener(Event.SOUND_COMPLETE, onSoundChannelSoundComplete);
soundChannel = sound.play();
}
If you want the sound to loop many times with a flawless, gapless playback, you can call
sound.play(0, 9999); // 9999 means to loop 9999 times
But you still would need to set up a soundcomplete listener if you want infinite playback after the 9999th play. The problem with this way of doing things is if you have to pause/restart the sound. This will create a soundChannel whose duration is 9999 times longer than the actual sound file's duration, and calling play(duration) when duration is longer than the sound's length causes a horrible crash.
var sound:Sound = whateverSoundYouNeedToPlay;
function playSound():void
{
var channel:SoundChannel = sound.play();
channel.addEventListener(Event.SOUND_COMPLETE, onComplete);
}
function onComplete(event:Event):void
{
SoundChannel(event.target).removeEventListener(event.type, onComplete);
playSound();
}
import flash.media.Sound;
import flash.media.SoundChannel;
var mySound:Sound = new Bgm(); //Bgm() is the class of the internal sound which can be done in the library panel.
playSound();
function playSound():void
{
var channel:SoundChannel = mySound.play();
channel.addEventListener(Event.SOUND_COMPLETE, onComplete);
}
function onComplete(event:Event):void
{
SoundChannel(event.target).removeEventListener(event.type, onComplete);
playSound();
}
This works perfectly.
To expand on #scriptocalypse's gapless playback a bit:
The problem of not having proper gapless playback comes from mp3 including information about the file in either the head or the tail of the file (id3 tags etc), hence the small pause when you try to loop it. There are a few things you can do depending on your situation.
Ignore it, just play as normal, with a small pause at the end of every file. You can also try and mask it with another sound (a beat drop yo), or fade out and fade in.
If your sounds are embedded, and not streaming, then create a fla file, drag your mp3 in there, and set them to export (the same way you'd add a linkage name for a MovieClip etc). It seems that when you export sounds like this, Flash takes the delay into account, or strips it out when it creates the Sound object. Either way, you can just do a simple play() passing the loops that you want for a gapless playback (I've found using a loops parameter is better than waiting on the SOUND_COMPLETE event and playing it again).
You can try some of the ogg libraries to use .ogg files instead of .mp3. A simple google search for "as3 ogg lib" will turn up what you need. Personally, I found them a bit awkward to use, and I couldn't afford the overhead added (as opposed to mp3 decoding, which is done in the player).
If your mp3 files are streaming, then the only way to get gapless playback is to layer them. Determine the gap (depending on what you used to encode them, it'll be different - my files has a gap of about 330ms), and when you reach it, start playing the overlay. It's a proper pain if you're doing fading, but when it works, it works quite nicely. Worst case scenario, you end up with situation (1)
I guess this what you looking for in case the voice/music file is in the library:
var mysound:my_sound = new my_sound();
mysound.play(0,2); // this will repeat the sound 2 times.
This appears to have worked for me:
var nowTime:Number = (new Date()).time;
var timeElapsed:Number = nowTime - _lastTime;
_lastTime = nowTime;
_musicTimeElapsed+=timeElapsed;
if(_musicTimeElapsed >= _musicA.length - GAP_LENGTH)
{
_musicTimeElapsed = 0;
_musicA.play(0);
}
The other answers are great, however if you do not want to use code (for whatever reason), you can put the sound in a movieclip, set the sound property to "Stream", and then add as many frames as you like to the movie clip to ensure it plays fully.
This, of course, is a less preferred way, but for animators I'm sure it may be preferable in some situations (for example when synced with mouth animations that the animator wants looped).
this work for me :
import flash.media.Sound;
import flash.media.SoundChannel;
var soundUrl:String ="music.mp3";
var soundChannel:SoundChannel = new SoundChannel();
var sound:Sound = new Sound();
sound.load(new URLRequest(soundUrl));
soundChannel = sound.play();
soundChannel.addEventListener(Event.SOUND_COMPLETE,onComplete);
function onComplete(e:Event):void{
sound = new Sound();
sound.load(new URLRequest(soundUrl));
soundChannel = sound.play();
soundChannel.addEventListener(Event.SOUND_COMPLETE,onComplete);
}

if I load a flv with netStream, how can I call a function when the flv stops playing

I have a website in ActionScript 3 that has lots of FLV animations that happen when you press buttons. Right now this is how I have it set up.
in AS3,
im loading FLv's (which are animations I exported in FLV form from After Effects)
with net stream. I have a timer set up for the same amount of length of time that the animations (FLV's) play and when the timer stops it calls a function that closes the stream, opens a new one and plays another video. The only problem I noticed using timers is that if the connection is slow and (animation)stops for a second, the timer keeps going, and calls the next flv too early.
Does anyone know a way to load a flv, or swf for that matter, at the end of play of the flv? so that the next FLV will always play at the end of the run time of the previous FLV, rather than using timers?
im thinking onComplete but I don't know how to implement that!?
Sequential playing is pretty easy to achieve with the OSMF framework, you should check it out. Google "osmf tutorials" and you should find a few tutorials online.
The framework is fairly recent, but it looks like it may become the de facto solution for media delivery in Flash as it's not limited to video but also audio & images.
As a developer you won't have to bother with the NetStream & NetConnection classes. Developing video solutions , as well as audio & images solutions should be streamlined and easier to handle. Only limitation is that it requires Flash 10
Here's some code for checking when a FLV ends with NetStream. I just provide snippets as I assume you got the FLV up and running already.
//create a netstream and pass in your connection
var netStream:NetStream = new NetStream(conn);
//add callback function for PlayStatus -event
var client : Object = {};
client.onPlayStatus = onPlayStatus;
netStream.client = client;
//attach your NetStream to the connection as usual
//---
//function that gets called onPlayStatus
function onPlayStatus(info : Object) : void {
trace("onPlayStatus:" +info.code + " " + info.duration);
if (info.code == "NetStream.Play.Complete") {
//play the next FLV and so on
}
}
EDIT: With your example code it will look something like this.
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
var listener:Object = new Object();
listener.onMetaData = function(md:Object):void{};
listener.onPlayStatus = function(info : Object) : void {
trace("onPlayStatus:" +info.code + " " + info.duration);
if (info.code == "NetStream.Play.Complete") {
//play the next FLV and so on
}
};
ns.client = listener;
vid1.attachNetStream(ns);
const moviename1:String = "moviename2.flv";
const moviename1:String = "moviename3.flv";
var movietoplay:String = "moviename.flv";
ns.play(movietoplay);