我有一个一分钟长的视频火车移动和一些数据系列有关他的位置,车载加速计等。
我的目标是用Highcharts.js制作这些测量值的折线图,这些曲线图是以每秒20点的速度随视频动态绘制的。这些曲线图必须随视频移动,这样,如果用户返回,这些曲线图也会在同一帧上移动,依此类推。
我想知道是否有一种方法可以将事件附加到视频进度条,并每隔x毫秒和/或每次用户播放/停止视频时重新绘制图表
我有一个一分钟长的视频火车移动和一些数据系列有关他的位置,车载加速计等。
我的目标是用Highcharts.js制作这些测量值的折线图,这些曲线图是以每秒20点的速度随视频动态绘制的。这些曲线图必须随视频移动,这样,如果用户返回,这些曲线图也会在同一帧上移动,依此类推。
我想知道是否有一种方法可以将事件附加到视频进度条,并每隔x毫秒和/或每次用户播放/停止视频时重新绘制图表
1条答案
按热度按时间csga3l581#
将视频元素的
timeupdate
事件与Highcharts系列的setData
方法连接起来就足够了。示例:
现场演示: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