43 lines
1.7 KiB
JavaScript
43 lines
1.7 KiB
JavaScript
// Function to open video in modal and autoplay
|
|
function openVideo(src, title, description) {
|
|
const videoPlayer = document.getElementById("videoPlayer");
|
|
videoPlayer.src = src;
|
|
videoPlayer.autoplay = true; // Enable autoplay
|
|
videoPlayer.loop = true; // Enable looping
|
|
videoPlayer.play(); // Start playing
|
|
|
|
document.getElementById("videoModalTitle").innerText = title;
|
|
document.getElementById("videoModalDescription").innerHTML = description;
|
|
}
|
|
|
|
// Stop video when modal is closed
|
|
document.getElementById("videoModal").addEventListener("hidden.bs.modal", function () {
|
|
const videoPlayer = document.getElementById("videoPlayer");
|
|
videoPlayer.pause(); // Stop playback
|
|
videoPlayer.currentTime = 0; // Reset to beginning
|
|
});
|
|
|
|
// Function to dynamically generate video cards
|
|
function generateVideoCards(videos) {
|
|
const videoContainer = document.getElementById("video-container");
|
|
|
|
videos.forEach(video => {
|
|
const col = document.createElement("div");
|
|
col.classList.add("col-md-4", "mb-4");
|
|
|
|
col.innerHTML = `
|
|
<div class="card video-card" data-bs-toggle="modal" data-bs-target="#videoModal"
|
|
onclick="openVideo('${video.src}', '${video.title}', '${video.description}')">
|
|
<video class="card-img-top" autoplay loop muted>
|
|
<source src="${video.src}" type="video/mp4">
|
|
</video>
|
|
<div class="card-body">
|
|
<h5 class="card-title">${video.title}</h5>
|
|
<p class="card-text">${video.description}</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
videoContainer.appendChild(col);
|
|
});
|
|
}
|