如何修复一次播放多个视频？

Question

我在一个站点上工作，我必须在其中放置一些视频。这些视频位于一个区域中，并除以div。问题是，如果我将视频滑动到下一个视频，然后不要暂停前一个，他们正在同时玩。我该如何解决？ 如果有帮助，请访问以下站点链接：Site。 这是html代码：

<section class="page-section bg-dark bg-dark-alfa-90 fullwidth-slider" id='opinions' data-background="images/Геля/студия01.jpg">
   <div>
      <div class="container relative">
         <div class="row">
            <div class="col-md-8 col-md-offset-2 align-center">
               <!-- Section Icon -->
               <!-- Section Title -->
               <h1 class="small-title font-alt">Отзывы</h1>
               <video controls>
                  <source src="video/Gruppa1.mp4" type="video/mp4">
                  <iframe width="560" height="560" src="video/Gruppa1.mp4" frameborder="0" allowfullscreen></iframe>
               </video>
               <blockquote class="testimonial white">
                  <footer class="testimonial-author">
                     <strong>1-я подпись</strong>
                  </footer>
               </blockquote>
            </div>
         </div>
      </div>
   </div>
   <div>
      <div class="container relative">
         <div class="row">
            <div class="col-md-8 col-md-offset-2 align-center">
               <!-- Section Icon -->
               <!-- Section Title -->
               <h1 class="small-title font-alt">Отзывы</h1>
               <video controls>
                  <source src="video/Otziv1.mp4" type="video/mp4">
                  <iframe width="560" height="560" src="video/Otziv1.mp4" frameborder="0" allowfullscreen></iframe>
               </video>
               <blockquote class="testimonial white">
                  <footer class="testimonial-author">
                     <strong>подпись</strong>
                  </footer>
               </blockquote>
            </div>
         </div>
      </div>
   </div>
   <div>
      <div class="container relative">
         <div class="row">
            <div class="col-md-8 col-md-offset-2 align-center">
               <!-- Section Icon -->
               <!-- Section Title -->
               <h1 class="small-title font-alt">Отзывы</h1>
               <video controls>
                  <source src="video/Otziv2.mp4" type="video/mp4">
                  <iframe width="560" height="560" src="video/Otziv2.mp4" frameborder="0" allowfullscreen></iframe>
               </video>
               <blockquote class="testimonial white">
                  <footer class="testimonial-author">
                     <strong>подпись</strong>
                  </footer>
               </blockquote>
            </div>
         </div>
      </div>
   </div>
   <div>
      <div class="container relative">
         <div class="row">
            <div class="col-md-8 col-md-offset-2 align-center">
               <!-- Section Icon -->
               <!-- Section Title -->
               <h1 class="small-title font-alt">Отзывы</h1>
               <video controls>
                  <source src="video/Otziv3.mp4" type="video/mp4">
                  <iframe width="560" height="560" src="video/Otziv3.mp4" frameborder="0" allowfullscreen></iframe>
               </video>
               <blockquote class="testimonial white">
                  <footer class="testimonial-author">
                     <strong>подпись</strong>
                  </footer>
               </blockquote>
            </div>
         </div>
      </div>
   </div>
   <div>
      <div class="container relative">
         <div class="row">
            <div class="col-md-8 col-md-offset-2 align-center">
               <!-- Section Icon -->
               <!-- Section Title -->
               <h1 class="small-title font-alt">Отзывы</h1>
               <video controls>
                  <source src="video/Otziv4.mp4" type="video/mp4">
                  <iframe width="560" height="560" src="video/Otziv4.mp4" frameborder="0" allowfullscreen></iframe>
               </video>
               <blockquote class="testimonial white">
                  <footer class="testimonial-author">
                     <strong>подпись</strong>
                  </footer>
               </blockquote>
            </div>
         </div>
      </div>
   </div>
   <div>
      <div class="container relative">
         <div class="row">
            <div class="col-md-8 col-md-offset-2 align-center">
               <!-- Section Icon -->
               <!-- Section Title -->
               <h1 class="small-title font-alt">Отзывы</h1>
               <video controls>
                  <source src="video/Otziv5.mp4" type="video/mp4">
                  <iframe width="560" height="560" src="video/Otziv5.mp4" frameborder="0" allowfullscreen></iframe>
               </video>
               <blockquote class="testimonial white">
                  <footer class="testimonial-author">
                     <strong>подпись</strong>
                  </footer>
               </blockquote>
            </div>
         </div>
      </div>
   </div>
</section>