How to run autoplay video and mute the sound?

Question

How to run autoplay video and mute the sound for owl carousel 2?

My code - https://jsfiddle.net/ufqp8Lku/

$('.owl-carousel').owlCarousel({
  items: 1,
  merge: true,
  loop: true,
  margin: 10,
  video: true,
  lazyLoad: true,
  center: true,
  responsive: {
    480: {
      items: 1
    },
    600: {
      items: 1
    }
  }
})

.owl-carousel,
.owl-carousel .item-video {
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet" />

<div class="owl-carousel owl-theme">
  <div class="item-video" data-merge="1">
    <a class="owl-video" href="https://vimeo.com/23924346"></a>
  </div>
  <div class="item-video" data-merge="1">
    <a class="owl-video" href="https://www.youtube.com/watch?v=JpxsRwnRwCQ"></a>
  </div>
  <div class="item-video" data-merge="1">
    <a class="owl-video" href="https://www.youtube.com/watch?v=FBu_jxT1PkA"></a>
  </div>
</div>

This carousel is adding your video as an **iframe** in the html. You need to add **autoplay** and **muted** attributed on those like a video but its little tricky. This might help you https://developers.google.com/youtube/iframe_api_reference#Example_Video_Player_Constructors — Gaurav Chaudhary, Mar 31 '17 at 18:52
possile dublicate http://stackoverflow.com/questions/22678720/owl-carousel-wont-autoplay — Gaurav Chaudhary, Mar 31 '17 at 19:02
@Gaurav Chaudhary This question is not a duplicate, because I need autoplay video, not autoplay slider — Dmitriy, Mar 31 '17 at 19:12

Vaishal Patel · Answer 1 · 2017-04-02T19:10:41.717

1

Call the jQuery function play() in the callback afterAction:

afterAction: function(current) {
        current.find('video').get(0).play();
    }

Or even this:

(function($) {
    $(document).ready(function() {
        setTimeout(
            function() {
                $(".active .owl-video-play-icon").trigger("click");
            }, 1000);
    });
    $(document).on('click', '.owl-dot', function() {
        if ($('.owl-item.active').hasClass('owl-video-playing')) {} else {
            setTimeout(
                function() {
                    $(".active .owl-video-play-icon").trigger("click");
                }, 1000);
        }
    });
})(jQuery);

Example:

http://codepen.io/vishpatel93/pen/gmqzQv

edited Apr 02 '17 at 19:10

answered Apr 02 '17 at 18:37

Vaishal Patel

399
4
24

Thanks, autoplay video works, but how to turn off the sound of the video so that it works in the background? – Dmitriy Apr 02 '17 at 19:13
Want to mute all ? – Vaishal Patel Apr 02 '17 at 19:15
How to remove the volume of the video, but with the ability to turn the volume on? – Dmitriy Apr 02 '17 at 19:19
Use prop to toggle the mute property. May need an additional button and z-index if video going to have overlay – Vaishal Patel Apr 02 '17 at 19:38
example for video html 5 - https://jsfiddle.net/ovcmh686/, how to do this for iframe youtube, iframe vimeo? – Dmitriy Apr 02 '17 at 19:54
For vimeo you can send a postmessage to set voice to 0 – Vaishal Patel Apr 02 '17 at 19:59
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/139773/discussion-between-vaishal-patel-and-dmitriy). – Vaishal Patel Apr 03 '17 at 13:03
Vimeo Not loading if any possible to play vimeo Videos – Creative Enemy Feb 14 '20 at 11:40

posixpascal · Accepted Answer · 2017-04-06T06:26:45.087

1

If you can work around the cross origin issues I'm getting in jsfiddle this will solve your problem:

function muteCurrentYoutubeVideo(){
    var tempId =  'yt-' + +new Date();
    var activeFrame = document.querySelector(".owl-item.active iframe");
    activeFrame.setAttribute('id', tempId);
    var player;


    player = new YT.Player(tempId, {
        events: {
            'onReady': function(){ 
                player.mute();
                player.playVideo();
                activeFrame.setAttribute('id', '');
            }
        }
   });
}

function toggleOwlVideos(){
    // set required elements here.
    var currentSlide = document.querySelector(".owl-item.active");
    var playBtn = currentSlide.querySelector(".owl-video-play-icon");
    var frame = currentSlide.querySelector("iframe");
    var loading = Boolean(frame);

    // if playBtn found and carousel is not loading the vimeo frame
    if (playBtn && !loading){
       playBtn.click(); // toggle play state
    }

    if (frame){ // if vimeos frame is ready
        frame.contentWindow.postMessage('{"method":"setVolume", "value":0}', '*'); // set value to 0
        muteCurrentYoutubeVideo();
    } else {
       setTimeout(toggleOwlVideos, 300); // try again in 300ms.
    } 
}

var owl = $('.owl-carousel').owlCarousel({ /* ... */ });

owl.on('changed.owl.carousel', function(event) {
     // executed whenever owlcarousel changes.
     // the timeout(0) is required unfortunately because
     // otherwise this gets executed before the slide has
     // successfully changed.
     setTimeout(toggleOwlVideos, 0);
})

And for the volume toggle button:

$(".mute-toggle").on("click", function(){
      var tempId =  'yt-' + +new Date();
      var activeFrame = document.querySelector(".owl-item.active iframe");
      activeFrame.setAttribute('id', tempId);
      var player;


      player = new YT.Player(tempId, {
          events: {
              'onReady': function(){ 
                  if (player.isMuted()){
                      player.unMute();
                  } else {
                      player.mute();
                  }
                  activeFrame.setAttribute('id', '');
              }
          }
      });
});

Here is the updated fiddle: https://jsfiddle.net/05t1ryje/

I'm using postMessage to communicate with the iFrame.

edited Apr 06 '17 at 06:26

answered Apr 05 '17 at 19:24

posixpascal

3,031
3
25
44

Thanks for the answer, autostart works, but the sound does not vanish – Dmitriy Apr 05 '17 at 19:46
Can you check what happens if you don't use jsfiddle but just add that code to your page? Might be a problem when running it inside nested iframes. If that also doesn't work, we'll have to use a different approach to embed these videos (e.g. manually - not using owlCarousel's own video implementation). – posixpascal Apr 05 '17 at 19:56
I'll fix it, can you please enable the youtube JS API? You have it in your HTML but commented. Then I can change my script accordingly to make it work. – posixpascal Apr 05 '17 at 20:14
Hey bro, sorry for being late I was driving home :). I updated my code, it should now mute your video on slide change and autostart it. I tested it by dumping the `muteCurrentYoutubeVideo` function into the console and running it manually. Can you confirm? – posixpascal Apr 05 '17 at 21:59
Thanks, now works fine. Another question is the VOLUMEUP button, but this button only works for 1 video slide. What is the reason for this behavior? – Dmitriy Apr 06 '17 at 05:43
Because the other youtube Videos are removed from the page if you change the slide, as soon as owlCarousel puts them in the Front they start to load again with sound. Is that what you mean or do you want to support multiple owlCarousel sliders on a single page? – posixpascal Apr 06 '17 at 06:03
I would like the ability to add an on / off volume button – Dmitriy Apr 06 '17 at 06:10
1

I updated the code to make the on/off toggle button work.Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/140028/discussion-between-praszyk-and-dmitriy). – posixpascal Apr 06 '17 at 06:23
Vimeo Not loading if any possible to play vimeo Videos – Creative Enemy Feb 14 '20 at 11:40
Hey, can you add post a code sample so I can take a look at it? It might be related to vimeo JS itself. – posixpascal Feb 15 '20 at 13:03

How to run autoplay video and mute the sound?

2 Answers2