javascriptjquerydailymotion-api

Pause slider when embedded Dailymotion video is started


I have a slider (flexslider) with a daylimotion video in each slide. The slider runs automatically, the videos do not. So far the videos are embedded as iFrames, but I can switch them to the Web SDK API if necessary.

The slider can be paused in the following way: $('.flexslider').flexslider("pause");

How can I create a listener that stops the slider as soon as any of the embedded videos is started?


Solution

  • According to the Dailymotion SDK docs you can listen for the start event on the player and do something whenever the player has started, like stopping your carousel from running.

    Here's an example for a single video which stops the slider.

    const player = DM.player(document.getElementById('player'), {
      video: 'xwr14q',
      width: '100%',
      height: '100%',   
      params: {
        autoplay: true,
        mute: true
      }
    });
    
    player.addEventListener('start', function() {
      $('.flexslider').flexslider("pause");
    });
    

    This is not possible with just an iframe as you don't have a way to communicate to the player.