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

rjzwgtxy  于 2022-11-11  发布在  Highcharts
关注(0)|答案(1)|浏览(169)

我有一个一分钟长的视频火车移动和一些数据系列有关他的位置,车载加速计等。
我的目标是用Highcharts.js制作这些测量值的折线图,这些曲线图是以每秒20点的速度随视频动态绘制的。这些曲线图必须随视频移动,这样,如果用户返回,这些曲线图也会在同一帧上移动,依此类推。
我想知道是否有一种方法可以将事件附加到视频进度条,并每隔x毫秒和/或每次用户播放/停止视频时重新绘制图表

csga3l58

csga3l581#

将视频元素的timeupdate事件与Highcharts系列的setData方法连接起来就足够了。
示例:

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/en-US/docs/Web/API/HTMLMediaElement/currentTime
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event

相关问题