【问题标题】:bootstrap carousel - pause the html video while sliding引导轮播 - 滑动时暂停 html 视频
【发布时间】:2016-05-23 09:12:06
【问题描述】:

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

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

非常感谢任何帮助。

谢谢!!

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

DEMO

【问题讨论】:

  • 我使用的是 html5 视频标签而不是 iframe
  • @Praveen Kumar 根据上述评论,它不是重复的
  • @user3932810 打开它。

标签: javascript html css twitter-bootstrap-3 carousel


【解决方案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 来实现这一点:

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

    示例 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代码,请参考我在另一个线程中的回答:

    【讨论】:

      猜你喜欢
      • 2015-06-18
      • 2013-04-13
      • 1970-01-01
      • 2013-08-16
      • 1970-01-01
      • 2017-10-16
      • 2021-07-17
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多