HTML教程：创建一个包含视频播放器和相关PDF链接的网页
教程：创建一个包含视频播放器和相关PDF链接的网页
步骤1：设置HTML结构
首先，我们需要创建一个基本的HTML文件结构，并添加必要的元素，如视频播放器和文本框。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>视频播放器与PDF链接</title>
<style type="text/css">
body { margin: 0; padding: 0; background-image: linear-gradient(to right, skyblue, #fff);
} .video-player { width: 80%; height: 500px; margin: 20px auto; display: block;
} .text-box { width: 60%; height: 30px; background-color: #f9f9f9; border: 1px solid #ccc; border-radius: 5px; padding: 10px; overflow-y: auto; margin: 20px auto; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} .text-box a { color: #007BFF;
} .text-box a:hover { text-decoration: underline;
} </style>
</head>
<body>
<div class="video-player">
<video id="videoPlayer" width="100%" height="100%" controls>
Your browser does not support the video tag. </video>
</div>
<div class="text-box" id="textBox"></div>
<script>
// JavaScript代码将在下一步添加
</script>
</body></html>步骤2：添加JavaScript功能
接下来，我们需要添加JavaScript代码，以便在点击视频链接时，视频播放器能够播放相应的视频，并在文本框中显示相关的PDF链接。
<script>
document.querySelectorAll('.item .nav a').forEach(link => {
link.addEventListener('click', function(event) {
event.preventDefault(); const videoUrl = this.href; const videoPlayer = document.getElementById('videoPlayer');
videoPlayer.src = videoUrl;
videoPlayer.play(); const textBox = document.getElementById('textBox'); // 检查并删除现有的超链接
const existingLinks = textBox.querySelectorAll('a');
existingLinks.forEach(link => link.remove()); // 创建新的超链接
const pdfLink = document.createElement('a');
pdfLink.href = videoUrl.replace('.mp4', '.pdf');
pdfLink.textContent = this.textContent;
pdfLink.target = "_blank"; // 设置超链接的样式以实现居中显示和可爱的效果
pdfLink.style.display = "block"; // 使超链接成为块级元素
pdfLink.style.textAlign = "center"; // 水平居中
pdfLink.style.color = "#FF69B4"; // 粉色字体颜色
pdfLink.style.textShadow = "2px 2px 4px #FF1493"; // 阴影效果，深粉色阴影
pdfLink.style.marginTop = "auto"; // 垂直居中（上边距自动）
pdfLink.style.marginBottom = "auto"; // 垂直居中（下边距自动）
// 将新的超链接插入到文本框的第一个位置
textBox.insertBefore(pdfLink, textBox.firstChild); // 设置文本框的样式以确保内容居中
textBox.style.display = "flex";
textBox.style.justifyContent = "center"; // 水平居中
textBox.style.alignItems = "center"; // 垂直居中
});
});</script>步骤3：添加视频和PDF链接
最后，我们需要在HTML中添加视频和PDF链接。你可以使用一个包含视频和PDF链接的列表，并在JavaScript中处理这些链接。
<div class="menu"> <div class="item">视频1 <div class="nav"> <a href="视频1.mp4" target="_blank">视频1</a> </div> </div> <div class="item">视频2 <div class="nav"> <a href="视频2.mp4" target="_blank">视频2</a> </div> </div> <!-- 添加更多视频和PDF链接 --></div>
步骤4：完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演示</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background-image: linear-gradient(to right, skyblue, #fff);
}
a {
text-decoration: none;
}
.menu {
width: 60%; /* 一级菜单的宽度 */
max-width: 300px; /* 最大宽度限制，防止在小屏幕上过宽 */
height: 500px;
padding: 20px 0;
background-color: rgba(0, 0, 0, 0.5);
margin: 650px auto 0; /* 将水平外边距设置为 auto */
position: relative;
left: 50%; /* 将 left 设置为 50% */
transform: translateX(-50%); /* 使用 transform 来调整位置 */
margin-left: -20%; /* 向左移动 px */
}
.menu .item {
height: 30px;
/* border: 1px solid red; */
color: #fff;
font-size: 9px;
line-height: 30px;
padding-left: 20px;
background: url('images/right-jiantou.png') no-repeat 200px 10px;
cursor: pointer;
}
.menu .item:hover {
background-color: #ff6700;
background-image: url('images/right-jiantou2.png');
}
/* 右侧二级菜单 */
.menu .item .nav {
min-width: 150px;
height: 500px;
background-color: #fff;
border: 1px solid #666;
position: absolute;
top: 0;
left: 100%;
box-sizing: border-box;
/* 六行单元格平分整个区域 */
display: grid;
grid-template-rows: repeat(20, 1fr);
grid-template-columns: 150px;
/* 排列方式设置为先列后行 */
grid-auto-flow: column;
/* 设置隐式网格宽度 */
grid-auto-columns: 150px;
padding: 10px;
/* 初始默认隐藏 */
display: none;
}
.item .nav a {
/* border: 1px solid red; */
color: #000;
display: flex;
/* 垂直方向居中对齐,防止随父元素高度而被拉伸 */
align-items: center;
}
.item .nav a img {
margin-right: 10px;
}
.item .nav a:hover {
color: #ff6700;
}
.item:hover .nav {
display: grid;
}
.video-player {
width: 80%;
height: 500px;
margin-bottom: 20px;
position: absolute;
top: 150px;
left: 50%; /* 将 left 设置为 50% */
transform: translateX(-50%); /* 使用 transform 来调整位置 */
}
.text-box {
width: 60%;
height: 30px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
overflow-y: auto;
position: absolute;
top:700px;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.text-box a {
display: block;
margin-bottom: 5px;
color: #007BFF;
}
.text-box a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">001.第1章机电工程常用材料与设备
<div class="nav">
<a href="https://真实地址/管理与实务/001.第1章机电工程常用材料与设备/001.机电工程常用材料.mp4" target="_blank">001.机电工程常用材料</a>
<a href="https://真实地址/管理与实务/001.第1章机电工程常用材料与设备/002.机电工程常用设备.mp4" target="_blank">002.机电工程常用设备</a>
</div>
</div>
<div class="item">002.第2章机电工程专业技术
<div class="nav">
<a href="https://真实地址/管理与实务/002.第2章机电工程专业技术/001.工程测量技术.mp4" target="_blank">001.工程测量技术</a>
<a href="https://真实地址/管理与实务/002.第2章机电工程专业技术/002.起重技术（一）.mp4" target="_blank">002.起重技术（一）</a>
<a href="https://真实地址/管理与实务/002.第2章机电工程专业技术/003.起重技术（二）.mp4" target="_blank">003.起重技术（二）</a>
<a href="https://真实地址/管理与实务/002.第2章机电工程专业技术/004.焊接技术（一）.mp4" target="_blank">004.焊接技术（一）</a>
<a href="https://真实地址/管理与实务/002.第2章机电工程专业技术/005.焊接技术（二）.mp4" target="_blank">005.焊接技术（二）</a>
</div>
</div>
<div class="item">003.第3章建筑机电工程施工技术
<div class="nav">
<a href="https://真实地址/管理与实务/003.第3章建筑机电工程施工技术/001.建筑给水排水与供暖工程施工技术（一）.mp4" target="_blank">001.建筑给水排水与供暖工程施工技术（一）</a>
<a href="https://真实地址/管理与实务/003.第3章建筑机电工程施工技术/002.建筑给水排水与供暖工程施工技术（二）.mp4" target="_blank">002.建筑给水排水与供暖工程施工技术（二）</a>
<a href="https://真实地址/管理与实务/003.第3章建筑机电工程施工技术/003.建筑电气工程施工技术（一）.mp4" target="_blank">003.建筑电气工程施工技术（一）</a>
<a href="https://真实地址/管理与实务/003.第3章建筑机电工程施工技术/004.建筑电气工程施工技术（二）.mp4" target="_blank">004.建筑电气工程施工技术（二）</a>
<a href="https://真实地址/管理与实务/003.第3章建筑机电工程施工技术/005.通风与空调工程施工技术（一）.mp4" target="_blank">005.通风与空调工程施工技术（一）</a>
<a href="https://真实地址/管理与实务/003.第3章建筑机电工程施工技术/006.通风与空调工程施工技术（二）.mp4" target="_blank">006.通风与空调工程施工技术（二）</a>
<a href="https://真实地址/管理与实务/003.第3章建筑机电工程施工技术/007.通风与空调工程施工技术（三）.mp4" target="_blank">007.通风与空调工程施工技术（三）</a>
<a href="https://真实地址/管理与实务/003.第3章建筑机电工程施工技术/008.通风与空调工程施工技术（四）.mp4" target="_blank">008.通风与空调工程施工技术（四）</a>
<a href="https://真实地址/管理与实务/003.第3章建筑机电工程施工技术/009.电梯工程安装技术（一）.mp4" target="_blank">009.电梯工程安装技术（一）</a>
<a href="https://真实地址/管理与实务/003.第3章建筑机电工程施工技术/010.电梯工程安装技术（二）.mp4" target="_blank">010.电梯工程安装技术（二）</a>
<a href="https://真实地址/管理与实务/003.第3章建筑机电工程施工技术/011.消防工程施工技术（一）.mp4" target="_blank">011.消防工程施工技术（一）</a>
<a href="https://真实地址/管理与实务/003.第3章建筑机电工程施工技术/012.消防工程施工技术（二）.mp4" target="_blank">012.消防工程施工技术（二）</a>
</div>
</div>
<div class="item">004.第4章工业机电工程安装技术
<div class="nav">
<a href="https://真实地址/管理与实务/004.第4章工业机电工程安装技术/001.机械设备安装技术（一）.mp4" target="_blank">001.机械设备安装技术（一）</a>
<a href="https://真实地址/管理与实务/004.第4章工业机电工程安装技术/002.机械设备安装技术（二）.mp4" target="_blank">002.机械设备安装技术（二）</a>
<a href="https://真实地址/管理与实务/004.第4章工业机电工程安装技术/003.机械设备安装技术（三）.mp4" target="_blank">003.机械设备安装技术（三）</a>
<a href="https://真实地址/管理与实务/004.第4章工业机电工程安装技术/004.工业管道施工技术（一）.mp4" target="_blank">004.工业管道施工技术（一）</a>
<a href="https://真实地址/管理与实务/004.第4章工业机电工程安装技术/005.工业管道施工技术（二）.mp4" target="_blank">005.工业管道施工技术（二）</a>
<a href="https://真实地址/管理与实务/004.第4章工业机电工程安装技术/006.工业管道施工技术（三）.mp4" target="_blank">006.工业管道施工技术（三）</a>
<a href="https://真实地址/管理与实务/004.第4章工业机电工程安装技术/007.工业管道施工技术（四）.mp4" target="_blank">007.工业管道施工技术（四）</a>
<a href="https://真实地址/管理与实务/004.第4章工业机电工程安装技术/008.电气装置安装技术（一）.mp4" target="_blank">008.电气装置安装技术（一）</a>
<a href="https://真实地址/管理与实务/004.第4章工业机电工程安装技术/009.电气装置安装技术（二）.mp4" target="_blank">009.电气装置安装技术（二）</a>
<a href="https://真实地址/管理与实务/004.第4章工业机电工程安装技术/010.自动化仪表工程安装技术.mp4" target="_blank">010.自动化仪表工程安装技术</a>
<a href="https://真实地址/管理与实务/004.第4章工业机电工程安装技术/011.防腐蚀工程施工技术、绝热工程施工技术.mp4" target="_blank">011.防腐蚀工程施工技术、绝热工程施工技术</a>
<a href="https://真实地址/管理与实务/004.第4章工业机电工程安装技术/012.石油化工设备安装技术（一）.mp4" target="_blank">012.石油化工设备安装技术（一）</a>
<a href="https://真实地址/管理与实务/004.第4章工业机电工程安装技术/013.石油化工设备安装技术（二）.mp4" target="_blank">013.石油化工设备安装技术（二）</a>
<a href="https://真实地址/管理与实务/004.第4章工业机电工程安装技术/014.发电设备安装技术（一）.mp4" target="_blank">014.发电设备安装技术（一）</a>
<a href="https://真实地址/管理与实务/004.第4章工业机电工程安装技术/015.发电设备安装技术（二）.mp4" target="_blank">015.发电设备安装技术（二）</a>
<a href="https://真实地址/管理与实务/004.第4章工业机电工程安装技术/016.发电设备安装技术（三）.mp4" target="_blank">016.发电设备安装技术（三）</a>
<a href="https://真实地址/管理与实务/004.第4章工业机电工程安装技术/017.冶炼设备安装技术（一）.mp4" target="_blank">017.冶炼设备安装技术（一）</a>
<a href="https://真实地址/管理与实务/004.第4章工业机电工程安装技术/018.冶炼设备安装技术（二）.mp4" target="_blank">018.冶炼设备安装技术（二）</a>
</div>
</div>
<div class="item">005.第5章相关法规
<div class="nav">
<a href="https://真实地址/管理与实务/005.第5章相关法规/001.计量的规定.mp4" target="_blank">001.计量的规定</a>
<a href="https://真实地址/管理与实务/005.第5章相关法规/002.建设用电及施工的规定.mp4" target="_blank">002.建设用电及施工的规定</a>
<a href="https://真实地址/管理与实务/005.第5章相关法规/003.特种设备的规定.mp4" target="_blank">003.特种设备的规定</a>
</div>
</div>
<div class="item">006.第6章相关标准
<div class="nav">
<a href="https://真实地址/管理与实务/006.第6章相关标准/001.建筑机电工程设计与施工标准、工业机电工程设计与施工标准.mp4" target="_blank">001.建筑机电工程设计与施工标准、工业机电工程设计与施工标准</a>
</div>
</div>
<div class="item">007.第7章机电工程企业资质与施工组织
<div class="nav">
<a href="https://真实地址/管理与实务/007.第7章机电工程企业资质与施工组织/001.机电工程企业资质、施工项目管理机构.mp4" target="_blank">001.机电工程企业资质、施工项目管理机构</a>
<a href="https://真实地址/管理与实务/007.第7章机电工程企业资质与施工组织/002.施工组织设计（一）.mp4" target="_blank">002.施工组织设计（一）</a>
<a href="https://真实地址/管理与实务/007.第7章机电工程企业资质与施工组织/003.施工组织设计（二）.mp4" target="_blank">003.施工组织设计（二）</a>
</div>
</div>
<div class="item">008.第8章工程招标投标与合同管理
<div class="nav">
<a href="https://真实地址/管理与实务/008.第8章工程招标投标与合同管理/001.工程招标投标与合同管理.mp4" target="_blank">001.工程招标投标与合同管理</a>
</div>
</div>
<div class="item">009.第9章施工进度管理
<div class="nav">
<a href="https://真实地址/管理与实务/009.第9章施工进度管理/001.施工进度管理.mp4" target="_blank">001.施工进度管理</a>
</div>
</div>
<div class="item">010.第10章施工质量管理
<div class="nav">
<a href="https://真实地址/管理与实务/010.第10章施工质量管理/001.施工质量管理.mp4" target="_blank">001.施工质量管理</a>
</div>
</div>
<div class="item">011.第11章施工成本管理
<div class="nav">
<a href="https://真实地址/管理与实务/011.第11章施工成本管理/001.施工成本管理.mp4" target="_blank">001.施工成本管理</a>
</div>
</div>
<div class="item">012.第12章施工安全管理
<div class="nav">
<a href="https://真实地址/管理与实务/012.第12章施工安全管理/001.施工安全管理.mp4" target="_blank">001.施工安全管理</a>
</div>
</div>
<div class="item">013.第13章绿色建造及施工现场环境管理
<div class="nav">
<a href="https://真实地址/管理与实务/013.第13章绿色建造及施工现场环境管理/001.绿色建造及施工现场环境管理.mp4" target="_blank">001.绿色建造及施工现场环境管理</a>
</div>
</div>
<div class="item">014.第14章机电工程项目资源与协调管理
<div class="nav">
<a href="https://真实地址/管理与实务/014.第14章机电工程项目资源与协调管理/001.机电工程项目资源与协调管理（一）.mp4" target="_blank">001.机电工程项目资源与协调管理（一）</a>
<a href="https://真实地址/管理与实务/014.第14章机电工程项目资源与协调管理/002.机电工程项目资源与协调管理（二）.mp4" target="_blank">002.机电工程项目资源与协调管理（二）</a>
</div>
</div>
<div class="item">015.第15章机电工程试运行及竣工验收管理
<div class="nav">
<a href="https://真实地址/管理与实务/015.第15章机电工程试运行及竣工验收管理/001.机电工程试运行及竣工验收管理.mp4" target="_blank">001.机电工程试运行及竣工验收管理</a>
</div>
</div>
<div class="item">016.第16章机电工程运维与保修管理
<div class="nav">
<a href="https://真实地址/管理与实务/016.第16章机电工程运维与保修管理/001.机电工程运维与保修管理.mp4" target="_blank">001.机电工程运维与保修管理</a>
</div>
</div>
</div>
<div class="video-player">
<video id="videoPlayer" width="100%" height="100%" controls>
Your browser does not support the video tag.
</video>
</div>
<div class="text-box" id="textBox"></div>
<script>
document.querySelectorAll('.item .nav a').forEach(link => {
link.addEventListener('click', function(event) {
event.preventDefault();
const videoUrl = this.href;
const videoPlayer = document.getElementById('videoPlayer');
videoPlayer.src = videoUrl;
videoPlayer.play();
const textBox = document.getElementById('textBox');
// 检查并删除现有的超链接
const existingLinks = textBox.querySelectorAll('a');
existingLinks.forEach(link => link.remove());
// 创建新的超链接
const pdfLink = document.createElement('a');
pdfLink.href = videoUrl.replace('.mp4', '.pdf');
pdfLink.textContent = this.textContent;
pdfLink.target = "_blank";
// 设置超链接的样式以实现居中显示和可爱的效果
pdfLink.style.display = "block"; // 使超链接成为块级元素
pdfLink.style.textAlign = "center"; // 水平居中
pdfLink.style.color = "#FF69B4"; // 粉色字体颜色
pdfLink.style.textShadow = "2px 2px 4px #FF1493"; // 阴影效果，深粉色阴影
pdfLink.style.marginTop = "auto"; // 垂直居中（上边距自动）
pdfLink.style.marginBottom = "auto"; // 垂直居中（下边距自动）
// 将新的超链接插入到文本框的第一个位置
textBox.insertBefore(pdfLink, textBox.firstChild);
// 设置文本框的样式以确保内容居中
textBox.style.display = "flex";
textBox.style.justifyContent = "center"; // 水平居中
textBox.style.alignItems = "center"; // 垂直居中
});
});
</script>
</body>
</html>打赏
收藏
点赞
文章版权声明：除非注明，否则均为温馨小家原创文章，转载或复制请以超链接形式并注明出处。
还没有评论，来说两句吧...