有没有一种方法可以在JavaScript中的视频播放器上覆盖交互式折线图

Question

我正试图找到一种方法，用JavaScript在视频播放器上放置交互式折线图。

一些附加细节：

• 视频播放器需要"功能齐全"(即播放/暂停、快进、倒带等(
• 该图需要同时包括x轴和y轴
• 唯一需要的图形交互是对工具提示的支持

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

Answer 1

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

下面是一个使用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>