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

20 posts | return to the JavaScript Interaction forum | get the rss feed for this thread

Feb. 25, 2009mostwanted

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!

Feb. 25, 2009lefTy

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.

autostart=true


 
 —UNTESTED— but should be close.
    <script type="text/javascript">
      var player      =  null;
      var bufferFlag  =  true;


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


      function addListeners()
      {
        // I suppose this should really should be checking the property to see if it's type "object'
        if(player.getPlaylist())
        { 
          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>



Feb. 26, 2009mostwanted

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 ---

Feb. 26, 2009lefTy

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

Mar. 12, 2009mostwanted

ok, thanks.

Mar. 23, 2009Neil Scottsdale

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.

Mar. 23, 2009lefTy

@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.


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/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:                  'video.flv',
        playlist:              'bottom',
        playlistsize:          '200',
        backcolor:             'B4B187',
        frontcolor:            '531507',
        lightcolor:            '000000',
        screencolor:           '000000',
        volume:                '100',
        abouttext:             'About Neil Dempster',
        aboutlink:             'http://www.neildempster.com/wwa/neildempster.htm',
        id:                    'player1',
        autostart:             'false'
      };

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

      var attributes =
      {
        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:
<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>



Mar. 23, 2009Neil Scottsdale

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!

Mar. 23, 2009Neil Scottsdale

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).

Mar. 23, 2009lefTy

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.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/

Mar. 24, 2009Neil Scottsdale

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!

Mar. 24, 2009lefTy

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.

Mar. 26, 2009JeroenW

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

Apr. 14, 2009Elias

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.
[code][/code]
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>

Apr. 14, 2009robin

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

Apr. 14, 2009Elias

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

Apr. 14, 2009robin

you need swfobject v2.1

replace this<script type="text/javascript" src="/jwplayer4lic/swfobject.js"></script>with this<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

Oct. 27, 2009Chris Barth

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.

Oct. 27, 2009Chris Barth

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.

Oct. 28, 2009Zachary Ozer

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

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.

Add a reaction

You can also return to the category or try this search for related threads.

Your name *

Supported codes:

 

submit