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.
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)