hexo博客添加小姐姐

给索然无味的生活添加一些甜蜜

代码来源：

在此基础上做了一些优化，可访问养生堂查看效果

代码如下可直接粘贴到对应的页面使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>视频播放器</title>
    <style>
        .video-container {
            padding-top: 0px;
            text-align: center; /* 居中对齐 */
        }
        .button-container {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 10px;
        }
        .button-container button, .button-container select.source-selector { /* 统一按钮和选择器的样式 */
            background: #7F9CCC;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            font-weight: bold;
            cursor: pointer;
        }
        .source-selector {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height 0.3s ease, opacity 0.3s ease; /* 平滑过渡效果 */
        }
        .source-selector.show {
            max-height: 100px; /* 设置一个合理的最大高度 */
            opacity: 1;
        }
        h1 {
            text-align: center; /* 确保标题居中 */
        }
        h3 {
            text-align: right; /* 确保副标题右对齐 */
        }
    </style>
</head>
<body>

<h1>打了一辈子仗，就不能享受享受吗？</h1>

<div class="video-container">
    <section id="main">
        <video id="player" src="http://api.yujn.cn/api/zzxjj.php" controls autoplay width="100%" height="400px"></video>
    </section>
</div>

<div class="button-container">
    <button id="switch">连续: 开</button>
    <button id="next1">换一个</button>
    <button id="changeSource">切换源</button>
    <select id="sourceSelector" class="source-selector"> <!-- 默认隐藏 -->
        <option value="http://api.yujn.cn/api/zzxjj.php">默认版</option>
        <option value="https://www.cunshao.com/666666/api/pc.php">清晰横版</option>
        <option value="https://www.cunshao.com/666666/api/web.php">手机版</option>
        <option value="https://188sp.711888.xyz/188/video.php">歌唱版</option>
    </select>
</div>
<h3>养生不是一时兴起, 而是长期坚持的习惯</h3>

<script>
    (function (window, document) {
        var get = function (id) {
            return document.getElementById(id);
        }
        var bind = function (element, event, callback) {
            return element.addEventListener(event, callback);
        }

        var player = get('player');
        var auto = true;

        var changeSource = function () {
            var sourceSelector = get('sourceSelector');
            if (!sourceSelector.classList.contains('show')) {
                sourceSelector.classList.add('show'); // 显示下拉菜单
            } else {
                var selectedSource = sourceSelector.value; // 获取用户选择的源
                player.src = selectedSource + "?_t=" + Math.random(); // 更新src并避免缓存
                player.play();
                sourceSelector.classList.remove('show'); // 隐藏下拉菜单
            }
        };

        var randomm = function () {
            var currentSource = get('sourceSelector').value;
            player.src = currentSource + "?_t=" + Math.random();
            player.play();
        }

        bind(get('next1'), 'click', randomm);
        bind(player, 'error', function () {
            randomm();
        });
        bind(get('switch'), 'click', function () {
            auto = !auto;
            this.innerText = '连续: ' + (auto ? '开' : '关');
        });
        bind(get('changeSource'), 'click', changeSource); // 绑定新按钮的点击事件
        bind(player, 'ended', function () {
            if (auto) randomm();
        });
        bind(player, 'loadedmetadata', function () {
            var container = document.querySelector('.video-container');
            if (player.videoWidth / player.videoHeight > 1) {
                container.style.width = '100%';
                container.style.height = 'auto';
            } else {
                container.style.width = 'auto';
                container.style.height = '100%'; /* 纵版视频的高度 */
            }
        });

        // 当选择器改变时自动切换源并隐藏选择器
        bind(get('sourceSelector'), 'change', function () {
            var selectedSource = this.value; // 获取用户选择的源
            player.src = selectedSource + "?_t=" + Math.random(); // 更新src并避免缓存
            player.play();
            this.classList.remove('show'); // 隐藏下拉菜单
        });
    })(window, document);
</script>
</body>
</html>