HTML5 视频播放器：精美 UI 设计和 JavaScript 控制
很高兴帮您完成此任务！以下是一个基本的视频播放器示例，具有精美的UI设计：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>Video Player</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<video id="myVideo" width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<div class="controls">
<button id="playPauseBtn" class="play"></button>
<input id="seekBar" type="range" min="0" max="100" value="0" step="0.1">
<span id="currentTime">0:00</span> / <span id="duration">0:00</span>
<button id="muteBtn" class="unmute"></button>
<input id="volumeBar" type="range" min="0" max="1" value="1" step="0.1">
<button id="fullscreenBtn" class="fullscreen"></button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS代码：
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
margin: 0 auto;
max-width: 800px;
padding: 20px;
}
video {
display: block;
margin: 0 auto;
}
.controls {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
}
button {
background-color: transparent;
border: none;
cursor: pointer;
height: 30px;
margin: 0 5px;
outline: none;
width: 30px;
}
button.play {
background-image: url(icons/play.png);
background-size: cover;
}
button.pause {
background-image: url(icons/pause.png);
background-size: cover;
}
button.mute {
background-image: url(icons/mute.png);
background-size: cover;
}
button.unmute {
background-image: url(icons/unmute.png);
background-size: cover;
}
button.fullscreen {
background-image: url(icons/fullscreen.png);
background-size: cover;
}
input[type="range"] {
-webkit-appearance: none;
background-color: #d9d9d9;
border-radius: 5px;
height: 5px;
margin: 0 10px;
outline: none;
width: 200px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #333;
border-radius: 50%;
cursor: pointer;
height: 15px;
width: 15px;
}
#currentTime, #duration {
margin: 0 10px;
}
JavaScript代码：
var video = document.getElementById("myVideo");
var playPauseBtn = document.getElementById("playPauseBtn");
var muteBtn = document.getElementById("muteBtn");
var fullscreenBtn = document.getElementById("fullscreenBtn");
var seekBar = document.getElementById("seekBar");
var volumeBar = document.getElementById("volumeBar");
var currentTime = document.getElementById("currentTime");
var duration = document.getElementById("duration");
// Play or pause video when play/pause button is clicked
playPauseBtn.addEventListener("click", function() {
if (video.paused) {
video.play();
playPauseBtn.className = "pause";
} else {
video.pause();
playPauseBtn.className = "play";
}
});
// Update seek bar and current time on timeupdate event
video.addEventListener("timeupdate", function() {
var progress = (video.currentTime / video.duration) * 100;
seekBar.value = progress;
var minutes = Math.floor(video.currentTime / 60);
var seconds = Math.floor(video.currentTime % 60);
if (seconds < 10) {
seconds = "0" + seconds;
}
currentTime.innerHTML = minutes + ":" + seconds;
});
// Update video current time when seek bar is changed
seekBar.addEventListener("input", function() {
var time = video.duration * (seekBar.value / 100);
video.currentTime = time;
});
// Update volume and mute button when volume bar is changed
volumeBar.addEventListener("input", function() {
video.volume = volumeBar.value;
if (video.volume == 0) {
muteBtn.className = "mute";
} else {
muteBtn.className = "unmute";
}
});
// Toggle mute when mute button is clicked
muteBtn.addEventListener("click", function() {
if (video.volume != 0) {
video.volume = 0;
muteBtn.className = "mute";
} else {
video.volume = volumeBar.value;
muteBtn.className = "unmute";
}
});
// Toggle fullscreen when fullscreen button is clicked
fullscreenBtn.addEventListener("click", function() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
}
});
// Update duration when metadata is loaded
video.addEventListener("loadedmetadata", function() {
var minutes = Math.floor(video.duration / 60);
var seconds = Math.floor(video.duration % 60);
if (seconds < 10) {
seconds = "0" + seconds;
}
duration.innerHTML = minutes + ":" + seconds;
});
在此示例中，我们使用了HTML5的视频标签，以便在网页中嵌入视频。我们还使用了CSS来设计播放器的外观，并使用JavaScript编写了一些功能，例如播放/暂停控制、音量控制、全屏控制和进度条控制。我们还使用了一些图标来使播放器看起来更加美观。
请注意，此示例可能需要进行一些调整，以便适应您的具体需求。但是，这应该为您提供一个良好的起点，以便开始设计自己的视频播放器。
原文地址: https://www.cveoy.top/t/topic/nDQY 著作权归作者所有。请勿转载和采集!