Conflict between AnythingSlider and MP4 Video Player with Splash Image

Question

I have the following issue.

NOTE: I AM NOT A CODER! (I can follow instructions & I know some HTML and know my around basic stuff on Wordpress sites; but that's it.)

On my test site at http://www.auctionsolutionsnow.com, if you see the SLIDER & the FIRST VIDEO:

There is an ISSUE between EasyVideoPlayer (www.easyvideoplayer.com), my video player (which has FLOWPLAYER under the hood), and the slider, AnythingSlider => www.css-tricks.com/examples/AnythingSlider/#panel1-6

Any idea how to debug this?

The SPLASH IMAGE of the first video in slide 1 is the problem! (This is not supposed to auto-play either...)

Not sure if this is necessarily a JAVASCRIPT issue.

The problem is some kind of conflict with EasyVideoPlayer (EVP), when used in conjunction with that slider. From EVP support: because of how splash images modify the functionality a little, they do tend to conflict.

WITHOUT using a splash image, you can see it working fine on www.jazzheaven.com, for example.

BTW, videos are hosted on Amazon S3 and are using Cloudfront/RTMP Streaming.

Any suggestions, I would highly appreciate it!

Again: I can follow specific instructions, but i am NOT a super-techie or coder! (I do know some HTML, but no javascript, no CSS, etc.)

Thank you in advance!

Falk

PS: (This probably belongs in a separate thread...:)

When I see my website www.jazzheaven.com from my iPhone: the 2 DROP-DOWNS (called 'Choose Your Instrument' and 'Click here to Choose Your Instrument' do NOT work. ;(

My WP developer said this is a 2-min job for somebody who understands JQUERY.

2ND QUESTION: would fixing this solve it for IPHONES and ANDROIDS and iPADS? Thanks!

Mottie Mottie · Accepted Answer · 2010-12-28T16:00:28

It's difficult to figure out why there is a difference between having and not having the splash image. But because the player is being added using a <script> tag, try initializing anythingSlider when the window is loaded instead of document ready (window load activates when all images and videos have loaded):

jQuery(window).load(function() { 
 jQuery('#slider-home-videos').anythingSlider({ 
  delay: 6000, 
  height: 390, 
  startStopped: true, 
  buildArrows: true, 
  hashTags: false, 
  navigationFormatter: function(index, slide) { 
   return ['Ralph Peterson', 'Ari 800px test to fit', 'slide 3'][index - 1]; 
  } 
 }); 
});

As for your questions about the dropdown, please post that in a separate question... I don't own an "and" or "i"-anything so I can't help you there =(

Conflict between AnythingSlider and MP4 Video Player with Splash Image

1 Answers