如何在猫头鹰旋转木马中运行自动播放视频，如果它有视频？

Question

我使用一个猫头鹰旋转木马，我想自动播放的视频，当我达到该幻灯片，有一个视频。猫头鹰旋转木马视频 自动播放不成功在我的项目中进行测试，但我的代码和其他代码都不工作，而且我在每张幻灯片上都有一个textarea，当我在textarea中写注释时，我想让幻灯片不换到下一张幻灯片，我怎么能做到呢？

  <div class="owl-carousel  owl-theme slideHeighlight">
              <div class="item">
                 <figure class="fig-highlight">
                    <img src="Images/high1.jpg" />
                       <figcaption>
                       <div class="highlight-cm">
                          <textarea class="txtarea-cm" rows="1" placeholder="send message"></textarea><button type="submit" class="btn btn-send btnhighlight" >send</button>
                       </div>
                    </figcaption>
                 </figure>
              </div>
              <div class="item">
                 <figure class="fig-highlight">
                    <img src="Images/high2.jpg" />
                    <figcaption>
                       <div class="highlight-cm">
                          <textarea class="txtarea-cm" rows="1" placeholder="send message"></textarea><button type="submit" class="btn btn-send btnhighlight" >send</button>
                       </div>
                    </figcaption>
                 </figure>
              </div>
              <div class="item item-video">
                 <figure class="fig-highlight">
                    <video>
                       <source src="Images/video2.mp4" type="video/mp4" />
                    </video>
                  <figcaption>
                       <div class="highlight-cm">
                          <textarea class="txtarea-cm" rows="1" placeholder="send message"></textarea><button type="submit" class="btn btn-send btnhighlight" >send</button>
                       </div>
                    </figcaption>
                 </figure>
              </div>
           </div>

我的脚本。

                $('.slideHeighlight').owlCarousel({
  rtl: true,
  margin: 10,
  nav: true,
  loop: false,
  autoplay: true,
  singleItem: true,
  video: true,
  responsive: {
     0: {
        items:1
     },
     567: {
        items:1
     },
     600: {
        items:1
     },
     900: {
        items: 1
     }

  }
   });

        $(document).on('click', '.slideHeighlight', function () {
       if ($(this).next().hasClass('item-video')) {
        $(this).find(".fig-highlight video").play();
       }
  });

Answer 1

你需要这样的东西

演示

 owl.on('changed.owl.carousel', function(event) {
   $(".owl-item video").each(function(index, value) {
     this.pause();
     this.currentTime = 0;

   });
   $(".owl-item.active video").each(function(index, value) {
     this.play();
   });
 })

如果不行的话，你可以试试这个。

$(".owl-item").each(function(index, value) {
     this.pause();
     this.currentTime = 0;
      this.play();
});

Answer 2

我发现浏览器有自动播放视频和声音的权限，所以我把按钮播放的播放