制作一个复杂的电影播放页面
时间: 2023-11-20 20:04:46 浏览: 41
好的,我可以为您提供一个示例复杂电影播放页面的设计和代码实现。
HTML 代码如下:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电影播放页面</title>
<link rel="stylesheet" href="https://cdn.plyr.io/3.5.10/plyr.css" />
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
display: flex;
align-items: center;
}
header img {
height: 200px;
margin-right: 20px;
}
header h1 {
margin: 0;
font-size: 32px;
}
.card {
background-color: #f1f1f1;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
padding: 20px;
margin-bottom: 20px;
display: flex;
align-items: center;
}
.card img {
height: 150px;
margin-right: 20px;
}
.card h2 {
margin: 0;
font-size: 24px;
}
.card p {
margin: 5px 0;
font-size: 16px;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.plyr__video-embed {
height: 100%;
}
.plyr__video-wrapper::before {
padding-top: 0!important;
}
.options {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
}
.options select {
font-size: 16px;
padding: 5px;
margin-right: 20px;
}
.options button {
font-size: 16px;
padding: 5px 10px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
}
.related-movies {
margin-top: 40px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.related-movies .card {
width: 30%;
}
@media (max-width: 768px) {
header {
flex-direction: column;
align-items: flex-start;
}
header img {
height: auto;
margin-bottom: 20px;
}
.card {
flex-direction: column;
align-items: flex-start;
}
.card img {
height: auto;
margin-right: 0;
margin-bottom: 20px;
}
.options {
flex-direction: column;
align-items: flex-start;
}
.options select {
margin-right: 0;
margin-bottom: 20px;
}
.related-movies .card {
width: 100%;
margin-bottom: 20px;
}
}
</style>
</head>
<body>
<header>
<img src="https://via.placeholder.com/200x300" alt="电影海报">
<div>
<h1>电影名称</h1>
<p>导演:导演名称</p>
<p>演员:演员名称</p>
<p>评分:8.5</p>
<p>类型:类型名称</p>
<p>时长:120分钟</p>
</div>
</header>
<div class="card">
<img src="https://via.placeholder.com/150x225" alt="电影海报">
<div>
<h2>电影名称</h2>
<p>导演:导演名称</p>
<p>演员:演员名称</p>
<p>类型:类型名称</p>
<p>时长:120分钟</p>
</div>
</div>
<div class="video-container">
<div class="plyr__video-embed" id="player">
<iframe src="https://www.youtube.com/embed/bTqVqk7FSmY" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>
</div>
<div class="options">
<select>
<option value="hd">高清</option>
<option value="sd">标清</option>
</select>
<button>切换字幕</button>
</div>
<div class="related-movies">
<div class="card">
<img src="https://via.placeholder.com/150x225" alt="电影海报">
<div>
<h2>电影名称</h2>
<p>导演:导演名称</p>
<p>演员:演员名称</p>
<p>类型:类型名称</p>
<p>时长:120分钟</p>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/150x225" alt="电影海报">
<div>
<h2>电影名称</h2>
<p>导演:导演名称</p>
<p>演员:演员名称</p>
<p>类型:类型名称</p>
<p>时长:120分钟</p>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/150x225" alt="电影海报">
<div>
<h2>电影名称</h2>
<p>导演:导演名称</p>
<p>演员:演员名称</p>
<p>类型:类型名称</p>
<p>时长:120分钟</p>
</div>
</div>
</div>
<script src="https://cdn.plyr.io/3.5.10/plyr.js"></script>
<script>
const player = new Plyr('#player');
</script>
</body>
</html>
```
上面的代码实现了一个复杂的电影播放页面,包含电影信息、播放器、视频选项和相关电影推荐。我使用了流行的视频播放器库Plyr来实现播放器,使用了CSS Flexbox布局来实现页面的布局和响应式设计。
希望这个示例能够给您提供一些参考,帮助您制作一个复杂的电影播放页面。