设为首页收藏本站
切换到窄版

 找回密码
 立即注册
搜索
蔡州手游»论坛 › 网络资源 › 网络源码 › 随机美女小姐姐视频播放源码
返回列表 发新帖
查看: 3536|回复: 0

随机美女小姐姐视频播放源码

[复制链接]
china0396
  • 打卡等级：暂无等级
  • 打卡总天数：189
  • 打卡月天数：13
  • 打卡总奖励：145
  • 最近打卡：2025-11-13 10:56:25
灌水成绩
13861
48
2034798
主题
帖子
积分

等级头衔

ID : 1

管理员

积分成就 威望 : 999999 点
贡献 : 9999 次
下载币 : 10892 枚
在线时间 : 1011 小时
注册时间 : 2013-9-5
最后登录 : 2025-11-13

发表于 昨天 18:36 | 显示全部楼层 |阅读模式 IP:广东东莞
免责
免费领取大流量卡,每日更新—蔡州手游APP—源码密码—加入群聊—接手游搭建—``下载币--购买服务器☆长期招聘游戏测试员（无偿）,有兴趣联系站长QQ58493525微信A0396C
  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.    
  11.     <!-- 添加到主屏幕的图标 -->
  12.     <link rel="apple-touch-icon" href="icon-180.png">
  13.     <link rel="apple-touch-icon" sizes="152x152" href="icon-152.png">
  14.     <link rel="apple-touch-icon" sizes="180x180" href="icon-180.png">
  15.     <link rel="apple-touch-icon" sizes="167x167" href="icon-167.png">
  16.    
  17.     <!-- 启动画面 -->
  18.     <link rel="apple-touch-startup-image" href="launch.png">
  19.    
  20.     <title>随机舞蹈视频</title>
  21.     <style>
  22.         /* 防止iOS点击闪烁 */
  23.         * {
  24.             -webkit-tap-highlight-color: transparent;
  25.             -webkit-touch-callout: none;
  26.             -webkit-user-select: none;
  27.             user-select: none;
  28.         }
  29.         
  30.         /* 适配刘海屏和曲面屏 */
  31.         body {
  32.             padding-top: env(safe-area-inset-top);
  33.             padding-bottom: env(safe-area-inset-bottom);
  34.             padding-left: env(safe-area-inset-left);
  35.             padding-right: env(safe-area-inset-right);
  36.         }

  38.         /* 全局样式 */
  39.         * {
  40.             margin: 0;
  41.             padding: 0;
  42.             box-sizing: border-box;
  43.         }

  45.         body {
  46.             background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
  47.             min-height: 100vh;
  48.             display: flex;
  49.             align-items: center;
  50.             justify-content: center;
  51.             font-family: 'Microsoft YaHei', sans-serif;
  52.             flex-direction: column; /* 使内容垂直排列 */
  53.         }

  55.         .container {
  56.             width: 95%;
  57.             max-width: 1200px;
  58.             margin: 20px auto;
  59.             padding: 20px;
  60.             background: rgba(255, 255, 255, 0.1);
  61.             border-radius: 15px;
  62.             backdrop-filter: blur(10px);
  63.             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  64.             padding-bottom: calc(20px + env(safe-area-inset-bottom));
  65.             position: relative; /* 使容器相对定位 */
  66.         }

  68.         .video-container {
  69.             position: relative;
  70.             width: 100%;
  71.             height: calc(100vh - 200px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  72.             min-height: 400px;
  73.             margin-bottom: 30px;
  74.             border-radius: 10px;
  75.             overflow: hidden;
  76.             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  77.         }

  79.         video {
  80.             position: absolute;
  81.             top: 50%;
  82.             left: 50%;
  83.             width: 100%;
  84.             height: 100%;
  85.             object-fit: cover; /* 修改为cover以适配曲面屏，避免黑边 */
  86.             transform: translate(-50%, -50%); /* 居中对齐 */
  87.             border-radius: 10px;
  88.             background: #000;
  89.             touch-action: manipulation;
  90.         }

  92.         .controls {
  93.             display: flex;
  94.             justify-content: center;
  95.             gap: 20px;
  96.             flex-wrap: wrap;
  97.         }

  99.         button {
  100.             -webkit-appearance: none;
  101.             appearance: none;
  102.             min-width: 120px;
  103.             padding: 12px 25px;
  104.             font-size: 16px;
  105.             cursor: pointer;
  106.             border: none;
  107.             border-radius: 50px;
  108.             color: white;
  109.             font-weight: bold;
  110.             transition: all 0.3s ease;
  111.             background-size: 200% auto;
  112.             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  113.         }

  115.         /* 所有按钮设置渐变色 */
  116.         .next-button {
  117.             background-image: linear-gradient(45deg, #FF6B6B, #FFE66D);
  118.         }

  120.         .refresh-button {
  121.             background-image: linear-gradient(45deg, #4ECDC4, #556270);
  122.         }

  124.         .play-toggle-button {
  125.             background-image: linear-gradient(45deg, #6C5CE7, #a367dc);
  126.         }

  128.         .like-button {
  129.             background-image: linear-gradient(45deg, #FF6B6B, #FFE66D);
  130.         }

  132.         .pip-button {
  133.             background-image: linear-gradient(45deg, #6bd0ff, #ce43b7);
  134.         }

  136.         button:hover {
  137.             background-position: right center;
  138.             transform: translateY(-2px);
  139.             box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  140.         }

  142.         /* 响应式设计 */
  143.         @media (max-width: 768px) {
  144.             .container {
  145.                 width: 98%;
  146.                 padding: 10px;
  147.             }

  149.             button {
  150.                 min-width: 100px;
  151.                 padding: 10px 20px;
  152.                 font-size: 14px;
  153.             }

  155.             .controls {
  156.                 gap: 10px;
  157.             }
  158.         }

  160.         /* 添加加载动画 */
  161.         @keyframes pulse {
  162.             0% { opacity: 1; }
  163.             50% { opacity: 0.5; }
  164.             100% { opacity: 1; }
  165.         }

  167.         .loading {
  168.             animation: pulse 1.5s infinite;
  169.         }

  171.         /* 添加iOS风格的加载动画 */
  172.         @keyframes ios-loading {
  173.             0% { transform: rotate(0deg); }
  174.             100% { transform: rotate(360deg); }
  175.         }

  177.         .loading::after {
  178.             content: '';
  179.             position: absolute;
  180.             top: 50%;
  181.             left: 50%;
  182.             width: 40px;
  183.             height: 40px;
  184.             margin: -20px 0 0 -20px;
  185.             border: 4px solid #fff;
  186.             border-top-color: transparent;
  187.             border-radius: 50%;
  188.             animation: ios-loading 1s linear infinite;
  189.         }

  191.         /* 添加视频播放器控件的iOS风格 */
  192.         video::-webkit-media-controls-panel {
  193.             background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  194.         }

  196.         /* 爱心动画效果 */
  197.         @keyframes floatUp {
  198.             0% {
  199.                 transform: translateY(0) scale(1);
  200.                 opacity: 1;
  201.             }
  202.             100% {
  203.                 transform: translateY(-100px) scale(1.5);
  204.                 opacity: 0;
  205.             }
  206.         }

  208.         .floating-heart {
  209.             position: absolute;
  210.             font-size: 20px;
  211.             animation: floatUp 3s forwards;
  212.             pointer-events: none;
  213.         }

  215.         /* 提示框样式 */
  216.         .alert {
  217.             position: absolute;
  218.             top: 50%;
  219.             left: 50%;
  220.             transform: translate(-50%, -50%);
  221.             background: rgba(255, 255, 255, 0.8);
  222.             padding: 20px;
  223.             border-radius: 10px;
  224.             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  225.             display: none; /* 默认隐藏 */
  226.         }

  228.         /* 版权信息样式 */
  229.         .copyright {
  230.             margin-top: 20px;
  231.             font-size: 14px;
  232.             text-align: center; /* 居中显示 */
  233.             background: linear-gradient(45deg, #08962b, #431b8d); /* 渐变色 */
  234.             -webkit-background-clip: text;
  235.             -webkit-text-fill-color: transparent; /* 文字填充透明 */
  236.         }
  237.     </style>
  238. </head>
  239. <body>
  240.     <div class="container">
  241.         <div class="video-container">
  242.             <video id="danceVideo" controls>
  243.                 您的浏览器不支持视频播放。
  244.             </video>
  245.         </div>
  246.         <div class="controls">
  247.             <button class="next-button" onclick="nextVideo()">下一个</button>
  248.             <button class="refresh-button" onclick="refreshVideo()">刷新</button>
  249.             <button class="play-toggle-button" onclick="togglePlay()">暂停/播放</button>
  250.             <button class="like-button" onclick="createHearts()">点赞</button>
  251.             <button class="pip-button" onclick="togglePip()">画中画</button>
  252.         </div>
  253.         <div class="alert" id="alertBox">复制成功，请打开浏览器进行下载保存！</div>
  254.         <div class="copyright"><a href="https://www.dadawz.cn/" id="copyrightLink">© 2024 大大-随机舞蹈. 保留所有权利.</a></div> <!-- 大大博客 https://www.dadawz.cn/-->
  255.     </div>

  257.     <script>
  258.         /**
  259.          * [url=home.php?mod=space&uid=8139]@type[/url] {HTMLVideoElement}
  260.          */
  261.         const video = document.getElementById('danceVideo');

  263.         /**
  264.          * 视频源数组 - 可以替换为您自己的API或视频源
  265.          * @type {string[]}
  266.          */
  267.         const videoSources = [
  268.             'https://api.yviii.com/video/suiji.php',
  269.             'https://api.yviii.com/video/i.php',
  270.             'http://api.mhycloud.fun:81/api/dy',
  271.         ];

  273.         /**
  274.          * 获取随机视频源
  275.          * @returns {string} 随机视频URL
  276.          */
  277.         function getRandomVideo() {
  278.             const randomIndex = Math.floor(Math.random() * videoSources.length);
  279.             return videoSources[randomIndex];
  280.         }

  282.         /**
  283.          * 添加加载状态处理
  284.          */
  285.         function setLoading(isLoading) {
  286.             const video = document.getElementById('danceVideo');
  287.             if (isLoading) {
  288.                 video.classList.add('loading');
  289.             } else {
  290.                 video.classList.remove('loading');
  291.             }
  292.         }

  294.         /**
  295.          * 增强版的下一个视频函数
  296.          */
  297.         async function nextVideo() {
  298.             setLoading(true);
  299.             const newSrc = getRandomVideo();
  300.             // 确保不会连续播放同一个视频
  301.             if (newSrc === video.src) {
  302.                 return nextVideo();
  303.             }
  304.             video.src = newSrc;
  305.             try {
  306.                 await video.play();
  307.             } catch (error) {
  308.                 console.error('视频播放失败:', error);
  309.             }
  310.             video.oncanplay = () => {
  311.                 setLoading(false);
  312.             };
  313.         }

  315.         /**
  316.          * 刷新当前视频
  317.          */
  318.         function refreshVideo() {
  319.             video.currentTime = 0;
  320.             video.play();
  321.         }

  323.         /**
  324.          * 切换视频播放/暂停状态
  325.          */
  326.         function togglePlay() {
  327.             if (video.paused) {
  328.                 video.play();
  329.             } else {
  330.                 video.pause();
  331.             }
  332.         }

  334.         /**
  335.          * 创建爱心动画效果
  336.          */
  337.         function createHearts() {
  338.             for(let i = 0; i < 15; i++) {
  339.                 setTimeout(() => {
  340.                     const heart = document.createElement('div');
  341.                     heart.innerHTML = ['❤️', '⭐', '✨', '💖', '💕'][Math.floor(Math.random() * 5)];
  342.                     heart.className = 'floating-heart';
  343.                     heart.style.left = Math.random() * window.innerWidth + 'px';
  344.                     heart.style.fontSize = (20 + Math.random() * 20) + 'px';
  345.                     document.body.appendChild(heart);
  346.                     
  347.                     setTimeout(() => {
  348.                         heart.remove();
  349.                     }, 3000);
  350.                 }, i * 100);
  351.             }
  352.         }

  354.         /**
  355.          * 切换画中画模式
  356.          */
  357.         function togglePip() {
  358.             if (document.pictureInPictureElement) {
  359.                 document.exitPictureInPicture().catch(error => {
  360.                     console.error('退出画中画失败:', error);
  361.                 });
  362.             } else {
  363.                 video.requestPictureInPicture().catch(error => {
  364.                     console.error('进入画中画失败:', error);
  365.                 });
  366.             }
  367.         }

  369.         // 禁用双指缩放
  370.         document.addEventListener('gesturestart', function(e) {
  371.             e.preventDefault();
  372.         });

  374.         // 处理iOS的各种手势
  375.         let touchStartY = 0;
  376.         document.addEventListener('touchstart', function(e) {
  377.             touchStartY = e.touches[0].clientY;
  378.         }, { passive: false });

  380.         document.addEventListener('touchmove', function(e) {
  381.             const touchY = e.touches[0].clientY;
  382.             const delta = touchStartY - touchY;

  384.             // 如果不是在视频上滑动，则阻止默认行为
  385.             if (!e.target.matches('video')) {
  386.                 e.preventDefault();
  387.             }
  388.         }, { passive: false });

  390.         // 添加iOS的错误处理
  391.         video.addEventListener('error', function(e) {
  392.             console.error('视频加载错误:', e.target.error);
  393.             nextVideo();
  394.         });

  396.         // 处理iOS后台播放
  397.         document.addEventListener('visibilitychange', function() {
  398.             if (document.hidden) {
  399.                 video.pause();
  400.             }
  401.         });

  403.         // 初始化
  404.         window.onload = function() {
  405.             nextVideo();
  406.             video.addEventListener('ended', nextVideo); // 播放完自动播放下一个
  407.         };
  408.     </script>
  409. </body>
  410. </html>
复制代码


function, const, 视频, setLoading, if
免责
帖子地址打造全网最多免费游戏网站
今日来客 列表模式

相关帖子
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

本站已运行 ©2013-2026

QQ|Archiver|手机版|小黑屋|蔡州手游 |网站地图

GMT+8, 2025-11-13 15:42

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表