Javascript lightbox.js html5视频未播放视频。我做错了什么?
我正试图让本页上的示例具体工作,因为我的视频文件存储在我的web服务器上 这是我的html文件。我按照lightbox github页面上的说明进行操作,但我肯定错过了什么,因为视频无法播放Javascript lightbox.js html5视频未播放视频。我做错了什么?,javascript,html,jquery,video,lightbox,Javascript,Html,Jquery,Video,Lightbox,我正试图让本页上的示例具体工作,因为我的视频文件存储在我的web服务器上 这是我的html文件。我按照lightbox github页面上的说明进行操作,但我肯定错过了什么,因为视频无法播放 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/lightgallery.css"> <link href="css/video-js.css" rel="styleshee
<!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>
您的浏览器不支持HTML5视频。
您的浏览器不支持HTML5视频。
-
-
lightGallery(document.getElementById('lightGallery'));
lightGallery(document.getElementById('video-gallery'),
{
真的吗
});
lightGallery(document.getElementById('html5-videos');
$(“#html5视频”).lightGallery();
$('#视频画廊')。lightGallery({
真的吗
});
我做错了什么?看起来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版本