代码简单,页面简洁,支持自动连续播放,兼容微信不用全屏就能播放,第一次打开手动点击播放;
视频链接添加到ks.txt文件中,每行一条链接地址,自行添加即可;
效果演示
index.html – 入口页面
<!DOCTYPE html><html lang="zh-CN"><head>
<meta charSet="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="referrer" content="never">
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title> XJJ </title>
<link rel="stylesheet" href="style.css"></head><body>
<section id="main">
<video id="player" src="video.php" controls webkit-playsinline playsinline></video>
</section>
<section id="buttons">
<button id="switch">连续: 开</button>
<button id="next">播放下一个</button>
</section>
<script>
(function (window, document) { if (top != self) { window.top.location.replace(self.location.href);
} var get = function (id) { return document.getElementById(id);
} var <a target="_blank" href="https://www.lihaiblog.cn/tags-252.html">BI</a>nd = function (element, event, callback) { return element.addEventListener(event, callback);
} var auto = true; var player = get('player'); var randomm = function () {
player.src = 'video.php?_t=' + Math.random();
player.play();
}
bind(get('next'), '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> </body></html>
style.css – 样式
* { border: 0; margin: 0; padding: 0; outline: none; box-sizing: border-box;
}body { background: #000; width: 100vw; height: 100vh; overflow: hidden; display: flex; flex-direction: column; align-items: center;
}#main { height: calc(100vh - 60px); display: flex; justify-content: center; align-items: center;
}#player { width: 100%; height: auto; max-height: 100%;
}#buttons { height: 60px; padding: 10px;
}#switch,#next { background: #FFF; background: linear-gradient(to bottom, #FF2,#FB0); color: #AF2E08; font-size: 16px; font-weight: bold; height: 40px; padding: 0px 20px; margin: 0px 5px; border-radius: 20px;
}
video.php – 随机获取视频API
<?phpfunction read(...$filelist) {
$list = []; foreach ($filelist as $file) {
$handle = fopen($file, 'r'); while (($line = fgets($handle)) !== false) {
array_push($list, trim($line));
}
fclose($handle);
} return $list;
}
$list = read('ks.txt');
$url = $list[array_rand($list)];
header("Location: {$url}");
ks.txt – 视频列表
© 版权声明
1. 资源都是经过站长或作者收集测试修改后发布分享。如若转载请在文内以超链形式注明狐狸库文章出处,谢谢合作!
2. 本站除原创内容,其余所有内容均收集自互联网,仅限用于学习和研究目的,本站不对其内容的合法性承担任何责任。如有版权内容,请通知我们或作者删除,其版权均归原作者所有,本站虽力求保存原有版权信息,但因众多资源经多次转载,已无法确定其真实来源,或已将原有信息丢失,所以敬请原作者谅解!
3. 本站用户所发布的一切资源内容不代表本站立场,并不代表本站赞同其观点和对其真实性负责,若您对本站所载资源作品版权归属存有异议,请留言附说明联系邮箱,我们将在第一时间予以处理 ,同时向您表示歉意!为尊重作者版权,请购买原版作品,支持您喜欢的作者,谢谢!
4. 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客如有发现请立即向站长举报;本站资源文件大多存储在云盘,如发现链接或图片失效,请联系作者或站长及时更新。
THE END
请登录后查看评论内容