Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

preload video with player.sendEvent('LOAD', url)

i tried to start (pre)loading a video right after the player is initialized - so that visitors with a slow internet connection are also able to watch the video smoothly when pressing PLAY.

on my site i would suggest that visitors would normally read some text before they would press the play-button (the video is below the fold...)

so i tried this:

--- code ---

<script type="text/javascript" src="http://www.jeroenwijering.com/embed/swfobject.js"></script>
<div id="player">This text will be replaced</div>
<script type="text/javascript">
var so = new SWFObject('/fileadmin/user_upload/videos/player.swf','myplayer','950','534','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('wmode','opaque');
so.addParam('flashvars','&file=http://www.mysite.com/fileadmin/user_upload/videos/kopfvideos/test.flv&controlbar=over&icons=true&displayclick=none&bufferlength=10');
so.write('player');

// initialize and preload
var player;
function playerReady(obj) {
player = document.getElementById(obj['id']);
};
player.sendEvent('LOAD','http://www.mysite.com/fileadmin/user_upload/videos/kopfvideos/test.flv');
</script>

--- /code---

unfortunatelly it does not work. if i press my PLAY-button, wich calls player.sendEvent('PLAY','true'); i can see that the video is not (pre)loaded yet...

what is my problem? can anybody help? thanks!

21 Community Answers

Up Down

JW Player

User  
0 rated :

You need to add a Model Listener TIME, start playing the media file, then as soon as the position is greater than zero (indicating that the video has started), PAUSE the player and let it buffer.
bc.. autostart=true




*_UNTESTED_*butshouldbeclose.bc.. <scripttype="text/javascript">
varplayer=null;
varbufferFlag=true;


functionplayerReady(obj)
{
player=gid(obj.id);
addListeners();
};


functionaddListeners()
{
//Isupposethisshouldreallyshouldbecheckingthepropertytoseeifit'stype"object'
if(player.getPlaylist())
{
player.addModelListener('TIME','timeMonitor');
}
else
{
setTimeout("addListeners()",100);
}
};


functiontimeMonitor(obj)
{
if((obj.position>0)&&(bufferFlag))
{
player.sendEvent('PLAY','false');
bufferFlag=false;
};


functiongid(name)
{
returndocument.getElementById(name);
};
</script>



Up Down

JW Player

User  
0 rated :

it works great! :-) thank you! :-)

do you know why my attempt with this did not work?

--- quote ---
player.sendEvent('LOAD','http://www.mysite.com/fileadmin/user_upload/videos/kopfvideos/test.flv');
--- /quote ---

Up Down

JW Player

User  
0 rated :

To pre-buffer, you have to start playing the file, then pause the player.

Up Down

JW Player

User  
0 rated :

ok, thanks.

Up Down

JW Player

User  
0 rated :

In a previous post I asked about the possibility of having the buffer start onLoad. I was directed to this thread but I have been unable to get it to work after many attempts. I have included a url where you will find the code BUT you need to know in advance that I reset the "autostart" to false until I can figure out what is going wrong.

http://www.neildempster.com/wwd/videoaudio.htm

Thank you for any advice you may have on this issue.

Up Down

JW Player

User  
0 rated :

@Neil,

Get rid of your other player code and put all of this in the head element of your HTML document.

*_Change the filename to your video filename._*

bc.. <scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>

<scripttype="text/javascript">
varplayer=null;
varplaylist=null;
varbufferFlag=true;


functionplayerReady(obj)
{
player=gid(obj.id);
addListeners();
};


functionaddListeners()
{
playlist=player.getPlaylist();

if((playlist!==null)&&(playlist!==undefined))
{
player.addModelListener('TIME','timeMonitor');
}
else
{
setTimeout("addListeners()",100);
}
};


functiontimeMonitor(obj)
{
if((obj.position>0)&&(bufferFlag))
{
player.sendEvent('PLAY','false');
bufferFlag=false;
};


functiongid(name)
{
returndocument.getElementById(name);
};
</script>

<scripttype="text/javascript">
varflashvars=
{
file:'video.flv',
playlist:'bottom',
playlistsize:'200',
backcolor:'B4B187',
frontcolor:'531507',
lightcolor:'000000',
screencolor:'000000',
volume:'100',
abouttext:'AboutNeilDempster',
aboutlink:'http://www.neildempster.com/wwa/neildempster.htm',
id:'player1',
autostart:'false'
};

varparams=
{
allowfullscreen:'false',
allowscriptaccess:'always',
bgcolor:'#000000'
};

varattributes=
{
id:'player1',
name:'player1'
};

swfobject.embedSWF('http://www.neildempster.com/videoaudioclips/player.swf','placeholder1','470','590','9.0.124',false,flashvars,params,attributes);
</script>




Put this where you want the player to appear:bc.. <td width="470"><div id="playercontainer1" class="playercontainer"><a id="player1" class="player" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Adobe Flash Player to see this video.</a></div></td>



Up Down

JW Player

User  
0 rated :

Thank you LefTy! I appreciate the code. A couple of things:

1. I believe there is a close bracket missing in one of the functions. If I am wrong for some reason that is beyond my understanding, please let me know. I believe it should be:

function timeMonitor(obj)
{
if((obj.position > 0) && (bufferFlag))
{
player.sendEvent('PLAY', 'false');
bufferFlag = false;
}
};

2. You had the "file" variable filled with a .flv file. I replaced it with my .xml playlist. Does that still work with your routine?

3. Because this is a playlist I can't determine which of the files will be played first. Is there a way to have the buffer take place for each of the files in the playlist simultaneously?

4. I am trying to figure out why your "id=playercontainer1" works when there is no reference to it from the embedSWF command.

5. This might sound like an dumb question, but how do I know the routine you provided is actually working? I know that once I set the autostart to true (I assume that is one of the necessary steps, right?) that when the page launches it should not autostart but is there a way for me to know it is actually buffering?

Thank you for all of this!

Up Down

JW Player

User  
0 rated :

Found the answer to #4 when I tried the code. I needed to replace the reference in the swfobject.embedSWF command with the right name (playercontainer1).

Up Down

JW Player

User  
0 rated :

1) Correct, there is a closing curly brace missing.

2) The *file* value should be a URI/URL to a file or a playlist.

3) You can only buffer one file.

4) You should be writing the player object element to *player1* in the anchor element, leaving the division element to control positioning, etc.bc.. swfobject.embedSWF('http://www.neildempster.com/videoaudioclips/player.swf', *'player1'*, '470', '590', '9.0.124', false, flashvars, params, attributes);
I forgot to change that.

5) It's very helpful during development to have some kind of traffic instrumentation. I use *Net Statistics* from: *http://netstats.sourceforge.net/*

Up Down

JW Player

User  
0 rated :

Thank you LefTy! I appreciate all the info. When you say "you can only buffer one file" does that mean at the same time or ever? I have a short video that needs to be first in my playlist so it will buffer quickly; it would be a shame if there was no way to start the buffer for the other files in the list. Could a change be made to the routine that would loop through the playlist and start each file and then pause so the buffer can continue or does the buffer stop when another file is started?

Also, the routine you supplied works GREAT but is there a way to have the player return to normal launch state (i.e., thumb photo on player display) or something similar and not be left in pause mode?

Thanks!

Up Down

JW Player

User  
0 rated :

The player has to be left in pause mode to buffer the file. Buffering stops if the player is stopped or another track is selected.

You can buffer every file using various methods.

However, it will not be useful because unless the selected file has fully downloaded to the browser's cache, the player will request a new download if the user selects that particular track.

I've tried AJAX preloading (works in IE, not in FF).

I've tried multiple player preloading (all but one hidden).

All of the methods have the same limitation the file must be fully preloaded before it is selected or the player will request another download.

Also, consider this if you're preloading because the client has a slow connection, what happens if you try to simultaneously preload many files? The client's bandwidth will be saturated and none of the files will get completely downloaded for a long time.

Up Down

JeroenW

JW Player Support Agent  
0 rated :

thanks for your help again lefTy. Indeed, when firing two PLAY events after the playlist has loaded the video is buffering but not playing.

You can also check this on the testing page. Load an example and then set the “Send event” form to send a PLAY event. Click the Sendevent button twice and you’ll see the video loading but not playing.

http://developer.longtailvideo.com/trac/testing

Up Down

JW Player

User  
0 rated :

I just tried the code above and for the life of me cannot get anything to display but the "Get adobe..." line. I'm using the player-licensed.swf that I just downloaded yesterday.
Any help would be apprciated.
bc..

This is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test3</title>
<script type="text/javascript" src="/jwplayer4lic/swfobject.js"></script>

<script type="text/javascript">
var player = null;
var playlist = null;
var bufferFlag = true;


function playerReady(obj)
{
player = gid(obj.id);
addListeners();
};


function addListeners()
{
playlist = player.getPlaylist();

if((playlist !== null) && (playlist !== undefined))
{
player.addModelListener('TIME', 'timeMonitor');
}
else
{
setTimeout("addListeners()", 100);
}
};


function timeMonitor(obj)
{
if((obj.position > 0) && (bufferFlag))
{
player.sendEvent('PLAY', 'false');
bufferFlag = false;
}
};


function gid(name)
{
return document.getElementById(name);
};
</script>

<script type="text/javascript">
var flashvars =
{
file:'/av/06b.flv',
playlist:'bottom',
playlistsize:'200',
backcolor:'B4B187',
frontcolor:'531507',
lightcolor:'000000',
screencolor:'000000',
volume:'100',
abouttext:'About Nariel',
aboutlink:'http://www.nariel.com',
id:'player1',
autostart:'false'
};

var params =
{
allowfullscreen:'false',
allowscriptaccess:'always',
bgcolor:'#000000'
};

var attributes =
{
id:'player1',
name:'player1'
};

swfobject.embedSWF('/jwplayer4lic/player-licensed.swf', 'player1', '470', '590', '9.0.124', false, flashvars, params, attributes);
</script>
</head>

<body>
<div id="placeholder1" class="playercontainer">
<a id="player1" class="player" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Adobe Flash Player to see this video.</a>
</div>
</body>
</html>

Up Down

JW Player

User  
0 rated :

check each file in your browserbc.. http://www.domain.com/jwplayer4lic/swfobject.js
http://www.domain.com/jwplayer4lic/player-licensed.swf
http://www.domain.com/av/06b.flv

Up Down

JW Player

User  
0 rated :

Thanks. I triple checked the values. All is right. I just tested it in IE 7 and I get an error:
"swfobject is undefined"
Does this have anything to do with the version of swfobject.js that I'm using? If I open swfobject.js the header says it's version 1.5

Up Down

JW Player

User  
0 rated :

you need swfobject v2.1

replace thisbc.. <script type="text/javascript" src="/jwplayer4lic/swfobject.js"></script>
with thisbc.. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
no need to upload to your server, it's served from Google

Up Down

JW Player

User  
0 rated :

I recommend that a feature be added to flashvars that allows the preload of the buffer material. This way we don't need all this scripting and we also get to keep our thumb nails.

Up Down

JW Player

User  
0 rated :

I also suggest that the buffering be reworked so that while the video is playing the buffering doesn't happen again until it completely runs out of video to play. It does no good to set a 5 second buffer and have to wait for the buffer to load when the player never allows the buffered amount to fall below 5 seconds. With that sort of behaviour there is no point to buffering unless you are going to buffer the entire video.

Up Down

JW Player

User  
0 rated :

bc.. I recommend that a feature be added to flashvars that allows the preload of the buffer material. This way we don't need all this scripting and we also get to keep our thumb nails.


Not quite sure what this means

bc.. I also suggest that the buffering be reworked so that while the video is playing the buffering doesn't happen again until it completely runs out of video to play.


For all intents and purposes, this is what it does now. It technically buffers at 25%, but anything less than that it would switch in and out of buffering too often.

Up Down

JW Player

User  
0 rated :

Hi,

The script to pause the video and buffer works great! BUT it doesn't if you "reload" the video with a js function. This is what I do:

- my body onload:getFeatured() puts the video in the div, plays it, and pauses it while buffering.
- Calling the same getFeatured() with a link to reload the video doesn't pause it, its like it doesn't read the script to do it. I wan't it to pause as well.

Take a look at the example:

http://airplay.co.uk/test/showreel.html

Any help??

Thanks!!

Up Down

JW Player

User  
0 rated :

Hi zach,

I want autostart set to true, because I want that second video to pause automatically with the script as the first one does. It seems that I've to make the page reloading or something so the "pause" script works?

thanks

This question has received the maximum number of answers.