https://monsnode.com/user/postman080/ 上記のサイトから動画が1つランダムで表示されるアプリ

🎬✨📹
😄🎉🥳
```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ランダムビデオジェネレーター 🎉📺✨</title>
    <style>
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-30px); }
            60% { transform: translateY(-15px); }
        }

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .bounce-animation {
            animation: bounce 2s infinite;
        }

        .rotate-animation {
            animation: rotate 4s linear infinite;
        }

        .fade-in {
            animation: fadeIn 1s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .emoji {
            font-size: 2rem;
            animation: bounce 3s infinite;
        }

        .button {
            background-color: #ffcc00;
            border: none;
            padding: 10px 20px;
            font-size: 1rem;
            border-radius: 10px;
            cursor: pointer;
            margin-top: 20px;
            transition: transform 0.2s;
        }

        .button:active {
            transform: scale(0.95);
        }

        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div style="width: 400px; height: 400px; margin: auto; text-align: center; position: relative; overflow: hidden; background-color: #f0f8ff; border: 2px solid #add8e6; border-radius: 20px;">
        <div class="emoji bounce-animation" style="position: absolute; top: 10px; left: 50%; transform: translateX(-50%);">🎬✨📹</div>
        <video id="videoPlayer" width="300" height="200" controls style="margin-top: 60px; border-radius: 10px;">
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            Your browser does not support HTML video.
        </video>
        <br>
        <button class="button rotate-animation" onclick="loadRandomVideo()">ランダムビデオを再生 🎥🔄</button>
        <canvas id="confettiCanvas" width="400" height="400"></canvas>
        <div class="emoji" style="margin-top: 10px;">😄🎉🥳</div>
    </div>

    <script>
        const videos = [
            "https://www.w3schools.com/html/mov_bbb.mp4",
            "https://www.w3schools.com/html/movie.mp4",
            // 他の動画URLをここに追加
        ];

        function loadRandomVideo() {
            const videoPlayer = document.getElementById('videoPlayer');
            const randomIndex = Math.floor(Math.random() * videos.length);
            videoPlayer.src = videos[randomIndex];
            videoPlayer.play();
            playConfetti();
        }

        // キーボード入力にも対応
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Enter') {
                loadRandomVideo();
            }
        });

        // コンフィティアアニメーション
        function playConfetti() {
            const canvas = document.getElementById('confettiCanvas');
            const ctx = canvas.getContext('2d');
            const confetti = [];

            const colors = ['#FFC107', '#FF5722', '#4CAF50', '#2196F3', '#9C27B0'];

            for (let i = 0; i < 100; i++) {
                confetti.push({
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height - canvas.height,
                    size: Math.random() * 5 + 2,
                    speed: Math.random() * 3 + 2,
                    color: colors[Math.floor(Math.random() * colors.length)],
                    tilt: Math.random() * 10 - 10
                });
            }

            function draw() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                confetti.forEach(c => {
                    ctx.beginPath();
                    ctx.arc(c.x, c.y, c.size, 0, Math.PI * 2);
                    ctx.fillStyle = c.color;
                    ctx.fill();
                    c.y += c.speed;
                    c.x += Math.sin(c.y * 0.05);
                    if (c.y > canvas.height) {
                        c.y = -10;
                        c.x = Math.random() * canvas.width;
                    }
                });
                requestAnimationFrame(draw);
            }

            draw();
        }
    </script>
</body>
</html>
```