Question

我试图从头开始创建HTML5视频播放器。但是我无法创建像vimeo（或youtube）一样很好滑动的搜索栏。

我所做的是在搜索栏中添加了一个额外的div / span（突出显示了总观看时间）。然后我添加了mousedown和mousemove事件。当mousedown事件被调用时，我将var（Boolean）设为true。虽然这是真的，但我根据mousemove的位置更改了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);

Answer 1

我正在根据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);

这就是为什么它没有响应。即使我快速滑动，经过栏的宽度也只会在一秒钟后移动。

创建类似Vimeo视频播放器（HTML5）的Seekbar

1 个答案: