Highcharts系列数据select点视频同步

Question

我需要一些帮助来将视频时间轴与曲线系列的数据 select 点同步。为了更好地解释我想做什么以及到目前为止我做了什么，请查看 my example

我需要 selected 点停止闪烁。我需要更流畅的运动。我尝试了一些技巧但没有成功。

非常欢迎任何帮助。

var video = document.getElementById("Video");

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'spline',
            margin: [0, 0, 0, 0]
        },
        title: {
            text: ''
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            lineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            minorTickLength: 0,
            tickLength: 0,
            text: null,
            labels: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: null
            },
            max: 100,
            min: 0,
            minorGridLineWidth: 0,
            gridLineWidth: 0,
            alternateGridColor: null,
            labels: {
                enabled: false
            },
            plotLines: [{
                value: 70.345255,
                color: '#62acdf',
                dashStyle: 'dot',
                width: 1
            }, {
                value: 29.654745,
                color: '#62acdf',
                dashStyle: 'dot',
                width: 1
            }],
            plotBands: [{
                from: 29.654745,
                to: 70.345255,
                color: 'rgba(98,172,223,0.1)'
            }]
        },
        tooltip: {
            formatter: function () {
                return this.x / 2 + 's<br>' + '<span style="color:' + this.series.color + '">●</span> ' + this.series.name + ': <b> ' + this.y.toFixed(2) + '</b>';
            }
        },
        plotOptions: {
            series: {
                allowPointSelect: true,
                point: {
                    events: {
                        click: function () {
                            video.currentTime = (this.x / 2);
                            video.pause();
                        }
                    }
                },
                marker: {
                    radius: 1,
                    states: {
                        select: {
                            radius: 3,
                            fillColor: '#62acdf',
                            lineColor: '#62acdf',
                            lineWidth: 4
                        }
                    }
                }
            },
            spline: {
                lineWidth: 2,
                states: {
                    hover: {
                        lineWidth: 2
                    }
                },
                marker: {
                    enabled: true
                }
            }
        },
        series: [{
            name: 'txt',
            color: '#62acdf',
            data: [{
                y: 30.866000,
                color: '#BF0B23',
                radius: 0
            }, {
                y: 42.868000,
                color: '#BF0B23',
                radius: 0
            }, {
                y: 46.859000,
                color: '#BF0B23',
                radius: 0
            }, {
                y: 51.062000,
                color: '#BF0B23',
                radius: 0
            }, {
                y: 68.203000,
                color: '#BF0B23',
                radius: 0
            }, {
                y: 56.879000,
                color: '#BF0B23',
                radius: 0
            },
            72.250000, {
                y: 35.184000,
                color: '#BF0B23',
                radius: 0
            }, {
                y: 66.606000,
                color: '#BF0B23',
                radius: 0
            }, {
                y: 34.417000,
                color: '#BF0B23',
                radius: 0
            },
            19.729000, 22.328000, 26.512000, 8.023900, 23.775000, 19.330000, 18.326000, {
                y: 43.427000,
                color: '#BF0B23',
                radius: 0
            }, {
                y: 37.062000,
                color: '#BF0B23',
                radius: 0
            }, {
                y: 49.789000,
                color: '#BF0B23',
                radius: 0
            }, {
                y: 42.211000,
                color: '#BF0B23',
                radius: 0
            }, {
                y: 50.581000,
                color: '#BF0B23',
                radius: 0
            },
            16.836000, 14.436000, 9.622700, 6.944100, 28.147000, 16.000000, {
                y: 45.813000,
                color: '#BF0B23',
                radius: 0
            }, {
                y: 48.373000,
                color: '#BF0B23',
                radius: 0
            }, {
                y: 64.385000,
                color: '#BF0B23',
                radius: 0
            }, {
                y: 42.571000,
                color: '#BF0B23',
                radius: 0
            }, {
                y: 65.816000,
                color: '#BF0B23',
                radius: 0
            },
            10.839000, 21.495000, {
                y: 47.478000,
                color: '#BF0B23',
                radius: 0
            },
            10.273000, 29.029000, 21.656000, 15.887000, 15.531000, {
                y: 55.848000,
                color: '#BF0B23',
                radius: 0
            },
            70.714000, {
                y: 50.479000,
                color: '#BF0B23',
                radius: 0
            }, {
                y: 64.778000,
                color: '#BF0B23',
                radius: 0
            }, {
                y: 67.984000,
                color: '#BF0B23',
                radius: 0
            }, {
                y: 60.161000,
                color: '#BF0B23',
                radius: 0
            }, {
                y: 32.788000,
                color: '#BF0B23',
                radius: 0
            },
            27.038000, {
                y: 30.471000,
                color: '#BF0B23',
                radius: 0
            },
            27.768000, {
                y: 34.068000,
                color: '#BF0B23',
                radius: 0
            }, {
                y: 43.744000,
                color: '#BF0B23',
                radius: 0
            },
            72.629000, {
                y: 52.510000,
                color: '#BF0B23',
                radius: 0
            }, {
                y: 55.916000,
                color: '#BF0B23',
                radius: 0
            }, {
                y: 64.293000,
                color: '#BF0B23',
                radius: 0
            },
            74.891000, {
                y: 48.053000,
                color: '#BF0B23',
                radius: 0
            },
            22.576000, {
                y: 50.433000,
                color: '#BF0B23',
                radius: 0
            }, ]
        }],
        navigation: {
            menuItemStyle: {
                fontSize: '10px'
            }
        }
    });
});
var curves = $('#container').highcharts();
video.addEventListener("timeupdate", function () {
    var percent = (this.currentTime / this.duration);
    var posicao = (percent * curves.series[0].data.length).toFixed(0);
    curves.series[0].data[posicao].select();

}, false);

Answer 1

在我看来你的 video.addEventListener 开火太多了。这是导致 "blinking" 因为它一遍又一遍地选择相同的点。也许检查 posicao 是否与上次运行不同，如果它不只是退出。如果不同，则执行 select().

Answer 2

您可以使用事件同步变量 'seeked'。当用户单击时间轴时，当视频实际进入用户单击的帧时会触发此事件。然后你应该同步 posicao 与持有最后一个已知位置的变量。

Highcharts系列数据select点视频同步

Highcharts series data select point video sync

video

synchronization

series

highcharts