Video Transitions Demo
About this app
An interactive app that showcases video transition effects with user control.
Video Transitions Demo Video Transitions Demo Your browser does not support the video tag. Next Video
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Video Transitions Demo</title>
<meta name="description" content="An interactive app that showcases video transition effects with user control.">
<meta name="keywords" content="video, transitions, effects, multimedia, interactive">
<!-- Libraries -->
<!-- jQuery (3.6.0) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS (5.3.3) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Bootstrap JS (5.3.3) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<!-- Font Awesome (6.6.0) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
// App Javascript Goes Here
document.addEventListener("DOMContentLoaded", function() {
// Initializing videos array
const videos = [
{ id: "video1", src: "https://www.w3schools.com/html/mov_bbb.mp4", title: "Big Buck Bunny" },
{ id: "video2", src: "https://www.w3schools.com/html/movie.mp4", title: "Another Video" }
];
let currentVideoIndex = 0;
const videoElement = document.getElementById('video-player');
// Load and play the video based on the current index
function loadVideo(index) {
videoElement.src = videos[index].src;
videoElement.load();
videoElement.play();
}
// Handle next video transition with fade effect
function transitionToNextVideo() {
videoElement.classList.add('fade-out');
setTimeout(() => {
currentVideoIndex = (currentVideoIndex + 1) % videos.length;
loadVideo(currentVideoIndex);
videoElement.classList.remove('fade-out');
}, 1000); // duration of fade-out
}
document.getElementById('next-btn').addEventListener('click', transitionToNextVideo);
loadVideo(currentVideoIndex);
});
} catch (error) {
throw error;
}
</script>
<style>
/* App CSS Goes Here */
body {
background: linear-gradient(135deg, #f7aef8, #g4e1f9);
color: #333;
}
#video-container {
text-align: center;
margin-top: 50px;
}
video {
width: 100%;
max-width: 600px;
border-radius: 15px;
transition: opacity 1s ease-in-out;
opacity: 1;
}
.fade-out {
opacity: 0;
}
.btn-default {
background-color: #673ab7;
color: #fff;
}
.btn-default:hover {
background-color: #5e35b1;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1 class="text-center mt-5">Video Transitions Demo</h1>
<div id="video-container">
<video id="video-player" controls>
<source src="" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="mt-3">
<button id="next-btn" class="btn btn-default">Next Video</button>
</div>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!