Question

我正在尝试使用webm，ogv和mp格式（每个）创建一个包含4个视频的滑块。我使用了BxSlider - 这是示例：http://www.dinzign.com/test/

当你在笔记本电脑上看它时，它完全有效。你可以看到每个视频的预览，箭头点击进入下一个和上一个屏幕等等。

然而，当我在移动设备上提起这件事时，事情就到处都是。箭头不起作用，我没有看到视频的预览。我试过几个滑块，它让我发疯了 - 我不明白这里的问题是什么。

我为每个视频创建了一个html页面（带有标签），然后我将它们拉到每个滑块的

标签中....请帮助!!!!

< / p>

这是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>

Answer 1

尝试删除$(document).ready(function()

OR

在bxslider的FAQ部分阅读。

你是否在$（document）.ready（）调用中调用了.bxSlider（）？有关.ready（）调用的更多信息，click here。

BxSlider - 响应式视频无法正常工作

1 个答案: