文章/答案/技术大牛

发布

社区首页 >问答首页 >lightbox.js html5视频无法播放视频。我做错了什么？

问lightbox.js html5视频无法播放视频。我做错了什么？
EN

Stack Overflow用户

提问于 2020-05-03 21:34:45

回答 1查看 770关注 0票数 0

我正在尝试让这个页面上的示例工作，因为我的视频文件存储在我的web服务器上。

https://sachinchoolur.github.io/lightgallery.js/demos/html5-videos.html

这是我的html文件。我遵循了lightbox github页面上的说明，但我肯定遗漏了什么，因为视频不能播放。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/lightgallery.css">
<link href="css/video-js.css" rel="stylesheet">
</head>
<body>
    <!-- Hidden video div -->
    <div style="display:none;" id="video1">
        <video class="lg-video-object lg-html5 video-js vjs-default-skin" controls preload="none">
            <source src="archive/devon_rayford/20200501.tom_hanks_gone.Q_dx99JcxT8.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 video-js vjs-default-skin" controls preload="none">
            <source src="archive/devon_rayford/20200501.Tom_Hanks_is_really_gone.Hrx1YtkpfPY.mp4" type="video/mp4">
             Your browser does not support HTML5 video.
        </video>
    </div>

    <!-- data-src should not be provided when you use html5 videos -->
    <ul id="video-gallery">
      <li data-poster="archive/devon_rayford/thumbnails/20200501.tom_hanks_gone.Q_dx99JcxT8.jpg" data-sub-html="video caption1" data-html="#video1" >
          <img src="archive/devon_rayford/thumbnails/20200501.tom_hanks_gone.Q_dx99JcxT8.jpg" />
      </li>
      <li data-poster="archive/devon_rayford/thumbnails/20200501.Tom_Hanks_is_really_gone.Hrx1YtkpfPY.jpg" data-sub-html="video caption2" data-html="#video2" >
          <img src="archive/devon_rayford/thumbnails/20200501.Tom_Hanks_is_really_gone.Hrx1YtkpfPY.jpg" />
      </li>
    </ul>
<script src="js/jquery-3.5.0.min.js"></script>
<script src="js/lightgallery.min.js"></script>
<script src="js/video.js"></script>
<!-- Include lg-video -->
<script src="js/lg-video.min.js"></script>

<!-- Include other lightgallery plugins (Optional) -->
<script src="js/lg-thumbnail.min.js"></script>

<script>
lightGallery(document.getElementById('lightgallery')); 
lightGallery(document.getElementById('video-gallery'), 
{
    videojs: true
});

lightGallery(document.getElementById('html5-videos')); 

$('#html5-videos').lightGallery();
$('#video-gallery').lightGallery({ 
    videojs: true
});

</script>

</body>
</html>

我做错了什么？

video

lightbox

javascript

html

jquery

回答 1

Stack Overflow用户

发布于 2020-05-03 22:43:40

看起来像是lightgallery.min.js的缩小版有一些未知的错误。我试着使用真实的版本，它工作得很好。

<script src="https://cdn.jsdelivr.net/npm/lightgallery.js@1.1.3/dist/js/lightgallery.js"></script>

<script src="https://cdn.rawgit.com/sachinchoolur/lg-video.js/master/dist/lg-video.js"></script>

我还没有尝试过jQuery版本。

Demo

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61575314

复制

相似问题

问lightbox.js html5视频无法播放视频。我做错了什么？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问lightbox.js html5视频无法播放视频。我做错了什么？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问lightbox.js html5视频无法播放视频。我做错了什么？
EN