Question

我正在构建一个男性时尚网站，其中包含一个包含图像和视频的滑块。我使用owl.carousel作为滑块。该视频是一个平面HTML5视频标签。
我试图像这样开始播放jquery视频：$('#video')[0].play();

当视频在滑块/旋转木马外面时，它可以正常工作，但如何在里面启动它？

Codepen link

Answer 1

我只看你的代码。经过几次测试后，我看到两个带有类视频滑块的容器，其中包含一个内部具有相同ID“视频”的视频标签。（在渲染视图和jquery代码$(".video-slide").children()上查看调试控制台）。

您可以使用jquery代码$(".video-slide").children().each(function() { this.play(); });启动videoS，但在需要查找块重复的位置和原因之前。

我希望它有所帮助

Answer 2

创建了一个代码段

$(function(){
                var owl;

                $(document).ready(function () {

                    owl = $(".stage");

                    owl.owlCarousel({
                        autoplay: true,
                        autoplayHoverPause: true,
                        loop: true,
                        items: 1,
                        navigation: true, // Show next and prev buttons
                        slideSpeed: 300,
                        paginationSpeed: 400,
                        singleItem: true,afterAction: function(current) {
                            current.find('video').get(0).play();
                        }
                    });
                });


            });

 body {
                background-color: #91a8d2;
            }

            .container {
                margin-top: 50px;
                max-width: 500px;
            }

            .stage .image-slide, .stage .video-slide {
                display: block;
                width: 100%;
                height: 100%;
            }

            .stage .video-slide > video {
                width: 100%;
                height: auto;
            }

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>

        <link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">

        <link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">

        <script type="text/javascript" src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>

<body>
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="stage">
                            <div class="image-slide">
                                <img src="http://imyourman.dk/demo/slide1.jpg">
                            </div>
                            <div class="image-slide">
                                <img src="http://imyourman.dk/demo/slide2.jpg">
                            </div>
                            <div class="item">
                                <video id="video">
                                    <source src="http://imyourman.dk/demo/fashion.mp4" type="video/mp4" autoplay>
                                    <source src="http://imyourman.dk/demo/fashion.ogg" type="video/ogg">
                                </video>
                            </div>
                            <div class="image-slide">
                                <img src="http://imyourman.dk/demo/slide3.jpg">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </body>

我创建了一个示例HTML代码。请检查一下。

相应地设置你的CSS。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="robots" content="noindex, nofollow">
        <meta name="googlebot" content="noindex, nofollow">

        <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>

        <link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">

        <link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">

        <script type="text/javascript" src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>


        <style class="cp-pen-styles">
            body {
                background-color: #91a8d2;
            }

            .container {
                margin-top: 50px;
                max-width: 500px;
            }

            .stage .image-slide, .stage .video-slide {
                display: block;
                width: 100%;
                height: 100%;
            }

            .stage .video-slide > video {
                width: 100%;
                height: auto;
            }
        </style>

        <title></title>

        <script type='text/javascript'>
            $(function(){
                var owl;

                $(document).ready(function () {

                    owl = $(".stage");

                    owl.owlCarousel({
                        autoplay: true,
                        autoplayHoverPause: true,
                        loop: true,
                        items: 1,
                        navigation: true, // Show next and prev buttons
                        slideSpeed: 300,
                        paginationSpeed: 400,
                        singleItem: true,afterAction: function(current) {
                            current.find('video').get(0).play();
                        }
                    });
                });


            });

        </script>


    </head>

    <body>
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="stage">
                        <div class="image-slide">
                            <img src="http://imyourman.dk/demo/slide1.jpg">
                        </div>
                        <div class="image-slide">
                            <img src="http://imyourman.dk/demo/slide2.jpg">
                        </div>
                        <div class="item">
                            <video id="video">
                                <source src="http://imyourman.dk/demo/fashion.mp4" type="video/mp4" autoplay>
                                <source src="http://imyourman.dk/demo/fashion.ogg" type="video/ogg">
                            </video>
                        </div>
                        <div class="image-slide">
                            <img src="http://imyourman.dk/demo/slide3.jpg">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>

在owl.carousel中启动html5视频

2 个答案: