CSS3&带有拇指的PHP灯箱,用于每日更新视频内容

时间:2011-08-03 10:40:59

标签: php css3 slider thumbnails

好的,所以我正在尝试实现一个链接到灯箱的滑动视频缩略图库,类似于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>

我认为拇指滑块无关紧要,所以我没有把它包括在内。

1 个答案:

答案 0 :(得分:0)

您可以ffmpeg使用capture images from video。它易于使用,只需要安装在您的服务器上。您可以使用exec()从php运行ffmpeg命令(注意:这可能需要在您的php.ini中启用)