双十一互动直播推荐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双十一互动直播</title>
    <style>
        #videoContainer {
            width: 100%;
            max-width: 800px;
            margin: auto;
        }
        #danmuContainer {
            position: relative;
            height: 50px;
            background: rgba(0,0,0,0.5);
            color: white;
            overflow: hidden;
        }
        .danmu {
            position: absolute;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div id="videoContainer">
        <video id="liveVideo" controls autoplay>
            <source src="your_live_stream_url_here" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    <div id="danmuContainer"></div>

    <script>
        const danmuContainer = document.getElementById('danmuContainer');
        const danmuMessages = ["欢迎来到直播间！", "双十一大促，优惠多多！", "快来抢购吧！"];

        function addDanmu(message) {
            const danmu = document.createElement('div');
            danmu.className = 'danmu';
            danmu.textContent = message;
            danmu.style.left = `${Math.random() * (danmuContainer.clientWidth - 200)}px`;
            danmu.style.animationDuration = `${Math.random() * 5 + 5}s`;
            danmuContainer.appendChild(danmu);

            danmu.addEventListener('animationend', () => {
                danmuContainer.removeChild(danmu);
            });
        }

        setInterval(() => {
            const message = danmuMessages[Math.floor(Math.random() * danmuMessages.length)];
            addDanmu(message);
        }, 3000);
    </script>
</body>
</html>