- 09/30草莓互联2024年国庆假期...
- 09/15草莓互联2024年中秋节放...
- 08/10宝塔控制面板手动安装Ope...
- 06/07草莓互联2024年端午节放...
- 04/30草莓互联2024年五一劳动...
- 04/03草莓互联2024年清明放假...
- 03/24宝塔控制面板Nginx后端...
- 02/27宝塔面板python2.7升级...
- 02/19宝塔面板站点PCI DSS不合...
- 02/19宝塔面板站点站长工具中点亮HT...
- 02/14宝塔面板https协议无法获取...
- 02/11宝塔Windows面板下SQL...
- 02/02宝塔控制面板利用nginx实现...
- 09/18宝塔控制面板FTP增加Flas...
phpweb已经是国内最强的的开源电子商务系统了，但并非完美，因为任何...
互联网3年一轮回，京东凡客等电商品牌在三年之前也不过是小打小闹，而如...
电商已经成为趋势，传统行业的竞争已经逐渐演变到网络上，也有不少用Weboss...
phpweb系统是固定的模式，适用于大部分行业与需求。但有一些行业还是有自己...
layer视频弹出播放mp4的demo实例
实例需求：
一个视频图片封面，点击触发弹出层，弹出层自动播放mp4视频，点击右上角关闭图层时候自动暂停播放且隐藏弹出层，再次点击图片封面触发显示弹出层，视频再次自动播放。
以下是html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这是一个layer视频mp4播放实例Demo</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layer/3.1.1/theme/default/layer.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
.video-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.video-cover img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.video-wrapper {
position: relative;
width: 80vw;
height: 80vh;
margin: auto;
background-color: black;
}
.video-wrapper video {
width: 100%;
height: 100%;
object-fit: cover;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
color: white;
font-size: 24px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="video-container">
<div class="video-cover">
<img src="https://www.phpweb.com.cn/advance/pics/20191017/1571312000.png" >
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layer/3.1.1/layer.js"></script>
<script>
const videoCover = $('.video-cover');
videoCover.on('click', function() {
layer.open({
type: 1,
title: false,
closeBtn: 0,
content: '<div class="video-wrapper"><video controls autoplay><source src="https://demo.weboss.hk/video.mp4" type="video/mp4"></video><span class="close-btn">×</span></div>',
anim: 'scale',
area: ['80vw', '80vh'],
success: function(layero, index) {
const closeBtn = layero.find('.close-btn');
const videoPlayer = layero.find('video')[0];
closeBtn.on('click', function() {
layer.close(index);
videoPlayer.pause();
});
layero.on('click', function(event) {
if (event.target === layero[0]) {
layer.close(index);
videoPlayer.pause();
}
});
layero.on('closed', function() {
videoPlayer.currentTime = 0;
});
}
});
});
</script>
</body>
</html>
假如我们资讯/文章对您有所帮助，您可以通过扫描捐赠二维码支持一下我们~
感谢您对我们的支持,您的小小支持让我们有信心走得更远!
