引导轮播 - 滑动时暂停 html 视频

Posted 2023-03-06

【中文标题】引导轮播 - 滑动时暂停 html 视频

【英文标题】：bootstrap carousel - pause the html video while sliding

【发布时间】：2016-05-23 09:12:06

【问题描述】：

我有包含图像和视频的引导轮播，它运行良好。但是当我们移到下一张幻灯片时，当前正在播放的幻灯片中的视频应该暂停。

现在，即使移到下一张幻灯片，视频仍在播放。

非常感谢任何帮助。

谢谢！！

$('#myCarousel').carousel(
  interval: 3000
);

DEMO

【问题讨论】：

我使用的是 html5 视频标签而不是 iframe

@Praveen Kumar 根据上述评论，它不是重复的

@user3932810 打开它。

【参考方案1】：

您可以在 html5 视频上调用暂停事件：

document.getElementById('someelement').pause()

更多视频活动here

回答您的问题 - 当slide 事件发生时，您可以使用slide.bs.carousel 事件结合上述行来停止视频：

$('#myCarousel').carousel(
  interval: 3000
).on('slide.bs.carousel', function () 
  document.getElementById('player').pause();
);

查看更新后的jsfiddle

【讨论】：

很高兴它帮助了你:)

您可以通过调用具有唯一视频 ID 的相同代码来暂停其中的每一个。或者简单地为所有视频提供相同的 css 类并循环处理暂停。

【参考方案2】：

最好的方法是使用自动播放启动第一个，您可以使用 jquery 启动和停止它们。我有几个轮播项目，其中只有前 3 个有视频。

我是这样解决的：

<script language="javascript" type="text/javascript">
        $(document).ready(function () 
            $('.carousel').carousel( interval: 8000 )
            $('#myCarousel').on('slide.bs.carousel', function (args) 
                var videoList = document.getElementsByTagName("video");
                switch (args.from) 
                    case 0:
                        videoList[0].pause();
                        break;
                    case 1:
                        videoList[1].pause();
                        break;
                    case 2:
                        videoList[2].pause();
                        break;
                
                switch (args.to) 
                    case 0:
                        videoList[0].play();

                        break;
                    case 1:
                        videoList[1].play();
                        break;
                    case 2:
                        videoList[2].play();
                        break;
                
            )

        );
    </script>

这假设您的 DOM 中的视频是按照轮播的顺序排列的，并且上面没有视频，因为您有一个案例，您可以通过它的 ID 抓取视频，这总是有效的。

【参考方案3】：

如果您使用的是 Youtube iframe 视频，那么我通过监听轮播幻灯片事件slide.bs.carousel 来实现这一点：

https://getbootstrap.com/docs/4.4/components/carousel/#events

如果发生此事件，我将使用带有 JavaScript 的 Youtube iframe API 的 player.pauseVideo() 功能：

https://developers.google.com/youtube/iframe_api_reference#Playback_controls

示例 sn-p：

// When a slide occurs, pause the current iframe video that is playing
// player.pauseVideo():Void - Pauses the currently playing video.
// Reference: https://developers.google.com/youtube/iframe_api_reference#Playback_controls
$('#moviesCarousel').on('slide.bs.carousel', function(event) 
    // The variable "players" contain each Youtube Player for each iframe video
    // Reference: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
    // event.from - The index of the current video (before the slide occurs)
    //            - It is also the index of the corresponding player for the current video
    // Reference: https://getbootstrap.com/docs/4.4/components/carousel/#events
    players[event.from].pauseVideo();
);

地点：

event.from对应幻灯片发生前轮播视频项的索引 players 是 YT.Player 实例的列表，其中每个实例控制 1 个特定的 iframe Youtube 视频（因此轮播视频列表中有 1 个视频项）。这假设轮播视频的顺序与其对应的 YT.Player 实例的顺序相同

完整的工作html代码，请参考我在另一个线程中的回答：

Pause Bootstrap carousel when playing Youtube video