Question

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

一些其他细节：

视频播放器需要“功能齐全”（即播放/暂停，快进，快退等）
图形需要同时包含x轴和y轴。
唯一的图形交互性是对工具提示的支持。

我愿意接受任何能够完成此任务的工具。我认识到可能需要进行大量的自定义。

Answer 1

您可以尝试使用，但是要获得与视频和图表的交互性将更加困难。

这是一个CSS网格示例，可将元素相互叠加。为了使您能够与视频进行交互，我将图表设置为pointer-events: none;，我在图表中添加了一个假的“ point” 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>

有没有办法在JavaScript中将交互式线条图叠加在视频播放器的顶部？

1 个答案: