当前位置：文江博客话题详情

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

发布于 2025-01-09 00:48:32 字数 200 浏览 0 评论 0原文

我有一个一分钟长的火车移动视频和一些关于他的位置、车载加速度计等的数据系列。

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

相权↑美人 2025-01-16 00:48:32

将视频元素的 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/< /a>

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

Connecting timeupdate event for a video element with setData method for a Highcharts series should be enough.

Example:

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);
    }
});

Live demo: http://jsfiddle.net/BlackLabel/8a6yvjs5/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setData

Docs:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event

回复收藏 0 原文

~没有更多了~