AnythingSlider – Restart flash movie on show

[airton]

Hello,
I’m using AnythingSlider to show various flash movies and it’s working a treat. The only downside is that every flash movie has it’s own duration and the latest version of AnythingSlider has a global timeout for all slides. Besides that, IE starts playing all the movies on load. So, if I have a 10 sec movie as the 1st slide and a 15 sec movie as the 2nd slide, when the slider transitions from the slide 1 to slide 2, slide 2 will still be 5 sec from its end. The solution would be to use JS to interact with flash and restart the movie when the slide is rendered to view. I know how to do it but cannot figure how to refer to the flash object from AnythingSlider. I am pretty sure I’ll have to use the onSlideComplete event handler for that. Here are some code snippets to help you understand:

**Flash Object:**

ul id=”slider1″>

[Mottie]

Which flash movie player are you using? Every player has a slightly different API so I’d need to see it to be able to give you a full answer (pausing the movie when a slide is manually changed, etc).

But you should be able to just use jQuery to target the flash movie:

onSlideBegin: function (slider) {
var flashMovie = slider.$currentPage.find(‘object,embed’)[0];
// stop flash movie on previous slide
flashMovie.Pause(); // just guessing that Pause is correct here
},
onSlideComplete: function (slider) {
var flashMovie = slider.$currentPage.find(‘object,embed’)[0];
flashMovie.Rewind();
flashMovie.Play();
}

This code “should” work in IE, so if it doesn’t just post a message here and I’ll dig into it a bit more.

[airton]

The player in use is the native browser’s flash plugin. I’ll test the code you proposed and report back.
Thanks for the help so far.

[airton]

Sorry for not posting here before. I was still playing with the code .

Thanks, Mottie, for the code suggestion. It worked perfectly after some adjustments. Here is the final code that worked for me:

J(‘#slider1’).anythingSlider({
onSlideBegin: function (event, slider) {
var flashMovie = ”;
if (navigator.appName.indexOf(“Microsoft Internet”) != -1)
flashMovie = slider.$currentPage.find(‘object’)[1];
else
flashMovie = slider.$currentPage.find(‘object,embed’)[1];
// stop flash movie on previous slide
flashMovie.StopPlay();
}, onSlideComplete: function (slider) {
var flashMovie = ”;
if (navigator.appName.indexOf(“Microsoft Internet”) != -1)
flashMovie = slider.$currentPage.find(‘object’)[1];
else
flashMovie = slider.$currentPage.find(‘object,embed’)[1];

// restart flash movie on current slide
flashMovie.Rewind();
flashMovie.Play();
},
width: 600,
height: 350,
resizeContents: false,
autoPlay: true,
autoPlayLocked: true,
delay: 25000,
animationTime: 600,
pauseOnHover: true
})
});

If I can bother you with another question, the previous version of AnythingSlider I was using allowed to set the timeout individually for each slide by setting the ID property of the LI tag containing the slide to the desired timeout value. So if the first LI had ID=”10000″ it would have a timeout of 10sec, and if the second slide had ID=”25000″ it would have its timeout set to 25sec. That version didn’t allow me to use the event handlers (onSlideBegin and onSlideComplete) to interact with the flash movies, so I upgraded to the latest version which on its turn fixes a global timeout for all slides at one. The question is: is there a way I can set the timeout individually to each slide as I could before?

Thanks again.

[airton]

Hi again!

I think I solved the last question myself.

I just added the following to the onSlideComplete event handler:

slider.options.delay = slider.$currentPage[0].id + slider.options.animationTime;

Then I set the ID property in the LI tag to the desired timeout. I add the animationTime property so I don’t have to consider it when setting the ID.

[Mottie]

I’m glad you figured this out!

One note though, it is not recommended to set an element’s id to be only a number (i.e. `id=”1″`). In your case it would be better to either set a data attribute (`data-time=”10000″`) or just a reference to the times (see [this demo](http://jsfiddle.net/Mottie/ycUB6/100/) from the [FAQ page](https://github.com/CSS-Tricks/AnythingSlider/wiki/FAQ#wiki-delay)).

also in your example code above, `slider.$currentPage[0].id` would return a string. In that case and if using a data-attribute, you’ll need to parse the value of the string:

slider.options.delay = parseInt(slider.$currentPage.attr(‘data-time’), 10) + slider.options.animationTime;

[mcjmcj]

Hey, this is a fantastic tip (restarting flash) and just to give a little back, I had to adapt this code a bit to work with mixed content (flash and images) so to make sure it worked with an image without an undefined error I had to check if the flash objects were in fact flash objects:

so this

flashMovie.StopPlay();

became

if (typeof flashMovie != 'undefined') {

flashMovie.StopPlay();

}

not a biggie but it was pretty much all I needed to adapt my code!

[mcjmcj]

Also I have to say that in order to get this to work for me, I had to change the index number of the IE Explorer element in the jquery find operation from 1 to 0

[Author]

Posts