设计html视频的问题-如何停止视频缓冲

Question

我正在尝试设计一个像youtube播放器的视频播放器，当鼠标在视频的时间线上时，我想让它在时间线上显示视频的最小化图像，就像youtube播放器一样

为了做到这一点，我在html文件中放置了两个视频标签，一个是主视频，另一个是当鼠标经过视频的时间线时出现的，并带有鼠标在时间线上的时间线的currentTime

但我注意到这种方式在互联网上很有压力，因为每次我设置第二个视频时，currentTime都会进行缓冲

是否有停止缓冲的解决方案或显示此最小化图像的任何替代方法

Answer 1

创建视频时间轴缩略图(静态照片)

你能做的最好的是:在视频上传时，(例如:使用FFMPEG)拍摄视频数据的静态图像/缩略图。然后，当您绘制您的搜索预览时，只需获取所需的缩略图索引。

否则，您可以：：

• 创建视频元素
• 创建画布元素
• 如果数组中仍然不存在，则创建数组来存储静止图像
• ：
  1. 设置克隆的视频时间
  2. 抓取视频数据到canvas
  3. 将图像数据存储到stills中

• 如果a仍然存在，只需使用该图像

这里有一段脏代码，只是为了给你一个概念：

​

const totStills = 10;

const addSeekThumbnail = (EL) => {
  const VID = EL.querySelector("video");
  const DSK = document.createElement("div");
  const VSK = document.createElement("video");
  const CTX = document.createElement("canvas").getContext("2d");
  const stills = new Array(totStills);

  VSK.setAttribute("preload", "metadata");
  VSK.setAttribute("crossorigin", "*");
  DSK.classList.add("videoSeek");
  VSK.src = VID.src;
  EL.append(DSK);

  VID.addEventListener("mousemove", seekShot);
  EL.addEventListener("mousemove", toggleSeek);
  EL.addEventListener("mouseleave", toggleSeek);

  function takeStill() {
    const i = VSK.dataset.fr * totStills;
    if (stills[i]) return;
    CTX.drawImage(VSK, 0, 0, VSK.videoWidth, VSK.videoHeight);
    stills[i] = CTX.canvas.toDataURL("image/png");
    loadStill()
  }

  function loadStill() {
    const i = VSK.dataset.fr * totStills;
    if (stills[i]) {
      DSK.style.backgroundImage = `url(${stills[i]})`;
    } else {
      DSK.style.backgroundImage = `none`;
      VSK.currentTime = Math.round(VSK.dataset.fr * VID.duration);
      VSK.addEventListener("seeked", takeStill, {
        once: true
      });
    }
  }

  function toggleSeek(ev) {
    if (ev.type === "mouseleave") {
      return DSK.classList.remove("show");
    }
    const bcr = EL.getBoundingClientRect();
    const my = ev.clientY - bcr.top;
    DSK.classList.toggle("show", bcr.height - my < 30);
  }

  function seekShot(ev) {
    const bcr = EL.getBoundingClientRect();
    const mx = ev.clientX - bcr.left;
    const x = mx / bcr.width;
    const fr = Math.round(x * totStills) / totStills;
    if (VSK.dataset.fr === fr) return;
    VSK.dataset.fr = fr;
    DSK.style.left = `${fr * 80}%`; // 80 because it's 20% wide
    loadStill();
  }
};

const ELS_frames = document.querySelectorAll(".videoFrame");
ELS_frames.forEach(addSeekThumbnail);

video {
  max-width: 100%;
}

.videoFrame {
    display: inline-block;
  position: relative;
  margin: 0;
}

.videoSeek {
  position: absolute;
  z-index: 2;
  bottom: 70px;
  left: 0;
  width: 20%;
  height: 20%;
  pointer-events: none;
  box-shadow: 0 0 0 2px #fff;
  background-color: rgba(255, 255, 255, 0.6);
  transition: opacity 0.3s, left 0.2s;
  opacity: 0;
}

.videoSeek.show {
  opacity: 1;
}

<div class="videoFrame">
  <video id="video" crossorigin="*" src="https://raw.githubusercontent.com/Ahmetaksungur/aksvideoplayer/main/videos/video-360.mp4" controls></video>
</div>

​