Battling with AnythingSlider on iPhone

[wiinter]

First off, AnythingSlider is awesome. Mooooottttiiieeeee.

I had pretty strict criteria when choosing a slider:

• Works with video
• Pauses video when sliding
• Doesn’t eff up when loading video out of view
• Can use regular embedded HTML5 video
• Needs to autoplay the video (not just the slider)
• Custom controls, outside of div
• Should work on all current browsers & mobile platforms

Seemed like AnythingSlider could play nicely with anything I threw at it. Then I loaded it up on the iPhone. I get a problem where it constantly cycles the videos, like it’s unable to determine their length, and is using the default 0 length. Also, it doesn’t appear to be autoplaying, though it’s hard to tell with them wooshing past.

Sorry, no live sample, but aside from loading v1.8 the unmodified default theme – jquery.anythingslider.js and jquery.anythingslider.video.js – I have this for initialization:

// DOM Ready

jQuery(function(){

jQuery('#slider').anythingSlider({

buildArrows         : false,

buildNavigation     : false,

buildStartStop      : false,

resizeContents      : true,

delay               : 1000,

autoPlay            : true,

autoPlayLocked		: true,

// resumeDelay		: 5000,

resumeOnVisible     : true,

resumeOnVideoEnd    : true,



// pause video when out of view

onSlideInit: function(e, slider) {

var vid = slider.$lastPage.find('video');

if (vid.length && typeof(vid[0].pause) !== 'undefined') {

vid[0].pause();

}

},

// continue playing video when in view

onSlideComplete: function(slider) {

var vid = slider.$currentPage.find('video');

vid[0].play();

},

// pause slideshow if video is playing

isVideoPlaying : function(slider){

var vid = slider.$currentPage.find('video');

return (vid.length && typeof(vid[0].pause) !== 'undefined' && !vid[0].paused && !vid[0].ended);

}

});

});

With the jQuery compatibility mod, and the additional video controls. I realize with these added controls I may not need the video.js (plz confirm?) – but I have tried without it none-the-less.

Then, in a test page, I have something as simple as this:

Video is encoded with Miro.

I’ve also tried:

• Ensuring my mp4 file plays without the AnythingSlider wrapper. Which it does. Embedded or direct hit to the mp4, it works on the iPhone every which way, except when placed in these divs.
• Tried mucking around with the media type & extended codec params.

The two videos just stay black, with the circle/play button (NOT the circle/play/slashed-out button, at least) – which slides into place, then quickly slides away.. with the panel2 sliding, in… then quickly out putting panel1 back. Over and over, not starting the video, nor stopping on a damn slide.

So, anyone have any suggestions? :D

[Mottie]

Hi wiinter!

I’m sorry you’re having trouble with AnythingSlider. I don’t really own an iOS device, so there isn’t any way for me to test it. But all the code looks like it should work (I haven’t test it).

I wonder if preloading the video would work? Check out this article with a snippet on how to preload the video… just switch out vid[0].play() with onCanPlay(vid[0]) and change the snippet like this:

function onCanPlay(vid){

I’d appreciate the help with testing ;)

I’m currently trying to update all of the demos for AnythingSlider because we moved it from ProLoser’s repos over to CSS-Trick’s repos. You can find it here. So I’ll be a little busy, but should have a little time to help you troubleshoot this issue.

Edit: here are some other issues I found… ugh it still plays even when display: none is applied.

[wiinter]

Hi Mottie! Thanks for the quick reply. My apologies for not offering the same. Looks like you’re making good progress on this – I saw the list of other issues found. I’m going to camp this thing.

[Author]

Posts