启动嵌入式 Dailymotion 视频时暂停滑块

Question

我有一个滑块 (flexslider)，每张幻灯片中都有一个 daylimotion 视频。滑块自动运行，视频不会。到目前为止，视频都是作为 iFrame 嵌入的，但如果需要，我可以将它们切换到 Web SDK API。

滑块可以通过以下方式暂停： $('.flexslider').flexslider("pause");

如何创建一个监听器，在任何嵌入式视频启动时立即停止滑块？

Answer 1

根据 Dailymotion SDK docs，您可以在播放器上监听 start 事件，并在播放器启动时执行某些操作，例如从运行停止轮播。

下面是一个停止滑块的视频示例。

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");
});

仅使用 iframe 是不可能的，因为您无法与播放器进行通信。

Answer 2

不需要为每个视频添加额外JavaScript的解决方案：

HTML:

<script src="https://api.dmcdn.net/all.js"></script>

<div class="flexslider">
    <ul class="slides">
        <li><div class="dmplayer" data-video="x7tgad0"></div></li>
        <li><div class="dmplayer" data-video="x7tgad0"></div></li>
        <li><div class="dmplayer" data-video="x7tgad0"></div></li>
    </ul>
</div>

jQuery:

$(window).on('load', function(){
    
    $(".dmplayer").each(function(index, element){
        var $this = $(this);
        var video = $(this).data('video');
        var player = new DM.player(this,{ 
            video: video, 
            width: "100%", 
            height: "100%", 
        });
        player.addEventListener('start', function() {
            $('.flexslider').flexslider("pause");
        });
    });
    
});

启动嵌入式 Dailymotion 视频时暂停滑块

Pause slider when embedded Dailymotion video is started

javascript

jquery

dailymotion-api