时间戳

首页 > 解决方案 > 有没有办法在 JavaScript 中的视频播放器顶部覆盖交互式线图？

javascript - 有没有办法在 JavaScript 中的视频播放器顶部覆盖交互式线图？

问题描述

我正在尝试找到一种在 JavaScript 中将交互式线图放置在视频播放器顶部的方法。

一些额外的细节：

我对任何能够完成这项任务的工具持开放态度。我认识到可能需要进行大量的定制。

标签： javascript

解决方案

您可以尝试使用 ，但同时获得视频和图表的交互性会更加困难。

这是一个使用 CSS 网格将元素放在一起的示例。为了让您能够与视频进行交互，我将图表设置为在图表中pointer-events: none;添加了一个虚假的“点”div，以添加回指针事件。您可以通过它在悬停时改变颜色的事实来看到这一点；

video {
  background-color: grey;
  width: 100%;
  grid-column: 1;
  grid-row: 1;
}

.chart {
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  background-color: transparent;
  pointer-events: none;
}

.point {
  position: relative;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: white;
  pointer-events: all;
}

.point:hover {
  background-color: hotpink;
}

.area {
  display: grid;
}
<div class="area">
  <video controls src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4"></video>
  <div class="chart">
    <div class="point"></div>
  </div>
</div>

推荐阅读