Video Music Player
About this app
A fun and colorful video music player that allows you to watch and listen to your favorite music videos seamlessly.
Video Music Player Video Music Player Your browser does not support the video tag. Play Pause Mute
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 Music Player</title>
<meta name="description" content="A fun and colorful video music player that allows you to watch and listen to your favorite music videos seamlessly.">
<meta name="keywords" content="video music, music player, video player, interactive music">
<!-- Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<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 {
document.addEventListener("DOMContentLoaded", function() {
const video = document.getElementById("videoPlayer");
const playButton = document.getElementById("playButton");
const pauseButton = document.getElementById("pauseButton");
const muteButton = document.getElementById("muteButton");
const volumeControl = document.getElementById("volumeControl");
playButton.addEventListener("click", function() {
video.play();
});
pauseButton.addEventListener("click", function() {
video.pause();
});
muteButton.addEventListener("click", function() {
video.muted = !video.muted;
muteButton.textContent = video.muted ? "Unmute" : "Mute";
});
volumeControl.addEventListener("input", function() {
video.volume = volumeControl.value;
});
});
} catch (error) {
throw error;
}
</script>
<style>
body {
background: linear-gradient(to right, #ff758c, #ff7eb3);
color: #fff;
font-family: 'Arial', sans-serif;
}
#main-container {
text-align: center;
margin-top: 50px;
}
video {
width: 100%;
max-width: 400px;
border-radius: 20px;
}
.btn-custom {
background-color: #ff4757;
color: white;
transition: background-color 0.3s;
}
.btn-custom:hover {
background-color: #e84118;
}
.control-panel {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="main-container">
<h1>Video Music Player</h1>
<video id="videoPlayer" controls>
<source src="your-favorite-music-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="control-panel">
<button id="playButton" class="btn btn-custom">Play</button>
<button id="pauseButton" class="btn btn-custom">Pause</button>
<button id="muteButton" class="btn btn-custom">Mute</button>
<input id="volumeControl" type="range" min="0" max="1" step="0.1" value="1" style="margin-left: 10px;">
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!