Menu
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,
969
The only way how I get this slider to work was to download it locally from the bxslider official website. And try to follow their tutorial on how to make responsive video slider. They do not mention anywhere about these arrow images as they do not come in the css. So, remember to grab an images folder from the downloaded bxslider zip and paste it into js folder of your project.
In my final setup I have had 4 local files in js folder: jquery-2.2.2.min.js, jquery.bxslider.css, jquery.bxslider.js and jquery.fitvids.js. js folder also included images subfolder where were controls.png and bx_loader.gif.
This all was then referenced in HTML file as follows:
<head>
<link rel="stylesheet" href="js/jquery.bxslider.css">
<script src="js/jquery-2.2.2.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.bxslider').bxSlider({
video: true,
useCSS: false
});
});
</script>
</head>
<body>
<ul class="bxslider">
<li>
<iframe src="YOUR_LINK_TO_VIDEO" width="400" height="260" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<iframe src="YOUR_LINK_TO_VIDEO" width="400" height="260" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
</ul>
</body>
I have tested my solution on iOS device and everything seems to work fine. There is somewhat similar solution to this problem, you can also look into it.
94
Try to change the position of
`<script src="js/jquery.bxSlider.js" type="text/javascript"></script>`
my be it is due to confliction of libraries, put it in middle of all scripts or in bottom or anywhere elc, i am sure it gona work.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
