Question

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

＆＃13;

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

＆＃13;

img {
  width: 220px;
  height: 150px;
}

ul {
  list-style: none;
}

li {
  display: initial;
}

＆＃13;

<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>

＆＃13;

Answer 1

我在GitHub上找到了答案。

我更新了lg-video.js并且工作正常。

LightGallery所有html5视频同时播放

1 个答案: