CODEWITHSUNDEEP
javascriptjqueryhtmlvideoowl-carousel
Legarndary
Legarndary

Reputation: 967

Start html5 video within an owl.carousel

I'm building a males fashion site with a slider that have both images and a video in it. I'm using owl.carousel as a slider. The video is an plane HTML5 video tag.
I'm trying to start the video whith jquery like this: $('#video')[0].play();

It works perfectly when the video is outside the slider/carousel, but how do I start it inside?

Codepen link

Upvotes: 0

Views: 10828

Answers (2)

Punit Gajjar
Punit Gajjar

Reputation: 4997

Created a snippet

$(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>

I have created a sample HTML code. Please check it.

set your CSS accordingly. 

<!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>

Upvotes: 2

Fefux
Fefux

Reputation: 974

I just look your codepen. After few tests, I saw two containers with class video-slider with a video tag with the same id "video" inside. (Check with debug console on the render view and the jquery code $(".video-slide").children()).

You can start the videoS with the jquery code $(".video-slide").children().each(function() { this.play(); }); but before you need to find where and why your blocks are duplicated.

I hope it helps

Upvotes: 2

Related Questions