Missing clip - Change URL Created Jul 21, 2010

Anyone have any ideas on this?

Where you ever able to find a solution to this?

I haven't been able to change the clip with getClip().update() after onError. But if you test with an ajax GET call whether the file exists, and then initialize the player accordingly, it should work.

Look at the source of this very simple example here:

http://www.blacktrash.org/test/ajax.html

Perhaps it gives you some ideas. The hard test is with empty browser cache, because then I still get a short glimpse at "Player initialization failed", unless, like in the sample, I put some html content in the player container.

Unfortunately we're not dealing with files, but rather live streams.

Sometimes these live streams haven't quite yet started yet, and unfortunately jQuery won't allow an ajax call to an rtmp url.

Will keep looking though.

Then try to unload the player onError and reload it to play the next url.

Saw this thread was somewhat about changing clip URLs dynamically, so I thought I'd ask here too.

I've got one anchor tag I use as my flowplayer container, and I'm trying to dynamically change the video by manipulating the href via jQuery.

First, I attach an initial flowplayer instance to the first movie when the page loads:

$('#featured').each(function() {
    flowplayer(this, "videos/flowplayer-3.2.3.swf", {
        clip: {
            autoPlay: true,
            onFinish: function() {
                this.unload();
            }   
        }   
    }); 
});

On click of another image which represents another movie I unload the flowplayer instance, then swap the href values for the second movies:

$('#features img.person1').click(function () {
    $f().unload();
    ... // swapping a few other divs of text
    ...
    $('#featured').attr('href','nextvideo.flv');
});

This returns my #featured container to a placeholder image (a css background-image on the anchor), and I can see that the link target has changed, but clicking the video still loads the initial video.

I read somewhere Tero said that the href needs to be set before the flowplayer instance is created, but I can't seem to figure it out. Is it a matter of loading and unloading?

I guess I could use playlists and splash images, but I really dig the CSS background-image method as it is so clean and doesn't load the flash object until it's needed for playing.

Thanks

With a unique id="featured" you obviously do not need the each() method.

As for your actual question: Store the player in a variable, and then simply use the play() method.

// install player in element with id "featured"
var player = flowplayer("featured", "videos/flowplayer-3.2.3.swf", {
  // player configuration here
});

$("#features img.person1").click(function () {
  player.play("nextvideo.flv");
  // disable normal link behaviour
  return false;
});

More on player methods here:

http://flowplayer.org/documentation/api/player.html#methods

Here's a simple demo that does something similar, but without jQuery:

http://www.blacktrash.org/test/xplay.html

Thanks for the pointers. The way you've done it works, and I now have dynamic swapping of clips based on clicks to other areas of the page. My problem is that I want to both swap the flv path, and unload the player so that the html is shown.

I load the first video into the container anchor tag:

$('#featured').flowplayer("videos/flowplayer-3.2.4.swf", {
    clip: {
        autoPlay: false,
        onFinish: function() {
            this.unload()
        }
    }
});

On clicking somewhere else I can then bind a click event to .unload() the player, but then changing the flv path seems to not work.

The player API methods are very well documented and I will look over them to get a better idea of how to interact with the player.

By the way, I was having problems setting my flowplayer instance to a variable; the embedding works, but then accessing via player.play(), etc, was telling me there was no method associated with the variable. I was using this code:

var player = $('#featured').flowplayer("videos/flowplayer-3.2.4.swf");

Thanks. Back to the drawing board!

Why would you need to change the flv path?

Why don't you initialize the player like I proposed:

var player = flowplayer("featured", "videos/flowplayer-3.2.4.swf", {
  clip: {
    autoPlay: false,
    onFinish: function () {
      this.unload();
    }
  }
});

And then, as I said, call player.play("clipurl").

The above works with jquery too, only for ids the selector in the 1st argument to flowplayer is done without the hash #.

Please see:

http://flowplayer.org/documentation/api/index.html

on variations on how to install the player.

Gotcha, I now see that flowplayer() selects an ID without the hash. I had continually overlooked that. Setting a variable to a flowplayer instance is a really neat way to control the player, thanks. :)

Regarding changing the flv path: I have two videos, both with their own splash screen. I want to unload the player and show a splash screen before playing the flv. If I use player.play("new.flv") it is played immediately.

I really like using the CSS splash method because it degrades gracefully when Flash or Javascript are not available, not to mention using a CSS background-image with a "play" button overlaid is really cool.

I thought it would be enough to:

1. Change the splash using jQuery
2. unload() the player (user then sees the splash for video2
3. Change the container A's href
4. Then load() the player into the container again

This way, clicking the new splash would play video 2, but flowplayer always plays the flv which was originally specified in the href.

Thanks for the tips, by the way. It's been a great help.

I probably would update the html content either in the onFinish of the clip (possibly doing different things depending upon the clip's url) or in the onUnload event of the player.

I would not bother trying to update the href attribute of the container but try to update the clip:

player.getClip().update({url: "secondvideo.flv"});

See:

http://flowplayer.org/documentation/api/clip.html#update

I think I've made progress. Here's what works...

If I change the URL of the clip using player.getClip().update({url: clipURL});, then I can swap the CSS background-image on the container. If the player is configured with onUpdate: function() { this.unload() } then the user sees the desired splash image for the video he chose, and upon clicking the correct flv is loaded.

Code:

$("a.video").click(function() {
    var clipURL = $(this).attr("href");
    var anchorID = $(this).attr("id");

    if(player.isLoaded()) {
        player.getClip().update({url: clipURL});
    }

    // swap the splash image
    $("#player").css("background-image","url("+images[anchorID]+")");

    return false;
});

The downside is that this doesn't work if flowplayer is not loaded (ie, the user picks video2 before he clicks video1).

I've put up a sample here:http://thefro.org/test/swap/

Also, I noticed your example behaves oddly as well if you click "trailer 1" or "trailer 2" before you've loaded the main movie.

"oddly" in what way? It works for me[tm], but maybe I've overlooked something.

Oh, sorry, use 0 as playlist index argument to getClip:

player.getClip(0).update({url: "different.flv"});

then the player does not have to be loaded.

Ahhh... getClip(0) was the key. It's now working on my test setup here:http://thefro.org/test/swap/

The trick was testing if the player is loaded:

if(player.isLoaded()) {
  player.getClip().update({url: clipURL});
}   
else {
  player.getClip(0).update({url: clipURL});
}

Thanks for the pointers, I really appreciate it. Flowplayer's well documented but it's hard to navigate if you're new to the API.