Question

我似乎找不到在flexslider循环中自动播放（开始/停止）多个视频（mp4）的解决方案。我还使用数据持续时间来设置某些幻灯片的持续时间。影片会否决这个属性。

我想我已经接近了，但我仍在学习Javascript。

我尝试了其他一些解决方案，这些解决方案将我带到了当前代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      id="wbtv-styles-css"
      href="https://kmthc.webbird.tv/wp-content/plugins/webbird-tv/css/styles.css?ver=4.9.10"
      type="text/css"
      media="all"
    />
    <link
      rel="stylesheet"
      id="webbirdtv-styles-css"
      href="https://kmthc.webbird.tv/wp-content/themes/webbird-tv/css/styles.css?ver=4.9.10"
      type="text/css"
      media="all"
    />
    <title>Document</title>
  </head>
  <body>
    <div id="globalSlider" class="global-slider" data-animation="slide">
      <div class="slides">
        <!-- Slide 1 -->
        <div class="slide" data-duration="10000">
          <div class="slide-image-only">
            <div
              class="image"
              style="background-image: url(https://kmthc.webbird.tv/wp-content/uploads/sites/6/2019/05/FC_24Mei_L_TV.png    )"
            ></div>
          </div>
        </div>
        <!-- Slide 2 -->
        <div class="slide" data-duration="10000">
          <div class="slide-video">
            <video
              onplay="pauseslider()"
              onpause="playslider()"
              onended="resumeslider()"
              controls=""
              preload="none"
              autoplay=""
              poster=""
              muted=""
            >
              <source
                src="https://kmthc.webbird.tv/wp-content/uploads/sites/6/2017/08/Mechelen_Wealth_32986.mp4"
                type="video/mp4"
              />
            </video>
          </div>
        </div>
        <!-- Slide 3 -->
        <div class="slide flex-active-slide" data-duration="10000">
          <div class="slide-image-only">
            <div
              class="image"
              style="background-image: url(https://kmthc.webbird.tv/wp-content/uploads/sites/6/2019/05/Zomertrainingen2_L_TV.png    )"
            ></div>
          </div>
        </div>
        <!-- Slide 4-->
        <div class="slide" data-duration="10000">
          <div class="slide-video">
            <video
              onplay="pauseslider()"
              onpause="playslider()"
              onended="resumeslider()"
              controls=""
              preload="none"
              autoplay=""
              poster=""
              muted=""
            >
              <source
                src="https://kmthc.webbird.tv/wp-content/uploads/sites/6/2017/08/Mechelen_PlusZichtrekening_32986.mp4"
                type="video/mp4"
              />
            </video>
          </div>
        </div>
      </div>
    </div>
    <!-- Flexslider -->
    <script
      type="text/javascript"
      src="https://kmthc.webbird.tv/wp-includes/js/jquery/jquery.js?ver=1.12.4"
    ></script>
    <script
      type="text/javascript"
      src="https://kmthc.webbird.tv/wp-content/plugins/webbird-tv/js/modernizr.js?ver=4.9.10"
    ></script>
    <script
      type="text/javascript"
      src="https://kmthc.webbird.tv/wp-content/plugins/webbird-tv/js/jquery.flexslider-min.js?ver=4.9.10"
    ></script>
    <script type="text/javascript">
      jQuery(window).load(function() {
        jQuery("#globalSlider").flexslider({
          selector: ".slides > .slide",
          slideshow: true,
          //slideshowSpeed: 2000,
          animation: Modernizr.touch ? "fade" : "fade",
          animationSpeed: Modernizr.touch ? 400 : 700,
          animationLoop: true,
          //controlNav: false,
          //directionNav: false,
          direction: "horizontal",
          pauseOnAction: false,
          initDelay: 0,
          //useCSS: true,
          video: true,
          start: function() {
            jQuery("#loading-screen").addClass("transition");
            jQuery("#loading-screen").hide();
          },
          before: function() {
            jQuery("video").each(function() {
              jQuery(this)
                .get(0)
                .load();
            });
          },
          after: function(slider) {
            slider.stop();
            slider.vars.slideshowSpeed = jQuery(
              slider.slides[slider.currentSlide]
            ).data("duration");
            slider.play();
          }
        });
        function pauseslider() {
          jQuery("#globalSlider").flexslider("pause");
        }
        function playslider() {
          jQuery("#globalSlider").flexslider("play");
        }
        function resumeslider() {
          jQuery("#globalSlider").flexslider("next");
          jQuery("#globalSlider").flexslider("play");
        }
      });
    </script>
  </body>
</html>

在flexslider循环中自动播放（开始/停止）多个视频（mp4）

0 个答案: