Question

我有自举旋转木马，包括图像和视频，它工作正常。但是当我们转到下一张幻灯片时，目前正在播放活动幻灯片中的视频应该暂停。

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

非常感谢任何帮助。

谢谢！

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

DEMO

Answer 1

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

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

更多视频活动here

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

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

查看更新后的jsfiddle

Answer 2

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

我这样解决了：

<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来抓取视频，这样就可以正常工作。

Answer 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

示例代码段

// 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

bootstrap carousel - 滑动时暂停html视频

3 个答案: