<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>视频播放器</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<style>
/* 设置内容的最大宽度 */
.container {
max-width: 640px;
margin: 0 auto; /* 使得导航栏水平居中 */
}
/* 调整底部副导航样式 */
.footer-nav {
background-color: #f8f9fa;
padding: 20px 0;
width: 100%;
position: fixed;
bottom: 0;
z-index: 1000;
display: flex;
justify-content: center;
}
/* 设置内容容器的最小高度 */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
position: relative;
}
.content {
flex: 1;
margin-bottom: 80px; /* 为了给底部 footer 留出空间 */
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">你的网站</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">首页 <span class="sr-only">(当前)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">服务</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">联系我们</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-4 content">
<h2 class="text-center">视频播放器</h2>
<div class="embed-responsive embed-responsive-16by9">
<?php
// 获取视频链接
$video_url = isset($_GET['video']) ? $_GET['video'] : 'https://img.ldmnq.com/gw/gw.mp4';
?>
<video controls autoplay class="embed-responsive-item" muted>
<source src="<?php echo $video_url; ?>" type="video/mp4">
您的浏览器不支持视频播放。
</video>
</div>
<form action="" method="GET" class="mt-3">
<div class="form-group">
<label for="videoURL">请输入视频链接：</label>
<input type="text" class="form-control" id="videoURL" name="video" placeholder="例如：https://www.example.com/video.mp4">
</div>
<button type="submit" class="btn btn-primary">播放</button>
</form>
</div>
<footer class="footer-nav">
<div class="container">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">关于我们</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">服务条款</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">隐私政策</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">常见问题</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">联系我们</a>
</li>
</ul>
<p class="text-center mt-3 mb-0">© <?php echo date("Y"); ?> 你的网站。保留所有权利。</p>
</div>
</footer>
<!-- Bootstrap JS 和 jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
function fixFooter() {
var body = document.body,
html = document.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
var windowHeight = window.innerHeight;
var footer = document.querySelector('.footer-nav');
if (height > windowHeight) {
footer.style.position = 'relative';
} else {
footer.style.position = 'fixed';
}
}
window.addEventListener('resize', fixFooter);
window.addEventListener('DOMContentLoaded', fixFooter);
</script>
</body>
</html>
免责声明： 本站数据均来自于互联网搜集，如有侵犯您的权利，请联系删除。→
获取金币← →
获取赞助码←
根据我国《计算机软件保护条例》第十七条规定：“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24小时之内删除，否则后果均由用户承担责任。
