Forum user: Servers

Mate, you're a godsend!

I was searching through the forums and only by chance did I stumble on this post. I didn't think about how it might only be the audio plugin that wasn't registering the callback.

And thank you for providing the file! I almost had to beg a Flash developer to compile the plugin with the edits you made above, before I noticed that you had linked to it.

Many thanks, I owe you a beer!

I don't know of any reason offhand that you would have a problem with using this in an ASP.NET application. I am making heavy (read: killing me!) use of Flowplayer within my own project.

I can't really post a sample, as I have a ton of different configurations. But the simplest configuration I have would be something like (and this uses jQuery):

<script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/flowplayer.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
$(window).load(function() {

    $('.music-player').each(function() {

        $f(this, {src: "/swf/flowplayer.commercial-3.1.5.swf", wmode: 'transparent'}, { 
            key: 'mykeywashereandIreplacedit',
            clip: { 
                autoPlay: false,
                autoBuffering: false
                
            },
            canvas: {backgroundColor: "#ffffff"}
            plugins: {
                audio: {url: '/swf/flowplayer.audio-3.1.2.swf'}
            }
            
        });
    });
});
</script>

.music-player {
  width: 400px;
  height: 300px;
}

<a href="somefile.mp3" class="music-player"></a>

The key points being: make sure your Javascript files are included (I know that sounds asinine, but I've banged my head against the desk a dozen times before realizing that, due to permission errors or a typo a file wasn't being included on the page), make sure you have IDs/classes done right. In the example you posted, Kurt, make sure that .NET isn't actually replacing your anchor's ID with it's own generated ID. "player" is referring to the ID of the anchor, after all.

Hope I'm not being patronizing!

Wow hey I'm an idiot. Guess who needs to read the API, right...

$f() is definitely not some magical function like I thought it was (and I believe you already know this), but instead just references the first Flowplayer object on the page. It can take a selector like $f('*') to retrieve them all. I'm sorry if I misled you with my rambling.

I'll go one step at a time: how are you loading in new anchor tags dynamically? Some AJAX call?

Above? Do you mean place an HTML element or something above the player? If that's the problem, and it's that the Flash object is covering your ad, you need to set the generated Flash object to have a window mode of transparent:

$f('#player', {src: "/swf/flowplayer.commercial-3.1.1.swf", wmode: 'transparent'});

You just have to give the flowplayer function (NOT one of the options for flowplayer config) the wmode setting. If you had other settings they'd go as such:

$f('#player', {src: "/swf/flowplayer.commercial-3.1.1.swf", wmode: 'transparent'},
{clip: yadda yadda,
plugins: yadda yadda
}
);

So I wrote out a long reply, complete with an example, and then I reread your post and thought "Oh that's not that they're asking, is it?" So instead I'll just answer from my experience:

$f() is a global function that can be called at any time. All Flowplayer objects on the page are associated to the global $f() (such as with $f().pause() ). So in your dynamically created elements, after they are created just run the script on only that element:

function createWithJquery() {
  var newPlayer = '<a href="somevideo.flv">New Vid</a>';
  $('#players').append(newPlayer);  
  $f(newPlayer , {src: "/swf/flowplayer.commercial-3.1.1.swf"}
}

function createWithPrototype() {
  var newPlayer = '<a href="somevideo.flv">New Vid</a>';
  $('players').insert(newPlayer);  
  $f(newPlayer , {src: "/swf/flowplayer.commercial-3.1.1.swf"}
}

<a onclick="createWithJquery(); return false;">Create new player</a>
<br />
<a onclick="createWithPrototype(); return false;">Create new player</a>

<div id="players">
</div>

I didn't test any of this, haha, but I hope I get the general point across? You obviously don't need to use a JS library, but I didn't feel like trying to recall the document.getElementById()s and innerHTML setting (I think there's a better way than that).

SO I guess I rambled a long time into getting to: just try it! Call the Flowplayer constructor $f() on your newly created element. It should work.

-Jason

So this may be quite simple to do, it may not be; I'm not sure, and I may just be missing something easy.

What I have:
-A dynamically built playlist (not manual HTML) from an array of objects.
-A link outside of the playlist to a media file.

What I'd like to have happen:
When a user clicks on the outside link, I would like to add an instream clip to the playlist, but I want it to immediately start playing whilst pausing the current track in the playlist.

All of this is what the example here does except for the immediate play. My thought is to grab the current index & time of the track that's playing and add in the instream clip at those points. it seems imprecise, however, were there to be some odd delay.

Is there a better way to accomplish this?

Thanks,

-Jason

I did try using an mp3 that I was 90% sure wasn't VBR encoded, and it displayed the same behavior. The real kicker is, it works fine with the Flash controlbar.

Also, the mp3 file did have full ID3 metadata.

However this is hardly ideal and is definitely a hack around the problem, and for some people it just won't work.

So I found a simple workaround (I'm the original poster, new registered account). If you add a duration, manually and in seconds, the progress bar will work. These are my thoughts on the matter, based on looking over what I could (I'm not a Flash developer) and the release notes:

-This happens because of MP3's being encoded with a VBR (variable bit rate). Flash determines the length of a file by doing the math of file size / bitrate, and with a VBR file it can't figure out the duration.

-If the file is allowed to reach the end of playback, the playhead and progress bar DO work as intended, until the page is refresh.

So the fix I found was to supply a duration by hand, like this:

<a href="sample.mp3" class="music-player" duration="483"></a>

$('.music-player').each(function() {

	var controlBar = $(this).next().attr('id');
	var duration = $(this).attr('duration');
	
	$f(this, "/swf/flowplayer-3.1.1.swf", { 
		
		clip: { 
			autoPlay: false,
			duration: duration,
		},
		
		plugins: {controls: null}
		
	}).controls(controlBar);
});