视频播放小窗

2024年12月15日 208阅读 0评论 1点赞

首页
/
正文

无聊的时候扒的

效果

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <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" muted playsinline>
                <source id="videoSource" type="video/mp4" src="">
            </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>
    </body>
        <script>
            const videoPlayer = document.getElementById('videoPlayer');
            const playButton = document.getElementById('playButton');
            const nextButton = document.getElementById('nextButton');
            const volumeSlider = document.getElementById('volumeSlider');
            const videoSource = document.getElementById('videoSource');
            const baseUrl = "https://api.cenguigui.cn/api/mp4/api.php?type=luoli&format=json";
        
            const loadVideo = () => {
                document.querySelector('.video-container').classList.add('fade-out');
                fetch(baseUrl)
                    .then(response => response.json())
                    .then(({ code, data }) => {
                        if (code === 200) {
                            videoSource.src = data.url;
                            videoPlayer.load();
                            videoPlayer.play();
                            document.querySelector('.video-container').classList.remove('fade-out');
                        } else {
                            console.error('Failed to fetch video URL');
                            document.querySelector('.video-container').classList.remove('fade-out');
                        }
                    })
                    .catch(error => {
                        console.error(error);
                        document.querySelector('.video-container').classList.remove('fade-out');
                    });
            };
        
            playButton.addEventListener('click', () => { loadVideo(); playButton.style.display = 'none'; });
            nextButton.addEventListener('click', loadVideo);
            videoPlayer.addEventListener('ended', loadVideo);
            videoPlayer.addEventListener('click', () => videoPlayer.paused ? videoPlayer.play() : 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 => {
                if (touchStartY > e.changedTouches[0].clientY + 50) loadVideo();
            });
        
            loadVideo();
        </script>

</html>

1赞

打赏