logo标签列表

Bootstrap 走马灯 - 在滑动时暂停 HTML 视频

javascripthtmlcsstwitter-bootstrap-3carousel
4
我有一个包含图像和视频的Bootstrap走马灯，它很好用。但是当我们切换到下一张幻灯片时，当前正在播放的活动幻灯片中的视频应该被暂停。现在，即使移动到下一张幻灯片，视频仍在播放。
非常感谢您的帮助！
谢谢！
$('#myCarousel').carousel({
  interval: 3000
});

DEMO

我正在使用HTML5的视频标签而不是iframe。 - user3932810
@Praveen Kumar，根据上面的评论，这不是重复的。 - Morpheus
@user3932810 打开它了。 - Praveen Kumar Purushothaman
3个回答
4
您可以在 HTML5 视频上调用暂停事件： document.getElementById('someelement').pause() 更多视频事件请点击此处。
回答您的问题 - 您可以使用 slide.bs.carousel 事件结合上述代码，在 slide 事件发生时停止视频播放：
$('#myCarousel').carousel({
  interval: 3000
}).on('slide.bs.carousel', function () {
  document.getElementById('player').pause();
});

请查看更新后的 jsfiddle。
很高兴能帮到你 :) - Morpheus
你可以通过调用相同的代码并传入唯一的视频ID来暂停它们中的每一个。或者简单地给所有的视频添加相同的CSS类，并在循环中处理暂停操作。 - Morpheus
1
最好的方法是使用自动播放来启动第一个，然后您可以使用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获取视频，这总是有效的。
0
如果您正在使用Youtube iframe视频，则可以通过监听轮播幻灯片事件slide.bs.carousel来实现此目的：

那么如果发生这个事件，我会使用 JavaScript 中的 player.pauseVideo() 功能来控制 Youtube iframe API：

示例代码片段：

// 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 代码，请参阅我在另一个线程中的答案：

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接