源界面 源界面 8天前

刷视频 随机舞蹈

html/css

一个刷视频的界面。只要一个page就能展示了。
当然要找到很多在线小姐姐视频才能播放。
bgSfDaB8
源码如下：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6.     <!-- iOS 相关meta标签 -->
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  9.     <meta name="apple-mobile-web-app-title" content="随机舞蹈">
  10.     <title>刷视频</title>
  11.     <style>
  12.         /* 防止iOS点击闪烁 */
  13.         * {
  14.             -webkit-tap-highlight-color: transparent;
  15.             -webkit-touch-callout: none;
  16.             -webkit-user-select: none;
  17.             user-select: none;
  18.         }
  20.         /* 适配刘海屏和曲面屏 */
  21.         body {
  22.             padding-top: env(safe-area-inset-top);
  23.             padding-bottom: env(safe-area-inset-bottom);
  24.             padding-left: env(safe-area-inset-left);
  25.             padding-right: env(safe-area-inset-right);
  26.             background-color: #f5f5f5; /* 白色背景 */
  27.         }
  29.         /* 全局样式 */
  30.         * {
  31.             margin: 0;
  32.             padding: 0;
  33.             box-sizing: border-box;
  34.         }
  36.         body {
  37.             background-color: #f5f5f5; /* 浅灰色背景 */
  38.             min-height: 100vh;
  39.             display: flex;
  40.             align-items: center;
  41.             justify-content: center;
  42.             font-family: 'Microsoft YaHei', sans-serif;
  43.             flex-direction: column; /* 使内容垂直排列 */
  44.         }
  46.         .container {
  47.             width: 95%;
  48.             max-width: 900px;
  49.             margin: 20px auto;
  50.             padding: 20px;
  51.             background: #f5f5f5; /* 白色背景 */
  52.             border-radius: 20px;
  53.             box-shadow: 
  54.                 8px 8px 16px rgba(0, 0, 0, 0.05),  /* 外阴影 - 模拟下沉效果 */
  55.                 -8px -8px 16px rgba(255, 255, 255, 0.8); /* 内阴影 - 模拟高光 */
  56.             padding-bottom: calc(20px + env(safe-area-inset-bottom));
  57.             position: relative; /* 使容器相对定位 */
  58.             transition: transform 0.5s ease, height 0.5s ease;
  59.         }
  61.         .video-container {
  62.             position: relative;
  63.             width: 100%;
  64.             height: calc(100vh - 200px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  65.             min-height: 400px;
  66.             margin-bottom: 30px;
  67.             border-radius: 15px;
  68.             overflow: hidden;
  69.             box-shadow: 
  70.                 inset 5px 5px 10px rgba(0, 0, 0, 0.05),  /* 内阴影 - 模拟下沉效果 */
  71.                 inset -5px -5px 10px rgba(255, 255, 255, 0.8); /* 内高光阴影 */
  72.             transition: all 0.5s ease;
  73.         }
  75.         video {
  76.             position: absolute;
  77.             top: 50%;
  78.             left: 50%;
  79.             width: 100%;
  80.             height: 100%;
  81.             object-fit: cover; /* 修改为cover以适配曲面屏，避免黑边 */
  82.             transform: translate(-50%, -50%); /* 居中对齐 */
  83.             border-radius: 10px;
  84.             background: #000;
  85.             touch-action: manipulation;
  86.         }
  88.         .controls {
  89.             display: flex;
  90.             justify-content: center;
  91.             gap: 20px;
  92.             flex-wrap: wrap;
  93.             margin-top: 20px;
  94.             transition: all 0.5s ease;
  95.         }
  97.         button {
  98.             -webkit-appearance: none;
  99.             appearance: none;
  100.             min-width: 120px;
  101.             padding: 14px 25px;
  102.             font-size: 16px;
  103.             cursor: pointer;
  104.             border: none;
  105.             border-radius: 50px;
  106.             color: #333;
  107.             font-weight: bold;
  108.             transition: all 0.3s ease, background-color 0.3s ease, color 0.3s ease; /* 添加颜色过渡效果 */
  109.             box-shadow: 
  110.                 5px 5px 10px rgba(0, 0, 0, 0.1),  /* 外阴影 - 模拟下沉效果 */
  111.                 -5px -5px 10px rgba(255, 255, 255, 1); /* 内阴影 - 模拟高光 */
  112.         }
  114.         /* 拟态化按钮状态变化 */
  115.         button:active {
  116.             box-shadow: 
  117.                 inset 5px 5px 10px rgba(0, 0, 0, 0.1),  /* 按下时的内阴影 */
  118.                 inset -5px -5px 10px rgba(255, 255, 255, 1); /* 按下时的内高光 */
  119.             transform: translateY(2px);
  120.         }
  122.         /* 按钮悬停效果 - 增强颜色过渡 */
  123.         button:hover {
  124.             box-shadow: 
  125.                 3px 3px 7px rgba(0, 0, 0, 0.15),  /* 悬停时的外阴影 */
  126.                 -3px -3px 7px rgba(255, 255, 255, 1); /* 悬停时的内高光 */
  127.             transform: translateY(-1px);
  128.         }
  130.         /* 按钮主题渐变色 - 保持原有功能区分并添加渐变效果 */
  131.         .next-button {
  132.             background: linear-gradient(135deg, #ffeff0, #ffccd5); /* 浅红到粉红渐变 */
  133.         }
  134.         .next-button:hover {
  135.             background: linear-gradient(135deg, #ffccd5, #ffabbf); /* 悬停时颜色加深 */
  136.         }
  138.         .refresh-button {
  139.             background: linear-gradient(135deg, #e6f7ff, #bae1ff); /* 浅蓝到蓝紫渐变 */
  140.         }
  141.         .refresh-button:hover {
  142.             background: linear-gradient(135deg, #bae1ff, #90caf9); /* 悬停时颜色加深 */
  143.         }
  145.         .play-toggle-button {
  146.             background: linear-gradient(135deg, #f0e6ff, #dbb6fd); /* 浅紫到淡紫渐变 */
  147.         }
  148.         .play-toggle-button:hover {
  149.             background: linear-gradient(135deg, #dbb6fd, #b388ff); /* 悬停时颜色加深 */
  150.         }
  152.         .home-button {
  153.             background: linear-gradient(135deg, #fff3e0, #ffd59c); /* 浅黄到橙黄渐变 */
  154.         }
  155.         .home-button:hover {
  156.             background: linear-gradient(135deg, #ffd59c, #ffb74d); /* 悬停时颜色加深 */
  157.         }
  159.         .collapse-button {
  160.             background: linear-gradient(135deg, #e8f5e9, #b2f5b4); /* 浅绿到嫩绿渐变 */
  161.         }
  162.         .collapse-button:hover {
  163.             background: linear-gradient(135deg, #b2f5b4, #81c784); /* 悬停时颜色加深 */
  164.         }
  166.         .like-button {
  167.             background: linear-gradient(135deg, #fff3e0, #ffd59c); /* 浅橙到橙红渐变 */
  168.         }
  169.         .like-button:hover {
  170.             background: linear-gradient(135deg, #ffd59c, #ffab91); /* 悬停时颜色加深 */
  171.         }
  173.         .pip-button {
  174.             background: linear-gradient(135deg, #e0f7fa, #bae8ed); /* 浅青到青蓝渐变 */
  175.         }
  176.         .pip-button:hover {
  177.             background: linear-gradient(135deg, #bae8ed, #80deea); /* 悬停时颜色加深 */
  178.         }
  180.         .expand-button {
  181.             background: linear-gradient(135deg, #e8f5e9, #b2f5b4); /* 浅绿到嫩绿渐变 */
  182.             display: none;
  183.             margin: 20px auto 0; /* 居中显示 */
  184.         }
  185.         .expand-button:hover {
  186.             background: linear-gradient(135deg, #b2f5b4, #81c784); /* 悬停时颜色加深 */
  187.         }
  189.         /* 响应式设计 */
  190.         @media (max-width: 768px) {
  191.             .container {
  192.                 width: 98%;
  193.                 padding: 15px;
  194.             }
  196.             button {
  197.                 min-width: 100px;
  198.                 padding: 12px 20px;
  199.                 font-size: 14px;
  200.             }
  202.             .controls {
  203.                 gap: 10px;
  204.             }
  205.         }
  207.         /* 添加加载动画 */
  208.         @keyframes pulse {
  209.             0% { opacity: 1; }
  210.             50% { opacity: 0.5; }
  211.             100% { opacity: 1; }
  212.         }
  214.         .loading {
  215.             animation: pulse 1.5s infinite;
  216.         }
  218.         /* 添加iOS风格的加载动画 */
  219.         @keyframes ios-loading {
  220.             0% { transform: rotate(0deg); }
  221.             100% { transform: rotate(360deg); }
  222.         }
  224.         .loading::after {
  225.             content: '';
  226.             position: absolute;
  227.             top: 50%;
  228.             left: 50%;
  229.             width: 40px;
  230.             height: 40px;
  231.             margin: -20px 0 0 -20px;
  232.             border: 4px solid #333;
  233.             border-top-color: transparent;
  234.             border-radius: 50%;
  235.             animation: ios-loading 1s linear infinite;
  236.         }
  238.         /* 爱心动画效果 */
  239.         @keyframes floatUp {
  240.             0% {
  241.                 transform: translateY(0) scale(1);
  242.                 opacity: 1;
  243.             }
  244.             100% {
  245.                 transform: translateY(-100px) scale(1.5);
  246.                 opacity: 0;
  247.             }
  248.         }
  250.         .floating-heart {
  251.             position: absolute;
  252.             font-size: 20px;
  253.             animation: floatUp 3s forwards;
  254.             pointer-events: none;
  255.         }
  257.         /* 提示框样式 */
  258.         .alert {
  259.             position: absolute;
  260.             top: 50%;
  261.             left: 50%;
  262.             transform: translate(-50%, -50%);
  263.             background: #f5f5f5;
  264.             padding: 20px;
  265.             border-radius: 10px;
  266.             box-shadow: 
  267.                 5px 5px 10px rgba(0, 0, 0, 0.1),
  268.                 -5px -5px 10px rgba(255, 255, 255, 1);
  269.             display: none; /* 默认隐藏 */
  270.         }
  272.         /* 版权信息样式 */
  273.         .copyright {
  274.             margin-top: 20px;
  275.             font-size: 14px;
  276.             text-align: center; /* 居中显示 */
  277.             color: #666;
  278.         }
  280.         /* 折叠状态样式 */
  281.         .collapsed .video-container {
  282.             height: 0;
  283.             min-height: 0;
  284.             margin-bottom: 0;
  285.             overflow: hidden;
  286.             opacity: 0;
  287.         }
  289.         .collapsed .controls {
  290.             opacity: 0;
  291.             height: 0;
  292.             margin-top: 0;
  293.             overflow: hidden;
  294.         }
  296.         .collapsed .copyright {
  297.             opacity: 0;
  298.             height: 0;
  299.             margin-top: 0;
  300.             overflow: hidden;
  301.         }
  303.         .collapsed .expand-button {
  304.             display: block;
  305.             margin: 20px auto 0; /* 居中显示 */
  306.         }
  307.     </style>
  308. </head>
  309. <body>
  310.     <div class="container" id="mainContainer">
  311.         <div class="video-container">
  312.             <video id="danceVideo" controls>
  313.                 您的浏览器不支持视频播放。
  314.             </video>
  315.         </div>
  316.         <div class="controls">
  317.             <button class="home-button" onclick="goToHome()">返回首页</button>
  318.             <button class="next-button" onclick="nextVideo()">下一个</button>
  319.             <button class="refresh-button" onclick="refreshVideo()">刷新</button>
  320.             <button class="play-toggle-button" onclick="togglePlay()">暂停/播放</button>
  321.             <button class="collapse-button" onclick="collapsePlayer()">收起</button>
  322.             <button class="like-button" onclick="createHearts()">点赞</button>
  323.             <button class="pip-button" onclick="togglePip()">画中画</button>
  324.         </div>
  325.         <button class="expand-button" onclick="expandPlayer()">展开视频</button>
  326.         <div class="alert" id="alertBox">复制成功，请打开浏览器进行下载保存！</div>
  327.        <!-- <div class="copyright"><a href="https://www.nm1.cn/" id="copyrightLink">© 2025 随机视频 保留所有权利.</a></div> -->
  328.     </div>
  329.     <script>var _hmt = _hmt || [];(function() {  var hm = document.createElement("script");  hm.src = "https://hm.baidu.com/hm.js?10e39dcbd066fa2163734510b7830bd1";  var s = document.getElementsByTagName("script")[0];   s.parentNode.insertBefore(hm, s);})();</script>
  331.     <script>
  332.         /**
  333.          * @type {HTMLVideoElement}
  334.          */
  335.         const video = document.getElementById('danceVideo');
  336.         const container = document.getElementById('mainContainer');
  337.         let savedCurrentTime = 0;
  339.         /**
  340.          * 视频源数组 - 可以替换为您自己的API或视频源
  341.          * @type {string[]}
  342.          */
  343.         const videoSources = [
  344.             'http://api.yujn.cn/api/xjj.php?type=video', /**青春美女视频 */
  345.             'https://v2.xxapi.cn/api/meinv',  /**美女跳舞视频 */
  346.             'https://www.hhlqilongzhu.cn/api/MP4_xiaojiejie.php', /**青春美女视频 */
  347.             'http://v.nrzj.vip/video.php', /**美女跳舞视频 */
  348.             'http://api.xingchenfu.xyz/API/nvda.php', /**青春美女视频 */
  349.             'http://api.xingchenfu.xyz/API/zzxjj.php', /**青春美女视频 */
  350.             'http://api.xingchenfu.xyz/API/shejie.php', /**青春美女视频 */
  351.             'http://api.xingchenfu.xyz/API/rwsp.php', /**美女跳舞视频 */
  352.             'http://api.mmp.cc/api/shortvideo?type=mp4', /**美女跳舞视频 */
  353.             'https://www.tuwei.space/home.html', /**随机美女视频 */
  354.             'https://api.yviii.com/video/i.php', /**随机美女视频 */
  355.             'https://dsp.yeqsy.com/video.php?lx=video', /**随机美女视频 */
  356.         ];
  358.         /**
  359.          * 获取随机视频源
  360.          * @returns {string} 随机视频URL
  361.          */
  362.         function getRandomVideo() {
  363.             const randomIndex = Math.floor(Math.random() * videoSources.length);
  364.             return videoSources[randomIndex];
  365.         }
  367.         /**
  368.          * 添加加载状态处理
  369.          */
  370.         function setLoading(isLoading) {
  371.             const video = document.getElementById('danceVideo');
  372.             if (isLoading) {
  373.                 video.classList.add('loading');
  374.             } else {
  375.                 video.classList.remove('loading');
  376.             }
  377.         }
  379.         /**
  380.          * 增强版的下一个视频函数
  381.          */
  382.         async function nextVideo() {
  383.             setLoading(true);
  384.             const newSrc = getRandomVideo();
  385.             // 确保不会连续播放同一个视频
  386.             if (newSrc === video.src) {
  387.                 return nextVideo();
  388.             }
  389.             video.src = newSrc;
  390.             try {
  391.                 await video.play();
  392.             } catch (error) {
  393.                 console.error('视频播放失败:', error);
  394.             }
  395.             video.oncanplay = () => {
  396.                 setLoading(false);
  397.             };
  398.         }
  400.         /**
  401.          * 刷新当前视频
  402.          */
  403.         function refreshVideo() {
  404.             video.currentTime = 0;
  405.             video.play();
  406.         }
  408.         /**
  409.          * 切换视频播放/暂停状态
  410.          */
  411.         function togglePlay() {
  412.             if (video.paused) {
  413.                 video.play();
  414.             } else {
  415.                 video.pause();
  416.             }
  417.         }
  419.         /**
  420.          * 创建爱心动画效果
  421.          */
  422.         function createHearts() {
  423.             for(let i = 0; i < 15; i++) {
  424.                 setTimeout(() => {
  425.                     const heart = document.createElement('div');
  426.                     heart.innerHTML = ['❤️', '⭐', '✨', '💖', '💕'][Math.floor(Math.random() * 5)];
  427.                     heart.className = 'floating-heart';
  428.                     heart.style.left = Math.random() * window.innerWidth + 'px';
  429.                     heart.style.fontSize = (20 + Math.random() * 20) + 'px';
  430.                     document.body.appendChild(heart);
  432.                     setTimeout(() => {
  433.                         heart.remove();
  434.                     }, 3000);
  435.                 }, i * 100);
  436.             }
  437.         }
  439.         /**
  440.          * 切换画中画模式
  441.          */
  442.         function togglePip() {
  443.             if (document.pictureInPictureElement) {
  444.                 document.exitPictureInPicture().catch(error => {
  445.                     console.error('退出画中画失败:', error);
  446.                 });
  447.             } else {
  448.                 video.requestPictureInPicture().catch(error => {
  449.                     console.error('进入画中画失败:', error);
  450.                 });
  451.             }
  452.         }
  454.         /**
  455.          * 收起视频播放器
  456.          */
  457.         function collapsePlayer() {
  458.             savedCurrentTime = video.currentTime;
  459.             video.pause();
  460.             container.classList.add('collapsed');
  461.         }
  463.         /**
  464.          * 展开视频播放器
  465.          */
  466.         function expandPlayer() {
  467.             container.classList.remove('collapsed');
  468.             // 等待动画完成后恢复播放
  469.             setTimeout(() => {
  470.                 video.currentTime = savedCurrentTime;
  471.                 video.play();
  472.             }, 500);
  473.         }
  475.         /**
  476.          * 返回首页功能
  477.          */
  478.         function goToHome() {
  479.             window.location.href = "https://www.nm1.cn/"; // 在当前页面打开首页
  480.         }
  482.         // 禁用双指缩放
  483.         document.addEventListener('gesturestart', function(e) {
  484.             e.preventDefault();
  485.         });
  487.         // 处理iOS的各种手势
  488.         let touchStartY = 0;
  489.         document.addEventListener('touchstart', function(e) {
  490.             touchStartY = e.touches[0].clientY;
  491.         }, { passive: false });
  493.         document.addEventListener('touchmove', function(e) {
  494.             const touchY = e.touches[0].clientY;
  495.             const delta = touchStartY - touchY;
  497.             // 如果不是在视频上滑动，则阻止默认行为
  498.             if (!e.target.matches('video')) {
  499.                 e.preventDefault();
  500.             }
  501.         }, { passive: false });
  503.         // 添加iOS的错误处理
  504.         video.addEventListener('error', function(e) {
  505.             console.error('视频加载错误:', e.target.error);
  506.             nextVideo();
  507.         });
  509.         // 处理iOS后台播放
  510.         document.addEventListener('visibilitychange', function() {
  511.             if (document.hidden) {
  512.                 video.pause();
  513.             }
  514.         });
  516.         // 初始化
  517.         window.onload = function() {
  518.             nextVideo();
  519.             video.addEventListener('ended', nextVideo); // 播放完自动播放下一个
  520.         };
  521.     </script>
  522. </body>
  523. </html>

演示访问地址：https://www.nm1.cn/shipin/