javascript - 用户滚动后如何防止 2 个视频同时工作

Question

我正在设置一个光滑的 slider ，现在点击下一个 slider 的选项(只需按下一个视频)将播放下一个视频。问题是当用户已经在观看新视频时，我如何停止视频(以防用户没有看完上一个视频)。

我想也许它必须对 wistia.com api 做些什么，它可能有助于解决这个问题。 (我在那里托管我的视频)。

我的 html:

            <div class="container-fluid">
                <div class="col-12 mx-auto text-center">
                    <div class="center slider">
                        <div>
                            <div class="video">
                                <script src="https://fast.wistia.com/embed/medias/hmtobx4al7.jsonp" async></script>
                                <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
                                <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
                                    <div class="wistia_responsive_wrapper"
                                        style="height:100%;left:0;position:absolute;top:0;width:100%;">
                                        <div class="wistia_embed wistia_async_hmtobx4al7 videoFoam=true"
                                            style="height:100%;position:relative;width:100%">
                                            <div class="wistia_swatch"
                                                style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
                                                <img src="https://fast.wistia.com/embed/medias/hmtobx4al7/swatch"
                                                    style="filter:blur(5px);height:100%;object-fit:contain;width:100%;"
                                                    alt="" onload="this.parentNode.style.opacity=1;" /></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <span class="mentor-name">Anthony Morrison</span> <br>
                            <span class="mentor-quote">“Igor has done a phenomenal job as a JV partner. He has a higher
                                conversion rate than any JV that promoted our webinar.”</span>
                        </div>

                        <div>
                            <div class="video">
                                <script src="https://fast.wistia.com/embed/medias/55ilr5u699.jsonp" async></script>
                                <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
                                <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
                                    <div class="wistia_responsive_wrapper"
                                        style="height:100%;left:0;position:absolute;top:0;width:100%;">
                                        <div class="wistia_embed wistia_async_55ilr5u699 videoFoam=true"
                                            style="height:100%;position:relative;width:100%">
                                            <div class="wistia_swatch"
                                                style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
                                                <img src="https://fast.wistia.com/embed/medias/55ilr5u699/swatch"
                                                    style="filter:blur(5px);height:100%;object-fit:contain;width:100%;"
                                                    alt="" onload="this.parentNode.style.opacity=1;" /></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <span class="mentor-name">michael cheney</span> <br>
                            <span class="mentor-quote">“Igor's a super big player. He doesn't make a big song and dance
                                about it, but trust me, if you want big numbers - talk to Igor!”</span>
                        </div>
                        <div>
                            <div class="video">
                                <script src="https://fast.wistia.com/embed/medias/r1ru4nt171.jsonp" async></script>
                                <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
                                <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
                                    <div class="wistia_responsive_wrapper"
                                        style="height:100%;left:0;position:absolute;top:0;width:100%;">
                                        <div class="wistia_embed wistia_async_r1ru4nt171 videoFoam=true"
                                            style="height:100%;position:relative;width:100%">
                                            <div class="wistia_swatch"
                                                style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
                                                <img src="https://fast.wistia.com/embed/medias/r1ru4nt171/swatch"
                                                    style="filter:blur(5px);height:100%;object-fit:contain;width:100%;"
                                                    alt="" onload="this.parentNode.style.opacity=1;" /></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <span class="mentor-name">Ron Douglas</span> <br>
                            <span class="mentor-quote">“Cease every opportunity to work with Igor. He's one of the top
                                guys in list building.”</span>
                        </div>

                        <div>
                            <div class="video">
                                <script src="https://fast.wistia.com/embed/medias/n1u4w38ibb.jsonp" async></script>
                                <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
                                <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
                                    <div class="wistia_responsive_wrapper"
                                        style="height:100%;left:0;position:absolute;top:0;width:100%;">
                                        <div class="wistia_embed wistia_async_n1u4w38ibb videoFoam=true"
                                            style="height:100%;position:relative;width:100%">
                                            <div class="wistia_swatch"
                                                style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
                                                <img src="https://fast.wistia.com/embed/medias/n1u4w38ibb/swatch"
                                                    style="filter:blur(5px);height:100%;object-fit:contain;width:100%;"
                                                    alt="" onload="this.parentNode.style.opacity=1;" /></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <span class="mentor-name">John Crestani</span> <br>
                            <span class="mentor-quote">“If you are not working with Igor Kheifets, you are seriously
                                missing out.”</span>
                        </div>

                        <div>
                            <div class="video">
                                <script src="https://fast.wistia.com/embed/medias/dkbrixea1u.jsonp" async></script>
                                <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
                                <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
                                    <div class="wistia_responsive_wrapper"
                                        style="height:100%;left:0;position:absolute;top:0;width:100%;">
                                        <div class="wistia_embed wistia_async_dkbrixea1u videoFoam=true"
                                            style="height:100%;position:relative;width:100%">
                                            <div class="wistia_swatch"
                                                style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
                                                <img src="https://fast.wistia.com/embed/medias/dkbrixea1u/swatch"
                                                    style="filter:blur(5px);height:100%;object-fit:contain;width:100%;"
                                                    alt="" onload="this.parentNode.style.opacity=1;" /></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <span class="mentor-name">Matt Bacak</span> <br>
                            <span class="mentor-quote">“Igor has quickly risen to become one of the greatest list
                                builders I've ever met.”</span>
                        </div>

                        <div>
                            <div class="video">
                                <script src="https://fast.wistia.com/embed/medias/i2cnznqtvz.jsonp" async></script>
                                <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
                                <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
                                    <div class="wistia_responsive_wrapper"
                                        style="height:100%;left:0;position:absolute;top:0;width:100%;">
                                        <div class="wistia_embed wistia_async_i2cnznqtvz videoFoam=true"
                                            style="height:100%;position:relative;width:100%">
                                            <div class="wistia_swatch"
                                                style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
                                                <img src="https://fast.wistia.com/embed/medias/i2cnznqtvz/swatch"
                                                    style="filter:blur(5px);height:100%;object-fit:contain;width:100%;"
                                                    alt="" onload="this.parentNode.style.opacity=1;" /></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <span class="mentor-name">Dean Holland</span> <br>
                            <span class="mentor-quote">“I recommend all my clients and customers to work with Igor. Igor
                                goes above and beyond for his customers.”</span>
                        </div>
                    </div>
                </div>
            </div>

我巧妙的设置:

        //    Testimonial Slider
        $('.slider').slick({
            infinite: true,
            centerMode: true,
            centerPadding: '12%',
            slidesToShow: 3,
            slidesToScroll: 1,
            arrows: false,
            speed: 500,
            autoplay: true,
            autoplaySpeed: 8000,
            focusOnSelect: true,
            waitForAnimate: true,
            responsive: [{
                breakpoint: 992,
                settings: {
                    slidesToShow: 1
                }

            }]
        });

        $('.slider').click(function () {
            $(".slider").slick('slickNext').focus();
            $(".video").trigger('focus')
        });

        $('.video').click(function () {
            $(".video").trigger('focus')
        });

Answer 1

最近我不得不处理同样的问题。带有视频元素的 Slick slider ，应在幻灯片切换后开始并在幻灯片切换前停止。

首先是一些基础知识，在大多数现代浏览器中，您无法在没有用户交互的情况下自动播放有声视频。如果视频有声音，即使是 javascript .play() 方法也将不起作用。

要实现您的视频将在幻灯片切换时播放，必须将它们静音。有一些针对此问题的解决方案和解决方法。

与其使用 .on(click) 处理程序，不如在更改前后监听 slick 事件。添加视频控制并让 slick 处理事件

$( document ).ready(function() {
  VideoController.init();

  var $slider = $('.slider');
  $slider.on("beforeChange", function (
    event,
    slick,
    currentSlide,
    nextSlide
  ) {
    var $currentSlide = $(slick.$slides[currentSlide]);

    VideoController.stopVideo($currentSlide);
  });

  $slider.on("afterChange", function (event, slick, currentSlide) {
    var $currentSlide = $(slick.$slides[currentSlide]);

    VideoController.playVideo($currentSlide);
  });
});

之后，您需要让您的视频 Controller 完成剩下的工作。Wistia 提供了一个 JS 库，您可以使用它，但我无法提供如何使用它。

我可以提供的解决方案无需额外的 Controller 即可使用发布消息来控制视频元素。

    var VideoController = (function () {

      function init() {
      }

    // POST commands to YouTube or Vimeo API
      function postMessageToPlayer(player, command) {
        console.log('postMessageToPlayer');

        if (player == null || command == null) return;
        player.contentWindow.postMessage(JSON.stringify(command), "*");
    }

    function playVideo($ancestor) {

      console.log('playVideo');
      var player, video;

      if ($ancestor.find('iframe').length) {
        console.log('found Video');
        player = $ancestor.find('iframe').get(0);

        if ($('html').hasClass('is-muted')) {
          postMessageToPlayer(player, {
            "event": "command",
            "func": "mute"
          });
        } else {
          postMessageToPlayer(player, {
            "event": "command",
            "func": "unMute"
        });
      }
      postMessageToPlayer(player, {
        "event": "command",
        "func": "playVideo"
      });
      } else if ($ancestor.find('video').length) {
        video = $ancestor.find("video").get(0);
        video.play();
      } else {
      console.log('no Video');
      }
    }

    // Stops video and will play from start on resume
      function stopVideo($ancestor) {

        console.log('stopVideo');
        var player, video;

        if ($ancestor.find("iframe").length) {
          player = $ancestor.find("iframe").get(0);
          postMessageToPlayer(player, {
           "event": "command",
           "func": "stopVideo"
          });
        } else if ($ancestor.find("video").length) {
          video = $ancestor.find("video").get(0);
          video.pause();
    // Check if the Video is loade, ohterwise it will break your js espacially in ie11
        if (video.readyState === 4) { 
          video.currentTime = 0;
        }
      }
    }

    // pauses video to resume
      function pauseVideo($ancestor) {

       console.log('pauseVideo');
       var player, video;

       if ($ancestor.find("iframe").length) {
         player = $ancestor.find("iframe").get(0);
         postMessageToPlayer(player, {
           "event": "command",
           "func": "pauseVideo"
          });
        } else if ($ancestor.find("video").length) {
          video = $ancestor.find("video").get(0);
          video.pause();
        }
      }
      return {
        init: init,
        postMessageToPlayer: postMessageToPlayer,
        playVideo: playVideo,
        stopVideo: stopVideo,
        pauseVideo: pauseVideo
      }
    })();

在每张幻灯片中搜索视频元素，并根据其类型控制播放。此视频 Controller 向 iframe 发送了一条消息，以启动嵌入式播放器的播放或 html 视频的 .play() JS 方法。

您需要检查 post 方法是否适用于您的 wistia。我使用 post json 方法在他们的文档中找到了一些关于此的内容，但我没有找到播放或停止命令。不确定这个命令是否正确。

如果没有，您必须使用 wistia api.js 来控制您的视频播放并替换视频 Controller 方法中的代码。

所有学分转到https://codepen.io/digistate/pen/MvapbE不幸的是，我没有堆栈帖子的原始链接了