Sadtalker Poses 1-40: Dynamic Video Grid with Interactive Controls
This is used to illustrate the various poses in SADTALKER, as I couldn't find a reference. There are 49 pose styles. Here are 40 examples. Download the examples and the HTML from my Google Drive: Download the MP4s and HTML. Just drop it in a directory with the MP4s. If you want to use your own, just do a generation with each pose style on the SADTALKER slider and name the files 1.mp4, 2.mp4, etc.
I did not write a line of code; ChatGPT4o did the work there. The voices were from eleven labs cloned from me. The MP4s were generated by the open-source SADTALKER photo-to-video open-source technology. GITHUB PROJECT HERE GITHUB PROJECT HERE
Introduction
In the digital age, content presentation is just as important as the content itself. Creating a dynamic and responsive video grid can significantly enhance user engagement for web developers and designers looking to showcase multiple video files effectively. In this blog post, I will walk you through creating an HTML page that displays video files as interactive tiles, complete with controls for playback audio settings and dynamic grid resizing.
Building the Video Grid
We create a basic HTML structure with a grid layout to display video files. Our grid will initially accommodate 49 video files sequentially from `1.mp4` to `49.mp4`. Each video is designed to play when clicked and can be controlled independently.
HTML Structure and Styling
Here is the basic HTML and CSS setup:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Tiles</title>
<style>
.video-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 10px;
}
.video-grid .video-container {
width: 100%;
aspect-ratio: 16 / 9;
}
.video-grid video {
width: 100%;
height: auto;
cursor: pointer;
}
.video-title {
text-align: center;
font-size: 12px;
color: #666;
margin-top: 5px;
}
h1 {
text-align: center;
margin: 20px 0;
}
.control-button, .slider {
display: block;
margin: 10px auto;
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="range"] {
width: 50%;
cursor: pointer;
}
</style>
</head>
<body>
<h1>SADTALKER POSE STYLES</h1>
<button class="control-button" onclick="playAllVideos(true)">Play All Videos With Audio</button>
<button class="control-button" onclick="playAllVideos(false)">Play All Videos Without Audio</button>
<input type="range" min="60" max="480" value="240" step="60" class="slider" id="sizeSlider" oninput="resizeGrid(this.value)">
<div class="video-grid">
<script>
window.addEventListener('DOMContentLoaded', (event) => {
const container = document.querySelector('.video-grid');
for (let i = 1; i <= 49; i++) { // Changed to 49 to accommodate more videos
const videoContainer = document.createElement('div');
videoContainer.classList.add('video-container');
const video = document.createElement('video');
video.src = `${i}.mp4`;
video.id = `video${i}`;
video.controls = false;
video.addEventListener('click', () => {
if (video.paused) {
video.play();
} else {
video.pause();
}
});
const title = document.createElement('h2');
title.innerText = `${i}.mp4`;
title.classList.add('video-title');
videoContainer.appendChild(video);
videoContainer.appendChild(title);
container.appendChild(videoContainer);
}
});
function playAllVideos(withAudio) {
const videos = document.querySelectorAll('video');
videos.forEach(video => {
video.muted = !withAudio;
video.play();
});
}
function resizeGrid(newSize) {
const grid = document.querySelector('.video-grid');
grid.style.gridTemplateColumns = `repeat(auto-fill, minmax(${newSize}px, 1fr))`;
}
</script>
</div>
</body>
</html>
Features
1. Play and Mute Controls: Users can start all videos with or without sound using two separate buttons. This is particularly useful in environments where audio may be intrusive.
2. Dynamic Resizing: A slider allows users to adjust the size of the video tiles from 60px to 480px. This feature provides flexibility, ensuring that the video grid can adapt to different screen sizes and user preferences.
3. Interactive Video Tiles: Each tile is responsive to clicks, playing, or pausing the video as needed. This interactive feature enhances user engagement by allowing direct control over video playback.
Conclusion
This dynamic video grid offers a versatile and user-friendly way to present video content on the web. Whether you're building a portfolio, an educational platform, or a digital gallery, such features enhance visual appeal and user interaction, making your content more engaging and accessible. With HTML, CSS, and a bit of JavaScript, you can customize this layout to suit a wide range of needs, ensuring your website remains as dynamic as the content it hosts.
Comments
Post a Comment