• video.html 11.17 kB 2024-12-04 16:18
  • 位置: video.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
               <!--
     *                        _oo0oo_
     *                       o8888888o
     *                       88" . "88
     *                       (| -_- |)
     *                       0\  =  /0
     *                     ___/`---'\___
     *                   .' \\|     |// '.
     *                  / \\|||  :  |||// \
     *                 / _||||| -:- |||||- \
     *                |   | \\\  - /// |   |
     *                | \_|  ''\---/''  |_/ |
     *                \  .-\__  '-'  ___/-. /
     *              ___'. .'  /--.--\  `. .'___
     *           ."" '<  `.___\_<|>_/___.' >' "".
     *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
     *          \  \ `_.   \_ __\ /__ _/   .-` /  /
     *      =====`-.____`.___ \_____/___.-`___.-'=====
     *                        `=---='
     * 
     * 
     *      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
     * 
     *            佛祖保佑     永不宕机     永无BUG
     * 
     *        佛曰:  
     *                写字楼里写字间,写字间里程序员;  
     *                程序人员写程序,又拿程序换酒钱。  
     *                酒醒只在网上坐,酒醉还来网下眠;  
     *                酒醉酒醒日复日,网上网下年复年。  
     *                但愿老死电脑间,不愿鞠躬老板前;  
     *                奔驰宝马贵者趣,公交自行程序员。  
     *                别人笑我忒疯癫,我笑自己命太贱;  
     *                不见满街漂亮妹,哪个归得程序员?
    -----------------------------------------------------------------
     * @Author        : 华晟三理科技
     * @Url           : hs3l.com
     * @Date          : 2024-12-01 09:25:21
     * @Email         : admin@hs3l.com
     * @Project       : muziqing
     * Copyright (c) 2024 by 华晟三理. All Rights Reserved.
     * 务必保留以上版权信息,页面底部 © 2024 华晟三理 获取API搭建本站同款 可修改
    -->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>华晟三理</title>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
        <style>
            body {
                margin: 0;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: 100vh;
                background-color: #111;
                color: white;
                font-family: Arial, sans-serif;
                transition: background-color 0.3s, color 0.3s;
            }
    
            .video-container {
                width: 350px;
                height: 650px;
                border-radius: 20px;
                overflow: hidden;
                position: relative;
                background-color: #000;
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8);
                opacity: 1;
                transition: opacity 0.5s ease-out;
            }
    
            .video-container.fade-out {
                opacity: 0;
            }
    
            .video-container video {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }
    
            .play-button {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 60px;
                height: 60px;
                background-color: transparent;
                border-radius: 50%;
                display: none;
                justify-content: center;
                align-items: center;
                cursor: pointer;
            }
    
            .play-button::before {
                content: "";
                width: 0;
                height: 0;
                border-left: 15px solid transparent;
                border-right: 15px solid transparent;
                border-top: 20px solid white;
                transform: rotate(270deg);
            }
    
            .video-container .next-button {
                position: absolute;
                bottom: 20px;
                right: 20px;
                background: rgba(255, 255, 255, 0.85);
                border: none;
                color: #000;
                font-size: 12px;
                font-weight: bold;
                padding: 6px 12px;
                border-radius: 50px;
                cursor: pointer;
                box-shadow: 0 4px 10px rgba(255, 255, 255, 0.3);
                transition: transform 0.3s, background 0.3s, opacity 0.3s;
                opacity: 0.5;
            }
    
            .video-container .next-button:hover {
                transform: translateY(-3px);
                background: rgba(255, 255, 255, 1);
                opacity: 1;
            }
    
            .video-container .volume-control {
                position: absolute;
                bottom: 30px;
                left: 20px;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 10px;
                opacity: 0.5;
                transition: opacity 0.3s;
            }
    
            .video-container .volume-control:hover {
                opacity: 1;
            }
    
            .video-container .volume-slider {
                width: 80px;
                height: 5px;
                background: #ccc;
                border-radius: 5px;
                outline: none;
                appearance: none;
                cursor: pointer;
            }
    
            .video-container .volume-slider::-webkit-slider-thumb {
                appearance: none;
                width: 12px;
                height: 12px;
                background: #fff;
                border-radius: 50%;
                cursor: pointer;
            }
    
            .video-container .volume-slider {
                border: none;
            }
    
            .copyright {
                text-align: center;
                font-size: 12px;
                margin-top: 10px;
                color: #fff;
                transition: color 0.3s;
            }
    
            .copyright a {
                color: #fff;
                text-decoration: none;
                transition: color 0.3s;
            }
    
            .disclaimer {
                text-align: center;
                font-size: 12px;
                margin-top: 5px;
                color: #fff;
                transition: color 0.3s;
            }
    
            @media (max-width: 768px) {
                .play-button {
                    display: flex;
                }
            }
    
            .dark-mode {
                background-color: #fff;
                color: #000;
            }
    
            .dark-mode .video-container {
                background-color: #333;
            }
    
            .dark-mode .video-container .next-button {
                background: rgba(0, 0, 0, 0.85);
                color: #fff;
            }
    
            .dark-mode .mode-toggle {
                background-color: rgba(0, 0, 0, 0.4);
                color: #fff;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
            }
    
            .dark-mode .copyright,
            .dark-mode .disclaimer,
            .dark-mode .disclaimer p,
            .dark-mode .copyright p {
                color: #000;
            }
    
            .dark-mode .copyright a,
            .dark-mode .disclaimer a {
                color: #000;
            }
    
            .mode-toggle {
                position: fixed;
                bottom: 20px;
                right: 20px;
                width: 30px;
                height: 30px;
                background: rgba(255, 255, 255, 0.3); 
                color: #888; 
                font-size: 12px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                box-shadow: 0 4px 10px rgba(255, 255, 255, 0.3);
                transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
                border-radius: 50%;
                border: none; 
            }
    
            .mode-toggle:hover {
                transform: translateY(-3px);
                background: rgba(255, 255, 255, 0.6); 
            }
    
            .mode-toggle:active {
                transform: translateY(2px);
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 -2px 5px rgba(255, 255, 255, 0.2);
            }
    
            .mode-toggle i {
                color: #000; 
                transition: color 0.3s;
            }
    
            
            .dark-mode .mode-toggle i {
                color: #000; 
            }
        </style>
    </head>
    <body>
        <div class="video-container">
            <video id="videoPlayer" muted playsinline>
                <source src="https://api.hs3l.com/video/mei.php" type="video/mp4">
                您的浏览器不支持 HTML5 视频标签。
            </video>
            <button class="play-button" id="playButton"></button>
            <div class="volume-control">
                <input id="volumeSlider" class="volume-slider" type="range" min="0" max="1" step="0.01" value="0">
            </div>
            <button class="next-button" id="nextButton">下一个</button>
        </div>
    
        <div class="disclaimer">素材来自网络,仅供娱乐</div>
        <div class="copyright">
            <p><a href="https://hs3l.com/882.html" target="_blank">获取API,搭建本站同款</a></p><p>© 2024 <a href="https://hs3l.com" target="_blank">华晟三理</a></p>
        </div>
        
        <button class="mode-toggle" id="modeToggle"><i class="fas fa-sun"></i></button>
        <script>
            document.addEventListener('dragstart', (e) => {
                e.preventDefault();
            });
    
            const videoPlayer = document.getElementById('videoPlayer');
            const playButton = document.getElementById('playButton');
            const nextButton = document.getElementById('nextButton');
            const volumeSlider = document.getElementById('volumeSlider');
            const modeToggle = document.getElementById('modeToggle');
            const videoUrl = "https://api.hs3l.com/video/mei.php";
    
            playButton.addEventListener('click', () => {
                videoPlayer.src = videoUrl;
                videoPlayer.play();
                playButton.style.display = 'none';
            });
    
            function loadVideo() {
                const videoContainer = document.querySelector('.video-container');
                videoContainer.classList.add('fade-out');
    
                setTimeout(() => {
                    videoPlayer.src = videoUrl;
                    videoPlayer.play();
                    videoContainer.classList.remove('fade-out');
                }, 500);
            }
    
            videoPlayer.addEventListener('ended', loadVideo);
    
            nextButton.addEventListener('click', loadVideo);
    
            videoPlayer.addEventListener('click', () => {
                if (videoPlayer.paused) {
                    videoPlayer.play();
                } else {
                    videoPlayer.pause();
                }
            });
    
            videoPlayer.addEventListener('contextmenu', (e) => {
                e.preventDefault();
            });
    
            volumeSlider.addEventListener('input', () => {
                videoPlayer.volume = volumeSlider.value;
                videoPlayer.muted = videoPlayer.volume === 0;
            });
    
            let touchStartY = 0;
            document.body.addEventListener('touchstart', (e) => {
                touchStartY = e.touches[0].clientY;
            });
    
            document.body.addEventListener('touchend', (e) => {
                const touchEndY = e.changedTouches[0].clientY;
                if (touchStartY > touchEndY + 50) {
                    loadVideo();
                }
            });
    
            modeToggle.addEventListener('click', () => {
                document.body.classList.toggle('dark-mode');
                const icon = document.querySelector('.mode-toggle i');
                if (document.body.classList.contains('dark-mode')) {
                    icon.classList.replace('fa-sun', 'fa-moon');
                } else {
                    icon.classList.replace('fa-moon', 'fa-sun');
                }
            });
    
            loadVideo();
        </script>
    </body>
    </html>  

    Powered by kodbox V1.56

    Copyright © kodcloud.com.

    Files