使用HTML5、CSS3和JavaScript建立一个Web播放器页面的代码
时间: 2024-05-01 09:17:48 浏览: 19
这是一个基本的Web播放器页面的代码,使用HTML5、CSS3和JavaScript构建:
HTML5:
```
<!DOCTYPE html>
<html>
<head>
<title>Web播放器页面</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="player">
<video id="videoPlayer" src="video.mp4"></video>
<div class="controls">
<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>
<input id="volumeRange" type="range" min="0" max="1" step="0.1" value="1">
<span id="currentTime">0:00</span>
<input id="seekRange" type="range" min="0" step="1" value="0">
<span id="durationTime">0:00</span>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS3:
```
body {
margin: 0;
padding: 0;
background-color: #f4f4f4;
font-family: Arial, sans-serif;
font-size: 16px;
}
.player {
margin: 20px;
padding: 10px;
background-color: #fff;
box-shadow: 0 0 10px #ccc;
}
video {
display: block;
width: 100%;
height: auto;
margin-bottom: 10px;
}
.controls {
display: flex;
align-items: center;
justify-content: space-between;
}
.controls button {
background-color: #ddd;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
}
.controls button:hover {
background-color: #555;
color: #fff;
}
.controls input[type="range"] {
-webkit-appearance: none;
position: relative;
background-color: #ddd;
height: 4px;
border-radius: 2px;
outline: none;
margin-left: 10px;
margin-right: 10px;
flex: 1;
}
.controls input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 12px;
width: 12px;
border-radius: 50%;
background-color: #555;
position: relative;
top: -4px;
}
.controls input[type="range"]::-moz-range-thumb {
border: none;
height: 12px;
width: 12px;
border-radius: 50%;
background-color: #555;
position: relative;
top: -4px;
}
.controls span {
margin-left: 10px;
margin-right: 10px;
font-size: 14px;
}
```
JavaScript:
```
document.addEventListener("DOMContentLoaded", function() {
var videoPlayer = document.getElementById("videoPlayer");
var playBtn = document.getElementById("playBtn");
var pauseBtn = document.getElementById("pauseBtn");
var volumeRange = document.getElementById("volumeRange");
var seekRange = document.getElementById("seekRange");
var currentTime = document.getElementById("currentTime");
var durationTime = document.getElementById("durationTime");
playBtn.addEventListener("click", function() {
videoPlayer.play();
});
pauseBtn.addEventListener("click", function() {
videoPlayer.pause();
});
volumeRange.addEventListener("input", function() {
videoPlayer.volume = volumeRange.value;
});
videoPlayer.addEventListener("timeupdate", function() {
currentTime.textContent = formatTime(videoPlayer.currentTime);
seekRange.value = videoPlayer.currentTime;
});
videoPlayer.addEventListener("durationchange", function() {
durationTime.textContent = formatTime(videoPlayer.duration);
seekRange.max = videoPlayer.duration;
});
seekRange.addEventListener("input", function() {
videoPlayer.currentTime = seekRange.value;
});
function formatTime(time) {
var hours = Math.floor(time / 3600);
var minutes = Math.floor((time - (hours * 3600)) / 60);
var seconds = Math.floor(time - (hours * 3600) - (minutes * 60));
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
if (hours == "00") {
return minutes + ":" + seconds;
} else {
return hours + ":" + minutes + ":" + seconds;
}
}
});
```