Modern Video Player - MeggiTools

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Video Player</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .video-container {
            position: relative;
            width: 70%;
            max-width: 800px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            border-radius: 15px;
            overflow: hidden;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        }
        video {
            width: 100%;
            display: block;
            border-radius: 15px;
        }
        .controls {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
        }
        .controls button {
            background: none;
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
            margin: 0 5px;
            transition: transform 0.2s;
        }
        .controls button:hover {
            transform: scale(1.2);
        }
        .play-pause {
            font-size: 30px;
        }
        .progress-container {
            flex-grow: 1;
            margin: 0 10px;
        }
        .progress {
            width: 100%;
            height: 5px;
            background: #ddd;
            cursor: pointer;
            border-radius: 5px;
            overflow: hidden;
        }
        .progress-filled {
            width: 0;
            height: 100%;
            background: #fff;
            transition: width 0.2s;
        }
        .timestamp {
            color: white;
            font-size: 14px;
            margin-right: 30px;
        }
        .emoji {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 50px;
            opacity: 0;
            animation: fadeInOut 1s ease-in-out;
        }
        @keyframes fadeInOut {
            0%, 100% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div class="video-container">
        <video id="video" src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
        <div class="emoji" id="emoji">😎</div>
        <div class="controls">
            <button id="play-pause" class="play-pause">▶️</button>
            <div class="progress-container">
                <div class="progress">
                    <div class="progress-filled"></div>
                </div>
            </div>
            <button id="volume-toggle">🔊</button>
            <div class="timestamp" id="timestamp">00:00</div>
        </div>
    </div>
    <script>
        const video = document.getElementById('video');
        const playPauseButton = document.getElementById('play-pause');
        const volumeToggleButton = document.getElementById('volume-toggle');
        const progress = document.querySelector('.progress');
        const progressFilled = document.querySelector('.progress-filled');
        const timestamp = document.getElementById('timestamp');
        const emoji = document.getElementById('emoji');
        playPauseButton.addEventListener('click', togglePlayPause);
        video.addEventListener('click', togglePlayPause);
        video.addEventListener('timeupdate', updateProgress);
        progress.addEventListener('click', setProgress);
        volumeToggleButton.addEventListener('click', toggleVolume);
        function togglePlayPause() {
            if (video.paused) {
                video.play();
                playPauseButton.textContent = '⏸️';
                emoji.textContent = '🎬';
            } else {
                video.pause();
                playPauseButton.textContent = '▶️';
                emoji.textContent = '😎';
            }
            emoji.style.opacity = 1;
            setTimeout(() => {
                emoji.style.opacity = 0;
            }, 1000);
        }
        function toggleVolume() {
            video.muted = !video.muted;
            volumeToggleButton.textContent = video.muted ? '🔇' : '🔊';
        }
        function updateProgress() {
            const progressPercent = (video.currentTime / video.duration) * 100;
            progressFilled.style.width = `${progressPercent}%`;
            const minutes = Math.floor(video.currentTime / 60);
            const seconds = Math.floor(video.currentTime % 60);
            timestamp.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
        }
        function setProgress(e) {
            const newTime = (e.offsetX / progress.offsetWidth) * video.duration;
            video.currentTime = newTime;
        }
    </script>
</body>
</html>