7

我有多张带有视频和图像的幻灯片。Carousel 设置为加载时自动播放。但是当有人播放视频并将鼠标移出一侧时,它会一直滑动(如预期的那样)。

如何跟踪视频的播放和暂停时间?我搜索了 Stack Overflow,但没有找到类似的问题。

站点管理员稍后将添加视频,以便它们可以是 iframe 或 html5 视频。所以,我需要一个对两者都适用的解决方案。

4

3 回答 3

7

这对我来说可以在播放原生 HTML5 视频时暂停 Bootstrap 轮播,并在视频暂停或播放完毕时再次播放。我是一个完全的 JS 新手,但我四处搜索并将一些东西串在一起。我可能犯了一个错误(可能),但它对我有用。

我不是通过 ID 调用视频,因为我希望该操作适用于轮播中播放的任何视频。我有几个在我的情况下。

请注意更改轮播的 ID 以匹配您的 ID。

<script>
$('video').on('play', function (e) {
    $("#portfolioCarousel").carousel('pause');
});
$('video').on('stop pause ended', function (e) {
    $("#portfolioCarousel").carousel();
});
</script>
于 2015-12-30T20:41:53.977 回答
2

$("#myCarousel").carousel('暂停'); 停止它 $("#myCarousel").carousel(); 再次启动它 http://www.w3.org/2010/05/video/mediaevents.html 有很多事件你应该再次启动它甚至暂停,结束的事件被触发并暂停播放。

对于 youtube,我不确定您如何集成它,但他们确实有 js api,因此 https://developers.google.com/youtube/js_api_reference#Events 将向您显示您可以收听的事件,并且您可以像使用 html5 视频一样做

于 2013-06-21T18:01:07.787 回答
2

为了让 Youtube iframe 视频在播放视频时触发轮播的滑动暂停,您需要有一个关于视频是否被视为“正在播放”的指示器。您可以通过使用带有 JavaScript 的 Youtube iframe API 的播放器功能来实现这一点。

监听涉及这些状态的事件:

  • YT.PlayerState.PLAYING
  • YT.PlayerState.BUFFERING

然后控制 Bootstrap 轮播滑过.carousel('pause')

为了能够监听此类事件,您可以在 JavaScript 中添加一个名为“onPlayerStateChange”的函数(如 Youtube iframe API 中所述):

function onPlayerStateChange(event) // triggered everytime ANY iframe video player among the "players" list is played, paused, ended, etc.
{
    // Check if any iframe video is being played (or is currently buffering to be played)
    // Reference: https://developers.google.com/youtube/iframe_api_reference#Events
    if (event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING)
    {
        // If any player has been detected to be currently playing or buffering, pause the carousel from sliding
        // .carousel('pause') - Stops the carousel from cycling through items.
        // Reference: https://getbootstrap.com/docs/4.4/components/carousel/#methods
        $('#moviesCarousel').carousel('pause');
    }
    else
    {
        // If there are no currently playing nor buffering videos, resume the sliding of the carousel
        // This means that once the current video is in a state that is not playing (aside from buffering so either it was paused, or has ended, or wasn't totally played), then the carousel would now resume sliding
        $('#moviesCarousel').carousel();
    }
}

作为参考,这里是完整的工作 HTML(直接工作,无需修改):

<!doctype html>
<html lang="en">
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
    <!-- Buttons for manually sliding the carousel -->
    <div class="btn-group col-lg-8" role="group" aria-label="Carousel controls">
        <button id="prevMovie" type="button" class="btn btn-danger">Prev</button>
        <button id="nextMovie" type="button" class="btn btn-info">Next</button>
    </div>

    <!-- The carousel containing the Youtube iframe videos -->
    <!-- Remember to add the ?enablejsapi=1 in the Youtube embed link as described in: -->
    <!-- https://developers.google.com/youtube/iframe_api_reference#Example_Video_Player_Constructors -->
    <div id="moviesCarousel" class="carousel slide col-lg-8" data-ride="carousel" data-interval="2000">
        <div class="carousel-inner embed-responsive embed-responsive-16by9"> <!-- embed is used for responsive size regardless of device -->
            <div class="carousel-item embed-responsive-item active">
                <iframe id="katniss" src="https://www.youtube.com/embed/v98Rh9qzmPs?enablejsapi=1" allowfullscreen></iframe>
            </div>
            <div class="carousel-item embed-responsive-item">
                <iframe id="rancho" src="https://www.youtube.com/embed/-MlkASchodc?enablejsapi=1" allowfullscreen></iframe>
            </div>
            <div class="carousel-item embed-responsive-item">
                <iframe id="logan" src="https://www.youtube.com/embed/UgJr0bNmTL8?enablejsapi=1" allowfullscreen></iframe>
            </div>
        </div>
    </div>

    <!-- jQuery first, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <script>
        $(document).ready(function()
        {
            // Slide the carousel upon button click
            // .carousel('prev') - Cycles to the previous item
            // .carousel('next') - Cycles to the next item.
            // Reference: https://getbootstrap.com/docs/4.4/components/carousel/#methods
            $('#prevMovie').on('click', function() {
                $('#moviesCarousel').carousel('prev');
            });
            $('#nextMovie').on('click', function() {
                $('#moviesCarousel').carousel('next');
            });

            // 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();
            });
        });

        // Start of snippet from: https://developers.google.com/youtube/iframe_api_reference
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        var players = []; // would contain 1 player for each iframe video
        function onYouTubeIframeAPIReady()
        {
            var allMovieIframes = document.getElementById("moviesCarousel").getElementsByTagName('iframe');
            for (currentIFrame of allMovieIframes)
            {
                players.push(new YT.Player(
                    currentIFrame.id, // the target iframe video, here it is  either katniss, rancho, or logan
                    { events: { 'onStateChange': onPlayerStateChange } }
                ));
            }
        }
        function onPlayerStateChange(event) // triggered everytime ANY iframe video player among the "players" list is played, paused, ended, etc.
        {
            // Check if any iframe video is being played (or is currently buffering to be played)
            // Reference: https://developers.google.com/youtube/iframe_api_reference#Events
            if (event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING)
            {
                // If any player has been detected to be currently playing or buffering, pause the carousel from sliding
                // .carousel('pause') - Stops the carousel from cycling through items.
                // Reference: https://getbootstrap.com/docs/4.4/components/carousel/#methods
                $('#moviesCarousel').carousel('pause');
            }
            else
            {
                // If there are no currently playing nor buffering videos, resume the sliding of the carousel
                // This means that once the current video is in a state that is not playing (aside from buffering so either it was paused, or has ended, or wasn't totally played), then the carousel would now resume sliding
                $('#moviesCarousel').carousel();
            }
        }
        // End of snippet from Youtube iframe API
    </script>

</body>
</html>
于 2020-05-07T07:54:36.667 回答