【Again】发布一个视频API

1个月前更新

调用

<video autoplay="autoplay" controls>
    <source src="https://api.hs3l.com/video/mei.php" type="video/mp4">  
</video>

后台>>外观>>小工具>>自定义HTML>>放置首页侧边栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频</title>
    <style>
        .video-container {
            width: 320px;
            height: 600px;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            background-color: #000;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8);
            font-family: Arial, sans-serif;
        }
        .video-container video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .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;
        }
    </style>
</head>
<body>
    <div class="video-container">
        <video id="videoPlayer" autoplay muted playsinline>
            <source src="https://hs3l.com/video/mei.php" type="video/mp4">
            您的浏览器不支持 HTML5 视频标签。
        </video>
        <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>

    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    <script>
        const videoPlayer = document.getElementById('videoPlayer');
        const nextButton = document.getElementById('nextButton');
        const volumeSlider = document.getElementById('volumeSlider');
        const videoUrl = "https://hs3l.com/video/mei.php";

        function loadVideo() {
            videoPlayer.src = videoUrl;
            videoPlayer.play();
        }

        videoPlayer.addEventListener('ended', loadVideo);
        nextButton.addEventListener('click', loadVideo);
        videoPlayer.addEventListener('click', () => {
            videoPlayer.paused ? videoPlayer.play() : videoPlayer.pause();
        });
        videoPlayer.addEventListener('contextmenu', (e) => e.preventDefault());
        
        // 禁用拖放操作
        videoPlayer.addEventListener('dragstart', (e) => e.preventDefault());

        volumeSlider.addEventListener('input', () => {
            videoPlayer.volume = volumeSlider.value;
            videoPlayer.muted = videoPlayer.volume === 0;
        });

        loadVideo();
    </script>
</body>
</html>

随机视频小姐姐随机api

评分

欢迎为Ta评分

赞赏