將 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