video.js和video.css逻辑全忘记了,已经删掉了,有空重新配置,当年找文心一言配置的,但是现在我还是看不懂啊,大悲,不过现在我应该可以在genmini的帮助下搞定了吧,css我想没问题的,不过js好难啊
This commit is contained in:
@@ -1,33 +0,0 @@
|
|||||||
/*简易的视频布局*/
|
|
||||||
/* 视频播放器容器样式 */
|
|
||||||
.video-container {
|
|
||||||
position: relative;
|
|
||||||
width: 640px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 自定义进度条容器样式 */
|
|
||||||
.custom-progress-bar {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 10px;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 10px;
|
|
||||||
background: #444;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 自定义进度条填充样式 */
|
|
||||||
.custom-progress-bar .fill {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 0;
|
|
||||||
background: #f00;
|
|
||||||
transition: width .2s; /* 平滑过渡效果 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 隐藏默认的浏览器进度条 */
|
|
||||||
video::-webkit-media-controls-timeline {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,54 +0,0 @@
|
|||||||
/* 简易视频播放器 */
|
|
||||||
var video = document.getElementById("Video");
|
|
||||||
var progressBar = document.getElementById("customProgressBar");
|
|
||||||
var fill = document.querySelector(".custom-progress-bar .fill");
|
|
||||||
|
|
||||||
// 监听mousedown事件开始拖动
|
|
||||||
progressBar.addEventListener("mousedown", function (e) {
|
|
||||||
// 防止默认行为
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
// 开始拖动
|
|
||||||
document.addEventListener("mousemove", onDrag);
|
|
||||||
document.addEventListener("mouseup", onDragEnd);
|
|
||||||
|
|
||||||
// 获取初始点击位置
|
|
||||||
var startX = e.pageX - progressBar.offsetLeft;
|
|
||||||
});
|
|
||||||
|
|
||||||
function onDrag(e) {
|
|
||||||
// 计算新的进度位置
|
|
||||||
var newPercent = (e.pageX - progressBar.offsetLeft) / progressBar.offsetWidth;
|
|
||||||
newPercent = Math.min(Math.max(0, newPercent), 1); // 限制在0到1之间
|
|
||||||
|
|
||||||
// 更新视频播放位置
|
|
||||||
video.currentTime = video.duration * newPercent;
|
|
||||||
|
|
||||||
// 更新进度条宽度
|
|
||||||
fill.style.width = newPercent * 100 + "%";
|
|
||||||
}
|
|
||||||
|
|
||||||
function onDragEnd() {
|
|
||||||
// 停止拖动
|
|
||||||
document.removeEventListener("mousemove", onDrag);
|
|
||||||
document.removeEventListener("mouseup", onDragEnd);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 视频加载元数据后初始化进度条
|
|
||||||
video.addEventListener("loadedmetadata", function () {
|
|
||||||
// 设置初始进度
|
|
||||||
updateProgressBar();
|
|
||||||
});
|
|
||||||
|
|
||||||
// 更新进度条
|
|
||||||
function updateProgressBar() {
|
|
||||||
var percent = (video.currentTime / video.duration) * 100;
|
|
||||||
fill.style.width = percent + "%";
|
|
||||||
}
|
|
||||||
|
|
||||||
// 监听视频播放过程中的时间更新
|
|
||||||
video.addEventListener("timeupdate", updateProgressBar);
|
|
||||||
|
|
||||||
//调节控制音量初始化
|
|
||||||
var Video = document.getElementById("Video");
|
|
||||||
Video.volume = 0.5; // 设置默认音量为50%
|
|
||||||
|
|||||||
Reference in New Issue
Block a user