视频背景加背景音乐

2250898553 2025-10-31 26 次下载
详细描述
实时预览
源代码
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卡密验证系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: #333;
            min-height: 100vh;
            padding: 20px;
            position: relative;
            overflow-x: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .background-video {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        
        .background-video.active {
            opacity: 1;
        }
        
        .container {
            width: 100%;
            max-width: 500px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            padding: 25px;
            transition: all 0.5s ease;
            position: relative;
            z-index: 1;
        }
        
        .container.transparent {
            background: transparent;
            box-shadow: none;
        }
        
        .container.transparent .card {
            background: transparent;
            box-shadow: none;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .container.transparent .input-field {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.4);
            color: white;
        }
        
        .container.transparent .input-field::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }
        
        .container.transparent .notice-container {
            background: rgba(255, 255, 255, 0.2);
            border-left: 4px solid rgba(255, 255, 255, 0.6);
        }
        
        .container.transparent .notice-title,
        .container.transparent .notice-content,
        .container.transparent .card-title,
        .container.transparent .input-label,
        .container.transparent .title,
        .container.transparent .media-title,
        .container.transparent .media-info,
        .container.transparent .footer {
            color: white;
        }
        
        .header {
            text-align: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .container.transparent .header {
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .title {
            font-size: 24px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 8px;
        }
        
        .notice-container {
            background: #e8f4fd;
            border-radius: 10px;
            padding: 12px;
            margin-bottom: 20px;
            border-left: 4px solid #3498db;
        }
        
        .notice-title {
            font-weight: 600;
            color: #2980b9;
            margin-bottom: 6px;
            font-size: 14px;
        }
        
        .notice-content {
            color: #34495e;
            line-height: 1.4;
            font-size: 13px;
        }
        
        .card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 15px;
            transition: all 0.5s ease;
        }
        
        .card-title {
            font-size: 16px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 12px;
        }
        
        .input-group {
            margin-bottom: 15px;
        }
        
        .input-label {
            display: block;
            margin-bottom: 6px;
            font-weight: 500;
            color: #34495e;
            font-size: 14px;
        }
        
        .input-field {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s;
        }
        
        .input-field:focus {
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
            outline: none;
        }
        
        .result {
            margin-top: 15px;
            padding: 12px;
            border-radius: 8px;
            text-align: center;
            font-weight: 500;
            font-size: 14px;
            display: none;
        }
        
        .result.success {
            background: #d5f4e6;
            color: #27ae60;
            display: block;
        }
        
        .result.error {
            background: #fadbd8;
            color: #e74c3c;
            display: block;
        }
        
        .container.transparent .result.success {
            background: rgba(213, 244, 230, 0.2);
            color: #d1f2e0;
        }
        
        .container.transparent .result.error {
            background: rgba(250, 219, 216, 0.2);
            color: #f8c9c5;
        }
        
        .media-container {
            margin-top: 20px;
            border-top: 1px solid #eee;
            padding-top: 15px;
        }
        
        .container.transparent .media-container {
            border-top: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .media-title {
            font-size: 16px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 12px;
            text-align: center;
        }
        
        .media-controls {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }
        
        .media-btn {
            padding: 8px 12px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.5s ease;
            font-size: 13px;
            flex: 1;
            min-width: 70px;
        }
        
        .container.transparent .media-btn {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.5);
            color: white;
        }
        
        .container.transparent .media-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .media-btn:hover {
            background: #2980b9;
        }
        
        .audio-container {
            width: 100%;
            margin-bottom: 12px;
        }
        
        .audio-player {
            width: 100%;
            height: 35px;
        }
        
        .container.transparent .audio-player {
            background: transparent;
        }
        
        .media-info {
            text-align: center;
            margin-bottom: 8px;
            font-size: 13px;
            color: #7f8c8d;
        }
        
        .volume-control {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 8px;
            font-size: 13px;
        }
        
        .volume-slider {
            flex: 1;
            height: 4px;
            background: #ddd;
            border-radius: 4px;
            outline: none;
            -webkit-appearance: none;
            transition: all 0.5s ease;
        }
        
        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #3498db;
            cursor: pointer;
            transition: all 0.5s ease;
        }
        
        .container.transparent .volume-slider {
            background: rgba(255, 255, 255, 0.3);
        }
        
        .container.transparent .volume-slider::-webkit-slider-thumb {
            background: white;
        }
        
        .footer {
            text-align: center;
            margin-top: 20px;
            color: #7f8c8d;
            font-size: 12px;
        }
        
        /* 三个功能按钮在一横排 - 与播放暂停按钮相同大小 */
        .function-buttons {
            display: flex;
            gap: 8px;
            margin-top: 15px;
        }
        
        .function-btn {
            flex: 1;
            text-align: center;
            padding: 8px 12px;
            background: #3498db;
            color: white;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.5s ease;
            border: none;
            font-size: 13px;
            min-width: 70px;
        }
        
        .function-btn:hover {
            background: #2980b9;
            transform: translateY(-2px);
        }
        
        .function-btn:active {
            transform: translateY(0);
        }
        
        .function-btn.verify {
            background: #9b59b6;
        }
        
        .function-btn.query {
            background: #e67e22;
        }
        
        .function-btn.buy {
            background: #27ae60;
        }
        
        .function-btn.verify:hover {
            background: #8e44ad;
        }
        
        .function-btn.query:hover {
            background: #d35400;
        }
        
        .function-btn.buy:hover {
            background: #229954;
        }
        
        .container.transparent .function-btn {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.5);
            color: white;
        }
        
        .container.transparent .function-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .function-icon {
            font-size: 14px;
            margin-bottom: 4px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        
        .function-text {
            font-size: 12px;
            font-weight: 500;
        }
        
        .audio-volume-control {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 10px;
            font-size: 13px;
        }
        
        @media (max-width: 480px) {
            body {
                padding: 15px;
            }
            
            .container {
                padding: 20px;
            }
            
            .title {
                font-size: 22px;
            }
            
            .card {
                padding: 15px;
            }
            
            .function-buttons {
                flex-direction: row;
            }
            
            .function-btn {
                padding: 8px 6px;
            }
            
            .function-text {
                font-size: 11px;
            }
        }
    </style>
</head>
<body>
    <video class="background-video" id="backgroundVideo" loop>
        您的浏览器不支持视频播放
    </video>
    
    <div class="container" id="mainContainer">
        <div class="header">
            <h1 class="title" id="title">卡密验证系统</h1>
        </div>
        
        <div class="notice-container">
            <div class="notice-title">系统公告</div>
            <div class="notice-content" id="notice">欢迎使用卡密验证系统，请先验证您的卡密以使用完整功能</div>
        </div>
        
        <div class="card">
            <div class="card-title">卡密管理</div>
            
            <div class="input-group">
                <label class="input-label">请输入卡密</label>
                <input type="text" class="input-field" id="cardInput" placeholder="Your key needs to be entered here">
            </div>
            
            <!-- 三个功能按钮在一横排，与播放暂停按钮相同大小 -->
            <div class="function-buttons">
                <button class="function-btn verify" onclick="Call_Verify(document.getElementById('cardInput').value)">
                    <div class="function-icon">验</div>
                    <div class="function-text">验证卡密</div>
                </button>
                <button class="function-btn query" onclick="Call_Query_Trial(document.getElementById('cardInput').value)">
                    <div class="function-icon">查</div>
                    <div class="function-text" id="Query_Trial">查询卡密</div>
                </button>
                <button class="function-btn buy" onclick="Call_Pay()">
                    <div class="function-icon">购</div>
                    <div class="function-text">购买卡密</div>
                </button>
            </div>
            
            <div id="actionResult" class="result"></div>
        </div>
        
        <div class="card">
            <div class="card-title">媒体播放</div>
            
            <div class="media-container">
                <div class="media-title">背景视频控制</div>
                <div class="media-info" id="videoInfo">当前视频 视频1 音量 100</div>
                <div class="media-controls">
                    <button class="media-btn" onclick="prevVideo()">上一个</button>
                    <button class="media-btn" onclick="toggleVideo()">播放暂停</button>
                    <button class="media-btn" onclick="nextVideo()">下一个</button>
                </div>
                <div class="volume-control">
                    <span>音量</span>
                    <input type="range" class="volume-slider" id="videoVolume" min="0" max="100" value="100" oninput="setVideoVolume(this.value)">
                    <span id="videoVolumeValue">100</span>
                </div>
            </div>
            
            <div class="media-container">
                <div class="media-title">音乐播放器</div>
                <div class="audio-container">
                    <audio id="audioPlayer" class="audio-player"></audio>
                </div>
                <div class="media-info" id="audioInfo">当前音乐 音乐1 音量 100</div>
                <div class="media-controls">
                    <button class="media-btn" onclick="prevAudio()">上一个</button>
                    <button class="media-btn" onclick="toggleAudio()">播放暂停</button>
                    <button class="media-btn" onclick="nextAudio()">下一个</button>
                </div>
                <div class="audio-volume-control">
                    <span>音量</span>
                    <input type="range" class="volume-slider" id="audioVolume" min="0" max="100" value="100" oninput="setAudioVolume(this.value)">
                    <span id="audioVolumeValue">100</span>
                </div>
            </div>
        </div>
        
        <div class="footer">
            <p>中纸片官网：zhongzhipian.top</p>
        </div>
    </div>

    <script>
        // 初始化页面
        document.getElementById("title").innerHTML = PanGolin.GetTitle();
        document.getElementById("notice").innerHTML = PanGolin.GetNotice();
        document.getElementById("Query_Trial").innerHTML = PanGolin.Is_Trial() == true ? "试用" : "查询卡密";

        function Call_Verify(data) {
            PanGolin.Verify(data);
        }

        function Call_Query_Trial(data) {
            if (PanGolin.Is_Trial()) PanGolin.Trial();
            else PanGolin.Query(data);
        }
        
        function Call_Pay() {
            PanGolin.Pay();
        }
        
        // 媒体播放功能
        const videoSources = [
            "https://mpimg.cn/down.php/3db04ea1ec6b40a86cd6a4570e844e29.mp4",
            "https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4",
            "https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4"
        ];
        
        const audioSources = [
            "https://mpimg.cn/down.php/dcf70e0f2d39a549d99f1e8466969331.mp3",
            "https://sample-videos.com/zip/10/mp3/SampleAudio_0.4mb.mp3",
            "https://sample-videos.com/zip/10/mp3/SampleAudio_0.7mb.mp3"
        ];
        
        const videoTitles = ["视频1", "视频2", "视频3"];
        const audioTitles = ["音乐1", "音乐2", "音乐3"];
        
        let currentVideoIndex = 0;
        let currentAudioIndex = 0;
        
        const backgroundVideo = document.getElementById('backgroundVideo');
        const audioPlayer = document.getElementById('audioPlayer');
        const videoInfo = document.getElementById('videoInfo');
        const audioInfo = document.getElementById('audioInfo');
        const mainContainer = document.getElementById('mainContainer');
        const videoVolume = document.getElementById('videoVolume');
        const videoVolumeValue = document.getElementById('videoVolumeValue');
        const audioVolume = document.getElementById('audioVolume');
        const audioVolumeValue = document.getElementById('audioVolumeValue');
        
        // 初始化播放器
        backgroundVideo.src = videoSources[currentVideoIndex];
        audioPlayer.src = audioSources[currentAudioIndex];
        videoInfo.textContent = `当前视频 视频1 音量 100`;
        audioInfo.textContent = `当前音乐 音乐1 音量 100`;
        
        // 设置视频音量
        function setVideoVolume(value) {
            backgroundVideo.volume = value / 100;
            videoVolumeValue.textContent = value;
            videoInfo.textContent = `当前视频 ${videoTitles[currentVideoIndex]} 音量 ${value}`;
        }
        
        // 设置音频音量
        function setAudioVolume(value) {
            audioPlayer.volume = value / 100;
            audioVolumeValue.textContent = value;
            audioInfo.textContent = `当前音乐 ${audioTitles[currentAudioIndex]} 音量 ${value}`;
        }
        
        // 视频控制函数
        function toggleVideo() {
            if (backgroundVideo.paused) {
                backgroundVideo.play();
                backgroundVideo.classList.add('active');
                mainContainer.classList.add('transparent');
            } else {
                backgroundVideo.pause();
                backgroundVideo.classList.remove('active');
                mainContainer.classList.remove('transparent');
            }
        }
        
        function prevVideo() {
            currentVideoIndex = (currentVideoIndex - 1 + videoSources.length) % videoSources.length;
            backgroundVideo.src = videoSources[currentVideoIndex];
            videoInfo.textContent = `当前视频 ${videoTitles[currentVideoIndex]} 音量 ${videoVolume.value}`;
            backgroundVideo.play();
            backgroundVideo.classList.add('active');
            mainContainer.classList.add('transparent');
        }
        
        function nextVideo() {
            currentVideoIndex = (currentVideoIndex + 1) % videoSources.length;
            backgroundVideo.src = videoSources[currentVideoIndex];
            videoInfo.textContent = `当前视频 ${videoTitles[currentVideoIndex]} 音量 ${videoVolume.value}`;
            backgroundVideo.play();
            backgroundVideo.classList.add('active');
            mainContainer.classList.add('transparent');
        }
        
        // 音频控制函数
        function toggleAudio() {
            if (audioPlayer.paused) {
                audioPlayer.play();
            } else {
                audioPlayer.pause();
            }
        }
        
        function prevAudio() {
            currentAudioIndex = (currentAudioIndex - 1 + audioSources.length) % audioSources.length;
            audioPlayer.src = audioSources[currentAudioIndex];
            audioInfo.textContent = `当前音乐 ${audioTitles[currentAudioIndex]} 音量 ${audioVolume.value}`;
            audioPlayer.play();
        }
        
        function nextAudio() {
            currentAudioIndex = (currentAudioIndex + 1) % audioSources.length;
            audioPlayer.src = audioSources[currentAudioIndex];
            audioInfo.textContent = `当前音乐 ${audioTitles[currentAudioIndex]} 音量 ${audioVolume.value}`;
            audioPlayer.play();
        }
    </script>
</body>
</html>
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->