pix侧边栏随机视频

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>随机视频</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background: rgb(235, 242, 237);
            margin: 0;
            font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
            box-sizing: border-box;
        }

        .card {
            width: 100%;
            max-width: 100vw;
            margin: 0 auto;
            background: rgb(235, 242, 237);
            border-radius: 1.5rem;
            box-shadow: 0 4px 24px rgba(80, 80, 120, 0.10);
            padding: 8px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
        }

        .video-wrapper {
            width: 100%;
            max-width: 100vw;
            aspect-ratio: 9/16;
            border-radius: 1rem;
            overflow: hidden;
            background: rgb(235, 242, 237);
            box-shadow: 0 2px 12px rgba(80, 80, 120, 0.12);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            box-sizing: border-box;
        }

        video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 1rem;
            background: rgba(245, 245, 255, 0.7);
            display: block;
        }

        #refreshBtn {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(60, 60, 60, 0.7);
            border: none;
            outline: none;
            cursor: grab;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 16px rgba(60, 60, 60, 0.88);
            border-radius: 50%;
            padding: 0;
            width: 36px;
            height: 36px;
            transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
            z-index: 2;
            user-select: none;
        }

        #refreshBtn:active {
            transform: translateY(-50%) rotate(-30deg) scale(0.95);
            box-shadow: 0 1px 4px rgba(80, 80, 120, 0.18);
            background: rgba(60, 60, 60, 0.85);
            cursor: grabbing;
        }

        @media (max-width: 500px) {
            .card {
                width: 100vw;
                max-width: 100vw;
                padding: 4px 0;
                border-radius: 0.8rem;
            }

            .video-wrapper {
                width: 100vw;
                max-width: 100vw;
                border-radius: 0.8rem;
            }
        }
    </style>
</head>

<body>
    <div class="card">
        <div class="video-wrapper">
            <video id="randomVideo" src="https://api.yujn.cn/api/zzxjj.php" controls></video>
            <button id="refreshBtn" title="刷新视频">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24" height="24">
                    <path
                        d="M12 4C9.25144 4 6.82508 5.38626 5.38443 7.5H8V9.5H2V3.5H4V5.99936C5.82381 3.57166 8.72764 2 12 2C17.5228 2 22 6.47715 22 12H20C20 7.58172 16.4183 4 12 4ZM4 12C4 16.4183 7.58172 20 12 20C14.7486 20 17.1749 18.6137 18.6156 16.5H16V14.5H22V20.5H20V18.0006C18.1762 20.4283 15.2724 22 12 22C6.47715 22 2 17.5228 2 12H4Z">
                    </path>
                </svg>
            </button>
        </div>
    </div>
    <script>
        // 刷新视频功能
        document.getElementById('refreshBtn').onclick = function (e) {
            // 如果正在拖动则不触发刷新
            if (window._draggingBtn) return;
            var video = document.getElementById('randomVideo');
            video.src = 'https://api.yujn.cn/api/zzxjj.php?t=' + Date.now();
            video.load();
            video.play();
        };

        // 拖动按钮功能
        (function () {
            var btn = document.getElementById('refreshBtn');
            var wrapper = btn.parentElement;
            var dragging = false, offsetX = 0, offsetY = 0;
            var startX, startY, btnX, btnY;

            // 初始位置
            btn.style.right = '10px';
            btn.style.top = '50%';
            btn.style.left = '';
            btn.style.bottom = '';

            btn.addEventListener('mousedown', function (e) {
                dragging = true;
                window._draggingBtn = true;
                btn.style.cursor = 'grabbing';
                var rect = wrapper.getBoundingClientRect();
                var btnRect = btn.getBoundingClientRect();
                startX = e.clientX;
                startY = e.clientY;
                btnX = btnRect.left - rect.left;
                btnY = btnRect.top - rect.top;
                document.body.style.userSelect = 'none';
            });

            document.addEventListener('mousemove', function (e) {
                if (!dragging) return;
                var wrapperRect = wrapper.getBoundingClientRect();
                var x = btnX + (e.clientX - startX);
                var y = btnY + (e.clientY - startY);
                // 限制在容器内
                x = Math.max(0, Math.min(wrapperRect.width - btn.offsetWidth, x));
                y = Math.max(0, Math.min(wrapperRect.height - btn.offsetHeight, y));
                btn.style.left = x + 'px';
                btn.style.top = y + 'px';
                btn.style.right = '';
                btn.style.transform = '';
            });

            document.addEventListener('mouseup', function (e) {
                if (dragging) {
                    dragging = false;
                    window._draggingBtn = false;
                    btn.style.cursor = 'grab';
                    document.body.style.userSelect = '';
                }
            });
        })();
    </script>
</body>

</html>
推荐订阅源

云云星羽
