适配电脑手机端就像普通刷短视频那样，有一些前端防扒代码（没什么用的奇淫技巧），有注释无任何混淆代码，纯静态html自行替换里面的视频接口就行了，网上接口多的很一搜一大堆。
临时Demo： cute.girl.place
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>萌妹指南</title>
<script>
(function() {
// 被检测到F12时的重定向网址
const redirectUrl = 'https://qinhao.cn/site/juanzeng';
// 1. 禁用右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
// 2. 拦截常用开发者快捷键 (F12, Ctrl+Shift+I, Ctrl+U 源码, Ctrl+S 保存)
document.addEventListener('keydown', function(e) {
if (
e.key === 'F12' ||
(e.ctrlKey && e.shiftKey && ['I', 'i', 'J', 'j', 'C', 'c'].includes(e.key)) ||
(e.ctrlKey && ['U', 'u', 'S', 's'].includes(e.key))
) {
e.preventDefault();
window.location.href = redirectUrl;
}
});
// 3. 尺寸差检测：检测吸附在浏览器边缘的控制台
setInterval(function() {
const widthDiff = window.outerWidth - window.innerWidth > 160;
const heightDiff = window.outerHeight - window.innerHeight > 160;
if (widthDiff || heightDiff) {
window.location.href = redirectUrl;
}
}, 500);
// 4. 时间差检测 + Debugger 陷阱 (检测独立窗口的控制台)
setInterval(function() {
const start = Date.now();
Function("debugger")();
if (Date.now() - start > 100) {
window.location.href = redirectUrl;
}
}, 1000);
})();
</script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { width: 100%; height: 100%; background-color: #000; color: #fff; overflow: hidden; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; user-select: none; -webkit-user-select: none; }
.layout { display: flex; width: 100vw; height: 100vh; }
.sidebar { display: none; width: 240px; height: 100%; border-right: 1px solid #333; padding: 20px; background-color: #111; flex-direction: column; z-index: 20; }
.sidebar-logo { font-size: 24px; font-weight: bold; color: #fe2c55; margin-bottom: 40px; }
.sidebar-menu { font-size: 18px; line-height: 2.5; color: rgba(255,255,255,0.8); }
.main-content { flex: 1; height: 100%; position: relative; background-color: #000; }
.video-container { width: 100%; height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; -ms-overflow-style: none; scrollbar-width: none; scroll-behavior: smooth; }
.video-container::-webkit-scrollbar { display: none; }
.video-item { width: 100%; height: 100%; scroll-snap-align: start; position: relative; display: flex; justify-content: center; align-items: center; }
video { width: 100%; height: 100%; object-fit: cover; z-index: 1; -webkit-touch-callout: none; }
.loading { position: absolute; width: 40px; height: 40px; border: 3px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 1s linear infinite; z-index: 0; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.center-play-btn { position: absolute; width: 80px; height: 80px; background: rgba(0,0,0,0.4); border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 10; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.center-play-btn svg { width: 40px; height: 40px; fill: #fff; margin-left: 5px; }
.is-paused .center-play-btn { opacity: 1; }
.action-bar { position: absolute; right: 15px; bottom: 80px; display: flex; flex-direction: column; align-items: center; gap: 25px; z-index: 10; }
.action-item { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; text-decoration: none; color: inherit; }
.action-icon { width: 40px; height: 40px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: transform 0.2s; }
.action-item:active .action-icon { transform: scale(0.8); }
.action-icon svg { width: 24px; height: 24px; fill: #fff; transition: fill 0.3s; }
.action-text { font-size: 12px; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); }
.action-item.liked .action-icon svg { fill: #fe2c55; animation: likeBeat 0.3s ease; }
@keyframes likeBeat { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
.bottom-info { position: absolute; left: 15px; bottom: 20px; z-index: 10; width: 70%; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); pointer-events: none; }
.author-name { font-size: 18px; font-weight: bold; margin-bottom: 8px; }
.video-desc { font-size: 14px; line-height: 1.4; color: rgba(255,255,255,0.9); }
@media (min-width: 768px) { .sidebar { display: flex; } video { object-fit: contain; } .action-bar { bottom: 50%; transform: translateY(50%); right: 30px; } .bottom-info { bottom: 40px; left: 30px; } }
</style>
</head>
<body>
<div class="layout">
<nav class="sidebar">
<div class="sidebar-logo">萌妹指南</div>
<div class="sidebar-menu">
<div style="color:#fff; font-weight:bold;">首页推荐</div>
<div>关注动态</div>
<div>热门排行</div>
<div>我的喜欢</div>
</div>
</nav>
<main class="main-content">
<div id="app" class="video-container"></div>
</main>
</div>
<script>
const container = document.getElementById('app');
const apiUrl = 'https://api.yujn.cn/api/zzxjj.php?type=video';
const firstVideoUrl = 'https://my.hao.qzz.io/zhanshang/mmzn.mp4#t=0.1';
const specialVideoUrl = 'https://my.hao.qzz.io/zhanshang/zgws.mp4';
let isAudioUnlocked = false;
let isFirstVideoLoaded = false;
// 全局音频解锁逻辑
const unlockAudio = () => {
if (isAudioUnlocked) return;
isAudioUnlocked = true;
document.querySelectorAll('video').forEach(v => { v.muted = false; });
};
// 监听屏幕任意触摸或点击以解锁声音
window.addEventListener('touchstart', unlockAudio, { once: true, capture: true });
window.addEventListener('mousedown', unlockAudio, { once: true, capture: true });
window.addEventListener('click', unlockAudio, { once: true, capture: true });
function createVideoElement(index) {
const wrapper = document.createElement('div');
wrapper.className = 'video-item';
if (index === 0) wrapper.classList.add('is-paused');
const loading = document.createElement('div');
loading.className = 'loading';
const video = document.createElement('video');
if (index === 0) {
video.src = firstVideoUrl;
} else {
video.src = `${apiUrl}&_t=${new Date().getTime()}${Math.floor(Math.random() * 1000)}`;
}
video.preload = 'auto';
video.loop = true;
video.muted = true;
video.setAttribute('playsinline', '');
video.setAttribute('webkit-playsinline', '');
video.setAttribute('controlslist', 'nodownload noplaybackrate');
video.setAttribute('disablePictureInPicture', 'true');
video.addEventListener('canplay', () => { loading.style.display = 'none'; });
const playBtn = document.createElement('div');
playBtn.className = 'center-play-btn';
playBtn.innerHTML = `<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>`;
const randomLikes = (Math.random() * 80 + 5).toFixed(1) + 'w';
const randomComments = Math.floor(Math.random() * 5000 + 500);
const actionBar = document.createElement('div');
actionBar.className = 'action-bar';
actionBar.innerHTML = `
<div class="action-item btn-like">
<div class="action-icon"><svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg></div>
<span class="action-text">${randomLikes}</span>
</div>
<div class="action-item btn-comment-video">
<div class="action-icon"><svg viewBox="0 0 24 24"><path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"/></svg></div>
<span class="action-text">${randomComments}</span>
</div>
<a href="https://qinhao.cn/site/juanzeng" target="_blank" class="action-item btn-link">
<div class="action-icon"><svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg></div>
<span class="action-text">赞赏</span>
</a>
`;
actionBar.addEventListener('click', (e) => e.stopPropagation());
// 点赞逻辑
const likeBtn = actionBar.querySelector('.btn-like');
likeBtn.addEventListener('click', () => { likeBtn.classList.toggle('liked'); unlockAudio(); });
// 评论按钮切换视频逻辑
const commentVideoBtn = actionBar.querySelector('.btn-comment-video');
commentVideoBtn.addEventListener('click', () => {
unlockAudio();
if (video.src !== specialVideoUrl) {
loading.style.display = 'block';
video.src = specialVideoUrl;
video.load();
}
video.muted = !isAudioUnlocked;
let playPromise = video.play();
if (playPromise !== undefined) {
playPromise.catch(e => {
video.muted = true;
video.play();
});
}
wrapper.classList.remove('is-paused');
});
const linkBtns = actionBar.querySelectorAll('.btn-link');
linkBtns.forEach(btn => btn.addEventListener('click', unlockAudio));
const bottomInfo = document.createElement('div');
bottomInfo.className = 'bottom-info';
bottomInfo.innerHTML = `
<div class="author-name">@萌妹指南推荐_${index + 1}</div>
<div class="video-desc">超丝滑的短视频体验，快来一起看！ #萌妹指南 #美女</div>
`;
// 点击画面播放/暂停逻辑
video.addEventListener('click', () => {
unlockAudio();
if (video.paused) {
video.play();
wrapper.classList.remove('is-paused');
} else {
video.pause();
wrapper.classList.add('is-paused');
}
});
wrapper.appendChild(video);
wrapper.appendChild(loading);
wrapper.appendChild(playBtn);
wrapper.appendChild(actionBar);
wrapper.appendChild(bottomInfo);
return wrapper;
}
let loadedCount = 0;
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const video = entry.target.querySelector('video');
if (entry.isIntersecting) {
if (loadedCount > 0 && !isFirstVideoLoaded) {
const allItems = document.querySelectorAll('.video-item');
if (Array.from(allItems).indexOf(entry.target) === 0) {
isFirstVideoLoaded = true;
return;
}
}
video.muted = !isAudioUnlocked;
let playPromise = video.play();
if (playPromise !== undefined) {
playPromise.catch(e => {
video.muted = true;
video.play();
});
}
entry.target.classList.remove('is-paused');
const allItems = document.querySelectorAll('.video-item');
const index = Array.from(allItems).indexOf(entry.target);
// 提前加载新视频
if (index >= allItems.length - 2) appendVideos(2);
} else {
video.pause();
video.currentTime = 0;
entry.target.classList.add('is-paused');
}
});
}, { threshold: 0.6 });
function appendVideos(count) {
for (let i = 0; i < count; i++) {
const el = createVideoElement(loadedCount);
container.appendChild(el);
observer.observe(el);
loadedCount++;
}
}
// 初始加载数量
appendVideos(4);
</script>
</body>
</html>此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。