博客挂载随机小姐姐视频

作者: 時光
原文: https://blog.shiguang666.eu.org/2024/05/28/e2e447f35760/
来源: 時光的博客园子

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

效果如下：

作者: 懒觉猫先生
链接: 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

<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>

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

<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文件中，直接用浏览器打开，效果如下：

<!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>

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

posted @ 2024-06-26 14:27 時光心向阳阅读(524) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Butterfly主题配置及美化

· Hexo基本使用

· 博客园美化「详细教程+代码配置」

· PHP实现获取本地视频进行随机播放

· 微信小程序(六)视频页

阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了

阅读目录(Content)

此页目录为空

時光

念两句诗

博客挂载随机小姐姐视频

公告

个人信息

日历

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论