视频目录进度条的制作（html(js)+pr）

要创建一个视频目录进度条，你可以使用HTML、JavaScript和CSS来构建界面，并使用一些现成的JavaScript库，如Plyr或Video.js来处理视频播放。以下是一个简单的示例，展示如何制作一个基本的视频目录进度条：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Progress Bar</title>
<style>
  #myVideo {
    width: 100%;
  }
  .progress-bar {
    width: 0;
    height: 5px;
    background-color: #ddd;
    transition: width 0.3s;
  }
  .time-slider {
    position: relative;
    width: 100%;
    margin-top: 10px;
  }
  .time-slider input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    background: #555;
    outline: none;
    opacity: 0.7;
    -webkit-transition: 0.2s;
    transition: opacity 0.2s;
  }
  .time-slider input:hover {
    opacity: 1;
  }
  .time-slider input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: #4CAF50;
    cursor: pointer;
  }
  .time-slider input::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: #4CAF50;
    cursor: pointer;
  }
</style>
</head>
<body>
 
<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
 
<div class="progress-bar"></div>
<div class="time-slider">
  <input type="range" min="0" max="100" value="0" class="time-slider" id="timeSlider">
</div>
 
<script>
// 获取视频和进度条元素
var video = document.getElementById('myVideo');
var progressBar = document.querySelector('.progress-bar');
var timeSlider = document.getElementById('timeSlider');
 
// 更新进度条和视频时间
function updateProgress() {
  var percent = (video.currentTime / video.duration) * 100;
  progressBar.style.width = percent + '%';
  timeSlider.value = percent;
}
 
// 设置视频时间到滑块位置
function setVideoTime() {
  var time = video.duration * (timeSlider.value / 100);
  video.currentTime = time;
}
 
// 绑定事件监听器
video.addEventListener('timeupdate', updateProgress);
timeSlider.addEventListener('input', setVideoTime);
</script>
 
</body>
</html>

在这个例子中，我们有一个HTML <video>元素和一个进度条.progress-bar。JavaScript用于更新进度条的宽度以匹配视频的当前播放时间，并允许用户通过拖动滑块来快进或快退视频。这个例子假设你有一个名为movie.mp4的视频文件在同一目录下。

视频目录进度条的制作（html(js)+pr）

评论已关闭

推荐阅读