<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页电视机</title>
<!-- hls.js -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<style>
body {
margin: 0;
background: #000;
color: #fff;
font-family: "Microsoft YaHei", Arial;
}
/* 顶部状态栏 */
.topbar {
background: linear-gradient(90deg, #111, #222);
padding: 12px 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #333;
}
.topbar h1 {
font-size: 20px;
color: #ff4444;
letter-spacing: 1px;
}
/* 主体 */
.main {
display: flex;
height: calc(100vh - 60px);
}
/* 左侧频道 */
.sidebar {
width: 220px;
background: #111;
padding: 15px;
overflow-y: auto;
}
.channel {
padding: 12px;
margin-bottom: 10px;
background: #1c1c1c;
border-radius: 8px;
cursor: pointer;
transition: 0.2s;
}
.channel:hover {
background: #333;
}
.channel.active {
background: #ff4444;
color: #000;
font-weight: bold;
}
/* 右侧播放区 */
.player {
flex: 1;
background: #000;
display: flex;
align-items: center;
justify-content: center;
}
video {
width: 95%;
max-height: 90vh;
border-radius: 10px;
box-shadow: 0 0 30px rgba(255,255,255,0.1);
}
</style>
</head>
<body>
<div>
<h1>📺 <span id="chanName">CCTV-1 综合</span></h1>
<span id="clock">--:--</span>
</div>
<div>
<div id="sidebar"></div>
<div>
<video id="video" controls autoplay></video>
</div>
</div>
<script>
/* 视频列表 */
const channels = [
{ name: "荒野求生1", url: "https://v13.wsyzym3u8.com/202604/03/A2rjum8fs427/video/index.m3u8" },
{ name: "荒野求生2", url: "https://v13.wsyzym3u8.com/202604/03/jBTx2LguqS27/video/index.m3u8" },
{ name: "荒野求生3", url: "https://v14.wsyzym3u8.com/202604/03/iMxkFVkqsW27/video/index.m3u8" },
{ name: "荒野求生4", url: "https://v14.wsyzym3u8.com/202604/03/gJvfET5X8827/video/index.m3u8" },
{ name: "CCTV-2 财经", url: "https://ivi.bupt.edu.cn/hls/cctv2hd.m3u8" },
{ name: "CCTV-3 综艺", url: "https://ivi.bupt.edu.cn/hls/cctv3hd.m3u8" },
{ name: "CCTV-4 国际", url: "https://ivi.bupt.edu.cn/hls/cctv4hd.m3u8" },
{ name: "CCTV-5 体育", url: "https://ivi.bupt.edu.cn/hls/cctv5hd.m3u8" },
{ name: "CCTV-6 电影", url: "https://ivi.bupt.edu.cn/hls/cctv6hd.m3u8" },
{ name: "CCTV-13 新闻", url: "https://ivi.bupt.edu.cn/hls/cctv13hd.m3u8" }
];
const sidebar = document.getElementById("sidebar");
const video = document.getElementById("video");
const chanName = document.getElementById("chanName");
let hls;
function playChannel(url, name) {
chanName.innerText = name;
if (hls) hls.destroy();
if (Hls.isSupported()) {
hls = new Hls();
hls.loadSource(url);
hls.attachMedia(video);
} else {
video.src = url;
}
video.play();
}
/* 生成频道列表 */
channels.forEach(ch => {
const div = document.createElement("div");
div.className = "channel";
div.innerText = ch.name;
div.onclick = () => {
document.querySelectorAll(".channel").forEach(c => c.classList.remove("active"));
div.classList.add("active");
playChannel(ch.url, ch.name);
};
sidebar.appendChild(div);
});
/* 默认选第一个 */
sidebar.children[0].classList.add("active");
playChannel(channels[0].url, channels[0].name);
/* 时钟 */
setInterval(() => {
const now = new Date();
document.getElementById("clock").innerText =
now.toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
}, 1000);
</script>
</body>
</html>