将 html5 视频与 highchart.js 折线图同步

Question

我有一段一分钟长的火车行驶视频和一些关于他的 position、车载加速度计等的数据系列。

我的目标是制作折线图（使用 Highcharts.js）以每秒 20 点的速度随视频动态绘制的那些测量值。 图表必须随视频移动，因此如果用户 go 返回同一帧的图表 go，依此类推。

我想知道是否有办法将事件附加到视频进度条并每 x 毫秒和/或每次用户播放/停止视频时重新绘制图表

Answer 1

使用 Highcharts 系列的setData方法连接视频元素的timeupdate事件应该就足够了。

例子：

let currentDataIndex = 0;
const video = document.getElementById("video1");

const chart = Highcharts.chart('container', {
    series: [{
        // Highcharts mutate original data array, so use a copy
        data: data[currentDataIndex].slice()
    }]
});

const updateChartData = index => {
    chart.series[0].setData(data[index].slice());
    currentDataIndex = index;
};

video.addEventListener('timeupdate', e => {
    const second = Math.floor(video.currentTime);

    if (second !== currentDataIndex) {
        updateChartData(second);
    }
});

---

现场演示： http://jsfiddle.net/BlackLabel/8a6yvjs5/

API参考： https://api.highcharts.com/class-reference/Highcharts.Series#setData

文档：

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/currentTime

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/timeupdate_event