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,
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.
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.
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>
加载中,请稍侯......
精彩评论