实现网站内iframe视频分集切换播放的示例代码，无需跳转页面_星怀蓝梦
实现网站内iframe视频分集切换播放的示例代码，无需跳转页面
2022-10-08 14:27:27 浏览：334 作者：管理员
实现网站内iframe视频分集切换播放的示例代码，无需跳转页面 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视频分集播放</title>
<style>
...
实现网站内iframe视频分集切换播放的示例代码，无需跳转页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视频分集播放</title>
<style>
/* 全局样式 */
body {
font-family: Arial, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
/* 视频播放容器样式 */
.video-container {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 宽高比 */
margin-bottom: 20px;
}
#main-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
/* 分集列表样式 */
.episode-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
}
/* 分集按钮基础样式 */
.episode-btn {
padding: 10px 15px;
background: #ffffff;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
}
/* 分集按钮悬停效果 */
.episode-btn:hover {
background: #f0f0f0;
transform: translateY(-2px);
}
/* 分集按钮激活状态 */
.episode-btn.active {
background: #007bff;
color: white;
border-color: #007bff;
}
</style>
</head>
<body>
<!-- 视频播放容器 -->
<div>
<iframe id="main-iframe"
src="//player.bilibili.com/player.html?aid=84271171"
allowfullscreen></iframe>
</div>
<!-- 分集列表 -->
<div id="episodeList">
<!-- 分集按钮将通过JavaScript动态生成 -->
</div>
<script>
// 分集数据（示例使用B站视频，可替换为其他平台）
const episodes = [
{
title: "第一集",
src: "//player.bilibili.com/player.html?aid=84271171"
},
{
title: "第二集",
src: "//player.bilibili.com/player.html?aid=45678901"
},
{
title: "第三集",
src: "//player.bilibili.com/player.html?aid=98765432"
}
];
// 初始化分集列表
const episodeList = document.getElementById('episodeList');
episodes.forEach((ep, index) => {
const btn = document.createElement('button');
btn.className = `episode-btn ${index === 0 ? 'active' : ''}`;
btn.textContent = ep.title;
btn.onclick = () => switchEpisode(ep.src, btn);
episodeList.appendChild(btn);
});
// 切换分集函数
function switchEpisode(src, clickedBtn) {
const iframe = document.getElementById('main-iframe');
// 更新iframe源
iframe.src = src;
// 更新按钮状态
document.querySelectorAll('.episode-btn').forEach(btn => {
btn.classList.remove('active');
});
clickedBtn.classList.add('active');
}
</script>
</body>
</html>主要特点说明：
1. **响应式布局**：
- 使用16:9宽高比自适应容器
- 分集按钮自动换行布局
- 支持移动端显示
2. **功能实现**：
- 点击分集按钮切换视频源
- 自动更新按钮激活状态
- 支持主流视频平台（示例使用B站，可替换为YouTube等）
3. **使用说明**：
- 修改`episodes`数组中的视频源即可添加/修改分集
- 每个分集对象包含：
- `title`: 按钮显示文字
- `src`: 视频嵌入代码URL
- 支持任意支持iframe嵌入的视频平台
4. **样式自定义建议**：
- 修改`body`中的`max-width`调整最大宽度
- 调整`.episode-list`的`grid-template-columns`改变按钮布局
- 修改颜色方案（当前主色为蓝色#007bff）
5. **扩展建议**：
- 添加加载指示器（切换视频时显示loading）
- 增加本地存储记忆功能（记住上次观看的分集）
- 添加键盘快捷键支持（左右箭头切换分集）
注意：实际使用时需要：
1. 将视频源替换为实际有效的嵌入地址
2. 根据目标视频平台的要求添加对应的参数
3. 如果涉及跨站请求，请确保目标网站允许嵌入
下一篇：星怀蓝梦网站常规数据
评论区
共 0 条评论
- 这篇文章还没有收到评论，赶紧来抢沙发吧~
【随机内容】
-
2024-05-27
-
2022-05-29
-
2022-09-20
-
2022-11-17
