开始嵌入 Dailymotion 视频时暂停滑块答案

【问题标题】：Pause slider when embedded Dailymotion video is started开始嵌入 Dailymotion 视频时暂停滑块
【发布时间】：2020-10-31 00:57:45
【问题描述】：

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

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

如何创建一个侦听器，以便在任何嵌入视频开始后立即停止滑块？

【问题讨论】：

标签： javascript jquery dailymotion-api

【解决方案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 是不可能的，因为您无法与播放器通信。

【讨论】：

【解决方案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");
        });
    });
    
});

【讨论】：