Question

我在许多html页面中使用owl轮播运行非分页滑块/旋转木马的图像，这些图像将在液晶电视屏幕上播放，仅用于显示目的（但通过网络浏览器） - 问题由于没有在网上使用，所以不好的做法被否定了。

页面中的一张幻灯片包含一个与html页面位于同一个盒子上的mp4视频。

我的标记看起来像：

    <script>
    $(document).ready(function() {

    $('.owl-carousel').owlCarousel({
            pagination : false,
            autoPlay : true,
            items:1,
            merge:true,
            loop:true,
            margin:10,
            video:true,
            lazyLoad:true,
            center:true,

        })

    })
    </script>

    <style>

        #owl-demo .item-video img{
            display: block;
            width: 768px;
            width:   1280px;
            padding: 0;
            margin:  0;
            overflow: hidden;
            top:  0;
            left: 0;
        } 

    </style>

    </head>
        <body>
                  <div id="owl-demo" class="owl-carousel">

                        <div class="item-video"><img src="images/1.jpg" /></div>
                        <div class="item-video"><img src="images/2.jpg" /></div>
                        <div class="item-video"><img src="images/3.jpg" /></div>
                        <div class="item-video">
                          <video width="1280" height="768" controls>
                            <source src="video.mp4" type="video/mp4">Your browser does not support the video tag.</video>
                        </div>
                        <div class="item-video"><img src="images/4.jpg" /></div>
                        <div class="item-video"><img src="images/5.jpg" /></div>
                        <div class="item-video"><img src="images/6.jpg" /></div>
                        <div class="item-video"><img src="images/7.jpg" /></div>
                        <div class="item-video"><img src="images/8.jpg" /></div>
                        <div class="item-video"><img src="images/9.jpg" /></div>
                        <div class="item-video"><img src="images/10.jpg" /></div>

                  </div>
        </body>


    </html>

视频播放约2分半钟。

我想知道如何制作包含视频的幻灯片并播放全长视频，然后转到下一张幻灯片并正常循环播放，然后重新开始并再次进行相同操作。

我尝试使用：

    <video width="1280" height="768" controls autoplay>

在视频对象本身上，但这仅在页面加载时运行视频一次，并且当其他幻灯片循环时可以听到声音。

关于jquery，我有点无能为力，所以任何帮助都非常感激。

如何在owl轮播中的特定幻灯片上自动播放视频，停止然后转到下一张幻灯片？

0 个答案: