HTML5 video won't work with jquery bxSlider plugin on iPad

I'm using the Jquery bxSlider plugin to create a slider gallery of images and video for the iPad. I'm using the HTML5 video tag for video implementation:

<video width="400" height="260" controls>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>

Video source code works fine on iPad when on its own, however when merged with slider markup, the video does not play.

Test link: http://www.ekimmedia.com/totem/TIC/MG/

If I remove this script:

<script src="js/jquery.bxSlider.js" type="text/javascript"></script>

from the source code, the video then works on iPad.

Test link with bxSlider script removed: http://www.ekimmedia.com/totem/TIC/MG/index10.html

Not sure what is causing the conflict.

Thanks,

Edit Report

1 Answer

Try viewing the video element with a debugging tool like firebug or safari developer tools. You may have to use a PC/Mac browser to do this. See if the video element loses any attributes, or gets extra things added after your jquery script runs. Having done some mobile development involving videos I can tell you it is very touchy, especially since there are approximately 82 billion different browsers and OS versions floating around on mobile devices. If you see that the video element is changed, then you will need to add a script that takes it back to something viewable on your iPad.

You might also make sure your videos are wrapped correctly. It looks like this slider script requires the following format:

<div id="slideshowcontainer">
 <div>slide1 content</div>
 <div>slide2 content</div>
 <div>etc...</div>
</div>

OR

<ul id="slideshowcontainer">
 <li>slide1 content</li>
 <li>slide2 content</li>
 <li>etc...</li>
</ul>

answered 2012-01-04T17:39:49.170

HTML5 video won't work with jquery bxSlider plugin on iPad

1 Answer

Your Answer