This is a message.

Change coverimage dynamically in audio player Created Aug 5, 2011

This thread is solved

Views: 1046     Replies: 1     Last reply Aug 8, 2011  
You must login first before you can use this feature

rburkat

Posts: 1

Registered:
Aug 5, 2011

Change coverimage dynamically in audio player

Posted: Aug 5, 2011

My goal is to create a audio and image slideshow and I was attempting to change the coverimage dynamically in the following way.

this.getClip(0).update({ coverImage:'full-url-to-nextimagre.jpg'});

The actually property does change, as I can read it back, but the image does not change on the player. I also attempted using the first image in a playlist idea, and changing it's url but, it did not work either.

As you can imagine, using the cue system this would be a great way to cycle through images time with an audio file.

Am I missing something obvious?

Thanks

Anssi
Flowplayer Flash & video streaming developer

Posts: 1197

Registered:
Jul 24, 2007

» Change coverimage dynamically in audio player

Posted: Aug 8, 2011

Reply to: Change coverimage dynamically in audio player, from rburkat
The coverImage feature does not support changing the image dynamically. However you could use the canvas for images. See the example below. With this you can change the image dynamically with code like this, you can try this in your browser's developer console:


$f().getPlugin("canvas").css({ background: 'url(/img/demos/thumb2.jpg) no-repeat 50pct 50pct' })

Flowplayer forum example

HTML setup for the player

<!-- include latest Flowplayer javascript file -->
<script language="javascript" src="path/to/flowplayer-3.2.8.js"></script>

<!-- player container with optional splash image -->
<a href="path/to/video_file" id="playerContainer">
	<img src="path/to/splash_image" />
</a>


JavaScript coding

Following script will install Flowplayer into our player container


<script language="javascript">
// our custom configuration is given in third argument
flowplayer("playerContainer", "path/tohttp://releases.flowplayer.org/swf/flowplayer-3.2.11.swf",{
clip: {
  url: 'http://releases.flowplayer.org/data/fake_empire.mp3'
},
canvas: {
   // a canvas image centered 50% vertically and horizontally
   background: 'url(/img/demos/thumb1.jpg) no-repeat 50pct 50pct'
}
});
</script>