我试图创建一个滑块与4个视频,我有在webm, ogv和mp格式(每个)。我使用BxSlider -这里是示例:http://www.dinzign.com/test/
当你在笔记本电脑上看的时候,它完全可以工作。你可以看到每个视频的预览,箭头可以点击到下一个和上一个屏幕,等等。
然而,当我在移动设备上打开这个时,东西到处都是。箭头不工作,我没有看到视频的预览。我已经尝试了几个滑块,它让我发疯-我不明白这里的问题是什么。
我为每个视频(带标签)创建了一个html页面,然后我将这些拉入滑块....的每个
下面是HTML:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/plugins/jquery.fitvids.js"></script>
<script src="js/jquery.bxslider.js"></script>
<link href="jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
video: true,
useCSS: false,
touchEnabled:true,
preventDefaultSwipeY:true
});
});
</script>
</head>
<body>
<ul class="bxslider">
<li><iframe src="videos/video1.html" width="100%" height="240px" frameborder="0"></iframe></li>
<li><iframe src="videos/video2.html" width="100%" height="240px" frameborder="0"></iframe></li>
<li><iframe src="videos/video3.html" width="100%" height="240px" frameborder="0"></iframe></li>
<li><iframe src="videos/video4.html" width="100%" height="240px" frameborder="0"></iframe>
</li>
</ul>
</body>
</html>
尝试删除$(document).ready(function()
或
请参阅bxslider的FAQ部分。
是否在$(document).ready()调用中调用.bxSlider() ?有关.ready()调用的更多信息,请点击这里。