定义一个自定义控制栏的HTML5网页视频播放器,实现视频播放界面在不同浏览器上显示相同的效果,并完成视频的播放、暂停和快进等操作
时间: 2023-06-19 12:09:02 浏览: 119
以下是一个简单的自定义控制栏的HTML5网页视频播放器示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>自定义控制栏HTML5视频播放器</title>
<style>
/* 控制栏样式 */
.controls {
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
position: absolute;
bottom: 0;
width: 100%;
}
.controls button {
background-color: transparent;
border: none;
color: #fff;
cursor: pointer;
font-size: 20px;
margin-right: 10px;
outline: none;
}
.controls button:hover {
color: #ccc;
}
/* 视频样式 */
video {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<video id="my-video" controls>
<source src="video.mp4" type="video/mp4">
</video>
<div class="controls">
<button id="play-pause-btn">►</button>
<button id="fast-forward-btn">►►</button>
<button id="mute-btn">🔊</button>
<input id="volume-slider" type="range" min="0" max="1" step="0.1" value="1">
<span id="current-time"></span>
<input id="seek-bar" type="range" min="0" value="0">
<span id="duration"></span>
</div>
<script>
var video = document.getElementById("my-video");
var playPauseBtn = document.getElementById("play-pause-btn");
var fastForwardBtn = document.getElementById("fast-forward-btn");
var muteBtn = document.getElementById("mute-btn");
var volumeSlider = document.getElementById("volume-slider");
var currentTime = document.getElementById("current-time");
var seekBar = document.getElementById("seek-bar");
var duration = document.getElementById("duration");
// 播放或暂停视频
function togglePlayPause() {
if (video.paused) {
video.play();
playPauseBtn.innerHTML = "❚❚";
} else {
video.pause();
playPauseBtn.innerHTML = "►";
}
}
// 快进视频
function fastForward() {
video.currentTime += 5;
}
// 静音或取消静音
function toggleMute() {
if (video.muted) {
video.muted = false;
muteBtn.innerHTML = "🔊";
} else {
video.muted = true;
muteBtn.innerHTML = "🔇";
}
}
// 调整音量
function adjustVolume() {
video.volume = volumeSlider.value;
}
// 更新当前时间和视频时长
function updateTime() {
currentTime.innerHTML = formatTime(video.currentTime);
duration.innerHTML = formatTime(video.duration);
// 更新进度条位置
var progress = (video.currentTime / video.duration) * 100;
seekBar.value = progress;
}
// 跳转视频进度
function seekVideo() {
var progress = seekBar.value / 100;
var time = progress * video.duration;
video.currentTime = time;
}
// 格式化时间
function formatTime(time) {
var minutes = Math.floor(time / 60);
var seconds = Math.floor(time - minutes * 60);
if (seconds < 10) {
seconds = "0" + seconds;
}
return minutes + ":" + seconds;
}
// 监听视频事件
video.addEventListener("play", function() {
playPauseBtn.innerHTML = "❚❚";
});
video.addEventListener("pause", function() {
playPauseBtn.innerHTML = "►";
});
video.addEventListener("timeupdate", updateTime);
// 监听控制栏按钮点击事件
playPauseBtn.addEventListener("click", togglePlayPause);
fastForwardBtn.addEventListener("click", fastForward);
muteBtn.addEventListener("click", toggleMute);
volumeSlider.addEventListener("input", adjustVolume);
seekBar.addEventListener("input", seekVideo);
</script>
</body>
</html>
```
这个示例中,我们使用了 HTML5 的 `<video>` 元素来显示视频,并添加了一个自定义的控制栏。控制栏包含了播放/暂停按钮、快进按钮、静音/取消静音按钮、音量滑块、当前时间和视频时长、进度条等控件。
在 JavaScript 中,我们添加了一些函数来处理控制栏按钮的点击事件,以及更新视频的播放状态、音量、进度等信息。我们还监听了视频的一些事件,如播放/暂停、时间更新等,以便及时更新控制栏上的信息。
这个示例可以在大多数现代浏览器上正常工作,并在不同浏览器上呈现相同的外观和行为。
阅读全文