LightGallery 所有 html5 个视频同时播放

Question

我已经使用 lightGallery 插件播放 youtube、vimeo 和 html5 视频。当用户点击图片时，视频应该会自动播放。请检查 Demo，它工作正常。但问题是如果同时播放两个 html5 视频。 Youtube 视频不是那样的。当您单击图像时，将一次播放一个 youtube 视频，当您滑动到下一个视频时，上一个视频将暂停并播放新视频。但是 html5 所有视频都在同时播放。请帮忙。

$(document).ready(function() {
  $('#html5-videos').lightGallery({});
});

img {
  width: 220px;
  height: 150px;
}

ul {
  list-style: none;
}

li {
  display: initial;
}

<link href="https://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.6/js/lightgallery-all.min.js"></script>
<!-- Hidden video div -->
<div style="display:none;" id="video1">
  <video class="lg-video-object lg-html5" controls preload="none">
        <source src="https://sachinchoolur.github.io/lightGallery/static/videos/video4.mp4" type="video/mp4">
         Your browser does not support HTML5 video.
    </video>
</div>
<div style="display:none;" id="video2">
  <video class="lg-video-object lg-html5" controls preload="none">
        <source src="http://sachinchoolur.github.io/lightGallery/static/videos/video2.mp4" type="video/mp4">
         Your browser does not support HTML5 video.
    </video>
</div>
<ul id="html5-videos">
  <!-- Youtube video -->
  <li class="selectoritem video width100" data-src="https://www.youtube.com/watch?v=yp0a1oZQRVM" data-sub-html="Youtube video first">
    <a href="" class="thumbnail width100 portimgfullwidth" style="background-image: url(https://img.youtube.com/vi/yp0a1oZQRVM/0.jpg);">
      <img class="img-responsive widthauto hide" src="https://img.youtube.com/vi/yp0a1oZQRVM/0.jpg">
    </a>
  </li>
  <li class="selectoritem video width100" data-src="https://www.youtube.com/watch?v=g4o8jfO92CI" data-sub-html="Youtube video second">
    <a href="" class="thumbnail width100 portimgfullwidth" style="background-image: url(https://img.youtube.com/vi/g4o8jfO92CI/0.jpg;">
      <img class="img-responsive widthauto hide" src="https://img.youtube.com/vi/g4o8jfO92CI/0.jpg">
    </a>
  </li>
  <!-- Html 5 video -->
  <li data-sub-html="video caption1" data-html="#video1">
    <img src="https://sachinchoolur.github.io/lightGallery/static/img/videos/h-video3-poster.jpg" />
  </li>
  <li data-sub-html="video caption2" data-html="#video2">
    <img src="http://sachinchoolur.github.io/lightGallery/static/img/thumb-v-y-1.jpg" />
  </li>
</ul>

Answer 1

我在 GitHub 上找到了答案。

我更新了 lg-video.js，它工作正常。

LightGallery 所有 html5 个视频同时播放

LightGallery all html5 videos are playing at the same time

javascript

jquery

html

lightgallery