CSS3 和 CSS3带拇指的 PHP 灯箱，用于每日更新视频内容
好的，所以我正在尝试实现一个链接到灯箱的滑动视频拇指画廊，类似于 reason.com 但如果可能的话我想用纯 CSS 来做。我已经有了完整的灯箱代码，它基本上是纯 CSS，带有将拇指链接到灯箱的 javascript:void 函数。
我的问题是，我计划每天更新视频，因为它用于文章数据库，并且不想在更新时捕获每个视频的视频拇指。
有没有一种方法可以使用 PHP 脚本动态捕获视频的缩略图，并将该脚本包含在我的 javascript:void 链接中，该链接将显示我的灯箱的缩略图？我基本上试图找到一种解决方法来捕获拇指滑块中所有视频的拇指并调整其大小，因为每天这样做会变得越来越乏味。
预先感谢您的任何建议！
CSS：
.black_alpha{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.video {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
HTML：
<body>
**I want each thumb to link to this** <a href = "javascript:void(0)" onclick =
"document.getElementById('light').style.display='block'document.getElementById
('fade').style.display='block'">
<div id="light" class="video"> **this should show the video of the thumb clicked**
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none'"></div>
<div id="fade" class="black_alpha"></div>
</body>
我认为拇指滑块无关紧要，所以我没有包含它。
Ok, so I'm trying to implement a sliding video thumb gallery linked to a lightbox similar to the home page of reason.com but I would like to do it in pure CSS if possible. I already have the code complete for the lightbox which is basically pure CSS with a javascript:void function linking thumbs to the lightbox.
My issue is that I plan on updating the videos daily since it is for an article database and would rather not have to capture the video thumbs for every video upon updating.
Is there a way to dynamically capture thumbs of videos with a PHP script and including the script in my javascript:void link that will display the thumb for my lightbox? I'm basically trying to find a work around for capturing and resizing the thumbs for all of the videos in my thumb slider because this would be increasingly teadious to do on a daily basis.
Thanks in advance for any suggestions!
CSS:
.black_alpha{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.video {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
HTML:
<body>
**I want each thumb to link to this** <a href = "javascript:void(0)" onclick =
"document.getElementById('light').style.display='block'document.getElementById
('fade').style.display='block'">
<div id="light" class="video"> **this should show the video of the thumb clicked**
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none'"></div>
<div id="fade" class="black_alpha"></div>
</body>
I thought the thumb slider would have been irrelevant so I didn't include it.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以使用 ffmpeg 来 从视频中捕获图像。它易于使用，只需安装在您的服务器上即可。您可以使用 exec() 从 php 运行 ffmpeg 命令（注意：这可能需要在 php.ini 中启用）
You can use ffmpeg to capture images from video. It's easy to use and just needs to be installed on your server. You can run the ffmpeg commands from php using exec() (note: this may need to be enabled in your php.ini)