我尝试从头开始创建HTML5视频播放器。但我无法创建一个像vimeo(或youtube(那样滑动良好的搜索栏。
我所做的是在搜索栏中添加了一个额外的div/span(突出显示总观看时间(。然后我添加了mousedown&mousemove事件。当mousedown事件被调用时，我将var(布尔值(设为true。虽然这是真的，但我会根据鼠标移动的位置更改div/span的宽度。
它工作，但没有反应 我无法无缝滑动所以我想知道如何构建一个像vimeo这样的响应性搜索栏(youtube是一样的，但youtube播放器有一个像范围滑块一样的点，但我不想这样(。我更喜欢没有任何框架软件或API的纯JavaScript。
我的代码：
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
</head>
<body>
<div class="container">
<video src="http://www.treatbd.com/Assets/vid.mp4" poster=""></video>
<div class="controls">
<!-- play/pause button -->
<div class="play"></div>
<!-- the seekbar -->
<div class="line">
<div class="elapsed"></div>
</div>
<div class="screen"></div>
</div>
</div>
</body>
</html>
CSS/SASS
html, body
margin: 0
padding: 0
background-color: #272b32
.container
height: 465px
width: 808px
margin: auto
margin-top: calc(50vh - 270px)
display: flex
flex-wrap: wrap
justify-content: center
position: relative
overflow: hidden
border-radius: 1px
video
background-color: aliceblue
object-position: center
width: 100%
height: 100%
display: block
object-fit: cover
.controls
background-color: transparent
width: 100%
height: 9%
position: absolute
left: 0
right: 0
bottom: 0
display: flex
transition: visibility 750ms
.controls *
box-sizing: border-box
border-left: 1px solid deepSkyblue
.play
display: inline-block
height: 100%
width: 7%
background: rgba(16,18,20, .4)
&:hover
background: rgba(16,18,20, .6)
.screen
display: inline-block
height: 100%
width: 7%
background: rgba(16,18,20, .4)
&:hover
background: rgba(16,18,20, .6)
.volume
display: none
.line
display: inline-block
height: 100%
width: 86%
background: rgba(0, 5, 7, 0.45)
position: relative
.elapsed
position: absolute
background: rgba(78, 144, 249, 0.4)
height: 100%
width: 0%
transition: width 200ms
JavaScript
var video = document.querySelector("video");
var playButton = document.querySelector(".play");
var elapsed = document.querySelector(".elapsed");
var line = document.querySelector(".line");
var duration = video.duration;
var playing = false;
var mouseDown = false;
// the play/pause button
playButton.addEventListener("click", function() {
if (playing) video.pause();
else video.play();
playing = !playing;
});
// click on the video to play/pause
video.addEventListener("click", function() {
if (playing) video.pause();
else video.play();
playing = !playing;
});
// seekbar
line.addEventListener("mousedown", function(e) {
// set current time according to mousedown position
video.currentTime = Number(
e.layerX / (line.clientWidth / 100) * (duration / 100)
).toFixed(1);
// change the width of elapsed bar.
elapsed.style.width = video.currentTime / (duration / 100) + "%";
mouseDown = true;
});
line.addEventListener("mousemove", function(e) {
if (mouseDown) {
video.currentTime = Number(
e.layerX / (line.clientWidth / 100) * (duration / 100)
).toFixed(1);
}
});
line.addEventListener("mouseup", () => (mouseDown = false));
// to let the metadata loaded
var dt = setInterval(function() {
if (video.readyState > 0) {
duration = Number(video.duration).toFixed(2);
clearTimeout(dt);
}
}, 50);
// highgligh the amount of played time. via a elapse bar
setInterval(function() {
elapsed.style.width = video.currentTime / (duration / 100) + "%";
}, 1000);
我根据mousemove更改了currentTime。
line.addEventListener("mousemove", function(e) {
if (mouseDown) {
video.currentTime = Number(
e.layerX / (line.clientWidth / 100) * (duration / 100)
).toFixed(1);
}
});
并将逝去条的宽度保留为currentTime。但我每1秒就会读currentTime。
setInterval(function() {
elapsed.style.width = video.currentTime / (duration / 100) + "%";
}, 1000);
这就是为什么它没有反应。即使我快速滑动，过去条的宽度也只会在一秒钟后移动。
将间隔设置为10(10毫秒(