1

我正在设置一个光滑的滑块，现在单击到下一个滑块的选项（只需按下下一个视频）将播放下一个视频。问题是当用户已经在观看新视频时，我如何才能停止视频（以防用户没有完成观看前一个视频）。

我想也许它与 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.”&lt;/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!”&lt;/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.”&lt;/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.”&lt;/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.”&lt;/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.”&lt;/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')
        });
4

2 回答 2

2

最近我不得不处理同样的问题。带有视频元素的 Slick 滑块，它应该在幻灯片更改后开始，在幻灯片更改之前停止。

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

为了实现您的视频将在幻灯片更改时播放，它们必须被静音。针对这个问题有一些解决方案和变通方法。

而不是使用.on(click)处理程序，您应该在更改之前和之后收听光滑的事件。添加视频控制并让 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);
  });
});

之后，您需要让您的视频控制器来完成其余的工作。Wistia 提供了一个 JS 库，您可以使用它，但我无法提供如何做到这一点。

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

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

每张幻灯片都会搜索视频元素，并根据其类型控制播放。此视频控制器向 iframe 发送消息，以开始播放嵌入式播放器或 html 视频的 .play() JS 方法。

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

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

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

于 2019-04-30T10:13:53.900 回答
0

我最终自己想通了，我使用了 wistia API 网站，如果你想得到你的结果，建议大家去看看。

感谢 Florian de Ville 先生的支持，尽管我最终不必使用您的代码。

所以我的代码是：

        window._wq = window._wq || [];
        _wq.push({
            id: "_all",
            onReady: function (video) {
                video.bind("play", function () {
                    $('.slider').slick('slickPause');
                    var allVideos = Wistia.api.all();
                    for (var i = 0; i < allVideos.length; i++) {
                        if (allVideos[i].hashedId() !== video.hashedId()) {
                            allVideos[i].pause();
                        }
                    }
                });

                video.bind("pause", function () {
                    $('.slider').slick('slickPlay');
                });

            }
        });

它有什么作用？：防止网站上的所有视频同时播放，只要用户按下“播放”[在视频播放器上]，滑块就会停止移动，每当用户按下“暂停”时" 滑块将继续运行。

于 2019-05-01T13:03:12.297 回答