对于要替换为本地视频的任何项目,请将数据视频url更改为false:
data-video-url="false"
在Lightbox部分用视频标签替换img,例如替换:
<img src="assets/images/gallery02.jpg" alt="" title="">
使用:
<video style="width: 100%;" src="test.mp4" controls></video>
使用此html作为参考:
<!DOCTYPE html>
<html >
<head>
<!-- Site made with Mobirise Website Builder v4.8.1, https://mobirise.com -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Mobirise v4.8.1, mobirise.com">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link rel="shortcut icon" href="assets/images/logo2.png" type="image/x-icon">
<meta name="description" content="">
<title>Home</title>
<link rel="stylesheet" href="assets/web/assets/mobirise-icons/mobirise-icons.css">
<link rel="stylesheet" href="assets/tether/tether.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="assets/dropdown/css/style.css">
<link rel="stylesheet" href="assets/theme/css/style.css">
<link rel="stylesheet" href="assets/gallery/style.css">
<link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">
</head>
<body>
<section class="engine"><a href="https://mobiri.se/k">how to develop your own website</a></section>
<section class="mbr-gallery mbr-slider-carousel cid-qZSgDBHIbe" id="gallery1-8">
<div>
<div>
<!-- Filter --><!-- Gallery -->
<div class="mbr-gallery-row">
<div class="mbr-gallery-layout-default">
<div>
<div>
<div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="Awesome">
<div href="#lb-gallery1-8" data-slide-to="0" data-toggle="modal">
<div>
</div>
<img alt="" src="assets/images/2018-7-0-22-43-38-937439.jpg">
<span class="icon-video"></span>
<span class="mbr-gallery-title mbr-fonts-style display-7">Type caption here</span>
</div>
</div>
<div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="Responsive">
<div href="#lb-gallery1-8" data-slide-to="1" data-toggle="modal">
<div>
</div>
<img alt="" src="assets/images/2018-7-0-22-44-35-153261.jpg">
<span class="icon-video"></span>
<span class="mbr-gallery-title mbr-fonts-style display-7">Type caption here</span>
</div>
</div>
<div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="Creative">
<div href="#lb-gallery1-8" data-slide-to="2" data-toggle="modal">
<div>
</div>
<img alt="" src="assets/images/2018-7-0-22-45-13-170283.jpg">
<span class="icon-video"></span>
<span class="mbr-gallery-title mbr-fonts-style display-7">Type caption here</span>
</div>
</div>
<div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="Animated">
<div href="#lb-gallery1-8" data-slide-to="3" data-toggle="modal">
<div>
</div>
<img alt="" src="assets/images/2018-7-0-23-14-24-423490.jpg">
<span class="icon-video"></span>
<span class="mbr-gallery-title mbr-fonts-style display-7">Type caption here</span>
</div>
</div>
<div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="Awesome">
<div href="#lb-gallery1-8" data-slide-to="4" data-toggle="modal">
<div>
</div>
<img alt="" src="assets/images/2018-7-0-22-55-6-693450.jpg">
<span class="icon-video"></span>
<span class="mbr-gallery-title mbr-fonts-style display-7">Type caption here</span>
</div>
</div>
<div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="Awesome">
<div href="#lb-gallery1-8" data-slide-to="5" data-toggle="modal">
<div>
</div>
<img alt="" src="assets/images/2018-7-0-23-0-47-37421.jpg">
<span class="icon-video"></span>
<span class="mbr-gallery-title mbr-fonts-style display-7">Type caption here</span>
</div>
</div>
<div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="Responsive">
<div href="#lb-gallery1-8" data-slide-to="6" data-toggle="modal">
<div>
</div>
<img alt="" src="assets/images/2018-7-0-23-4-6-548102.jpg">
<span class="icon-video"></span>
<span class="mbr-gallery-title mbr-fonts-style display-7">Type caption here</span>
</div>
</div>
<div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="Animated">
<div href="#lb-gallery1-8" data-slide-to="7" data-toggle="modal">
<div>
</div>
<img alt="" src="assets/images/2018-7-0-23-8-54-261614.jpg">
<span class="icon-video"></span>
<span class="mbr-gallery-title mbr-fonts-style display-7">Ttest</span>
</div>
</div>
</div>
</div>
<div class="clearfix">
</div>
</div>
</div>
<!-- Lightbox -->
<div data-app-prevent-settings="" class="mbr-slider modal fade carousel slide" tabindex="-1" data-keyboard="true" data-interval="false" id="lb-gallery1-8">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="carousel-inner">
<div class="carousel-item active video-container">
<img src="assets/images/gallery00.jpg" alt="" title="">
</div>
<div class="carousel-item video-container">
<video style="width: 100%;" src="test.mp4" controls></video>
</div>
<div class="carousel-item video-container">
<video style="width: 100%;" src="test.mp4" controls></video>
</div>
<div class="carousel-item video-container">
<video style="width: 100%;" src="test.mp4" controls></video>
</div>
<div class="carousel-item video-container">
<video style="width: 100%;" src="test.mp4" controls></video>
</div>
<div class="carousel-item video-container">
<video style="width: 100%;" src="test.mp4" controls></video>
</div>
<div class="carousel-item video-container">
<video style="width: 100%;" src="test.mp4" controls></video>
</div>
</div>
<a class="carousel-control carousel-control-prev" role="button" data-slide="prev" href="#lb-gallery1-8" onclick="$('.active video').get(0).pause()"><span class="mbri-left mbr-iconfont" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control carousel-control-next" role="button" data-slide="next" href="#lb-gallery1-8" onclick="$('.active video').get(0).pause()"><span class="mbri-right mbr-iconfont" aria-hidden="true"></span><span class="sr-only">Next</span></a><a onclick="$('.active video').get(0).pause()" class="close" href="#" role="button" data-dismiss="modal"><span class="sr-only">Close</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="assets/web/assets/jquery/jquery.min.js"></script>
<script src="assets/popper/popper.min.js"></script>
<script src="assets/tether/tether.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/smoothscroll/smooth-scroll.js"></script>
<script src="assets/dropdown/js/script.min.js"></script>
<script src="assets/touchswipe/jquery.touch-swipe.min.js"></script>
<script src="assets/vimeoplayer/jquery.mb.vimeo_player.js"></script>
<script src="assets/bootstrapcarouselswipe/bootstrap-carousel-swipe.js"></script>
<script src="assets/masonry/masonry.pkgd.min.js"></script>
<script src="assets/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="assets/theme/js/script.js"></script>
<script src="assets/gallery/player.min.js"></script>
<script src="assets/gallery/script.js"></script>
<script src="assets/slidervideo/script.js"></script>
</body>
</html>
