Tengo un video de un minuto de duración de un tren en movimiento y una serie de datos sobre su posición, acelerómetro a bordo, etc.
Mi objetivo es hacer gráficos de líneas (con Highcharts.js) de esas medidas que se dibujan dinámicamente con el video a una velocidad de 20 puntos por segundo. Los gráficos tienen que moverse con el video, de modo que si el usuario retrocede también los gráficos van en el mismo marco y así sucesivamente.
Me preguntaba si hay alguna manera de adjuntar un evento a la barra de progreso del video y volver a dibujar el gráfico cada x milisegundos y/o cada vez que el usuario reproduce/detiene el video.
Conectar el evento de timeupdate de tiempo para un elemento de video con el método setData para una serie de Highcharts debería ser suficiente.
Ejemplo:
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); } });Demostración en vivo: http://jsfiddle.net/BlackLabel/8a6yvjs5/
Referencia de la API: https://api.highcharts.com/class-reference/Highcharts.Series#setData
Documentos:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event