博客挂载随机小姐姐视频




在博客或者其他网页嵌套随机小姐姐视频，只需要把代码粘贴到想要展示的地方就可以了，文章页面也可以。

效果如下：

image-20240528151755448

作者: 懒觉猫先生
链接: https://blog.luoaicheng.cn/content/135/
来源: 懒猫

视频接口来源于外部接口，失效的话可以自行替换。其中：http://v.nrzj.vip/video.php 就是播放源。

修改播放源的时候一共有两处需要修改，一处是 video标签，默认打开页面播放视频时使用的播放源。

另一处是点击换一个按钮随机切换视频时的js代码player.src 部分。

随机视频源：

线路0：https://www.cunshao.com/666666/api/pc.php

线路1：https://jx.iqfk.top/api/sjsp.php

线路2：http://api.yujn.cn/api/zzxjj.php

线路3：https://www.cunshao.com/666666/api/web.php

线路4：https://api.qoc.cc/api/xjj

线路5：http://v.nrzj.vip/video.php

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
<div>
<section id="main">
<video id="player" src="http://v.nrzj.vip/video.php" controls="controls" width="100%" height="400px"></video>
</section>
</div>
<div style="text-align: center;">
<section id="buttons">
<button id="switch">连续: 开</button>
<button id="next1">换一个</button>
</section>
</div>
<script>
(function (window, document) {
if (top != self) {
window.top.location.replace(self.location.href);
}
var get = function (id) {
return document.getElementById(id);
}
var bind = function (element, event, callback) {
return element.addEventListener(event, callback);
}
var auto = true;
var player = get('player');
var randomm = function () {
player.src = 'http://v.nrzj.vip/video.php?_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(player, 'ended', function () {
if (auto) randomm();
});
})(window, document);</script>
<style>
#switch,#next1{
background: #7F9CCC;
color:#fff;
line-height:40px;
text-align:center;
width:100px;
border:none;
margin:0 6px;
border-radius:6px;
font-weight:bold;
}
</style>

我又对原来的代码进行了改良，添加了换源功能，可以根据需要自行选择播放源，并且调整了几个播放源的顺序，默认采用清晰横板的播放源码，调整了下播放源的显示顺序，将比较稳定的播放源放在了前面，效果如下：

image-20240528152913822

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
<div class="video-container">
  <section id="main">
    <video id="player" src="https://www.cunshao.com/666666/api/pc.php" controls="controls" width="100%" height="400px"></video>
  </section>
</div>
<div class="button-container">
  <button id="switch">连续: 开</button>
  <button id="next1">换一个</button>
  <button id="changeSource">换源</button>
  <div id="sourceSelectContainer">
    <select id="sourceSelect">
      <option value="https://www.cunshao.com/666666/api/pc.php">线路0</option>
	  <option value="https://jx.iqfk.top/api/sjsp.php">线路1</option>
	  <option value="http://api.yujn.cn/api/zzxjj.php">线路2</option>
      <option value="https://www.cunshao.com/666666/api/web.php">线路3</option>
	  <option value="https://api.qoc.cc/api/xjj">线路4</option>
      <option value="http://v.nrzj.vip/video.php">线路5</option>
    </select>
    <button id="applySource">应用</button>
  </div>
</div>
<style>
  .button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    position: relative;
  }
  .button-container button {
    background: #7F9CCC;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
  }
  #sourceSelectContainer {
    position: absolute;
    background: #fff;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    display: none;
  }
  #sourceSelect {
    display: block;
    width: 100%;
  }
  .video-container{
    padding-top:0px;
  }
</style>
<script>
  (function (window, document) {
    var get = function (id) {
      return document.getElementById(id);
    }
    var bind = function (element, event, callback) {
      return element.addEventListener(event, callback);
    }
    var auto = true;
    var player = get('player');
    var sourceSelect = get('sourceSelect');
    var adjustVideoSize = 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%'; /* 纵版视频的高度 */
      }
    };
    var randomm = function () {
      player.src = sourceSelect.value + '?_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(player, 'ended', function () {
      if (auto) randomm();
    });
    bind(get('changeSource'), 'click', function () {
      var sourceSelectContainer = get('sourceSelectContainer');
      sourceSelectContainer.style.display = sourceSelectContainer.style.display === 'none' ? 'block' : 'none';
    });
    bind(get('applySource'), 'click', function () {
      get('sourceSelectContainer').style.display = 'none'; // 隐藏下拉框
      randomm(); // 应用选定的视频源
    });
    bind(player, 'loadedmetadata', adjustVideoSize);
  })(window, document);
</script>

另外，我还单独写了个html文件，可以把代码复制下来，保存到一个html文件中，直接用浏览器打开，效果如下：

image-20240528150044058

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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Player with Source Switch</title>
<style>
  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
  }
  .video-container {
    width: 100%;
    max-width: 1200px; /* 放大横版视频的最大宽度 */
    position: relative;
    background-color: black;
  }
  #player {
    width: 100%;
    height: 100%;
    max-height: 85vh; /* 放大视频的最大高度 */
    object-fit: contain;
  }
  .button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    position: relative;
  }
  .button-container button {
    background: #7F9CCC;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
  }
  #sourceSelectContainer {
    position: absolute;
    background: #fff;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    display: none;
  }
  #sourceSelect {
    display: block;
    width: 100%;
  }
</style>
</head>
<body>
<div class="video-container">
  <section id="main">
    <video id="player" src="https://www.cunshao.com/666666/api/pc.php" controls="controls"></video>
  </section>
</div>
<div class="button-container">
  <button id="switch">连续: 开</button>
  <button id="next1">换一个</button>
  <button id="changeSource">换源</button>
  <div id="sourceSelectContainer">
    <select id="sourceSelect">
      <option value="https://www.cunshao.com/666666/api/pc.php">线路0</option>
	  <option value="https://jx.iqfk.top/api/sjsp.php">线路1</option>
	  <option value="http://api.yujn.cn/api/zzxjj.php">线路2</option>
      <option value="https://www.cunshao.com/666666/api/web.php">线路3</option>
	  <option value="https://api.qoc.cc/api/xjj">线路4</option>
      <option value="http://v.nrzj.vip/video.php">线路5</option>
    </select>
    <button id="applySource">应用</button>
  </div>
</div>
<script>
  (function (window, document) {
    var get = function (id) {
      return document.getElementById(id);
    }
    var bind = function (element, event, callback) {
      return element.addEventListener(event, callback);
    }
    var auto = true;
    var player = get('player');
    var sourceSelect = get('sourceSelect');

    var adjustVideoSize = 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 = '85vh'; /* 纵版视频的高度 */
      }
    };

    var randomm = function () {
      player.src = sourceSelect.value + '?_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(player, 'ended', function () {
      if (auto) randomm();
    });

    // 添加下拉框的显示和隐藏逻辑
    bind(get('changeSource'), 'click', function () {
      var sourceSelectContainer = get('sourceSelectContainer');
      sourceSelectContainer.style.display = sourceSelectContainer.style.display === 'none' ? 'block' : 'none';
    });

    // 添加下拉框选项的更改逻辑
    bind(get('applySource'), 'click', function () {
      get('sourceSelectContainer').style.display = 'none'; // 隐藏下拉框
      randomm(); // 应用选定的视频源
    });

    // 在视频元数据加载后调整视频尺寸
    bind(player, 'loadedmetadata', adjustVideoSize);
  })(window, document);
</script>
</body>
</html>

如果有其他更好的源码或者更稳定的播放源，欢迎评论交流。