video - Highchartsシリーズデータ選択ポイントビデオ同期

原文 video highcharts synchronization series

ビデオのタイムラインをカーブのシリーズのデータ​​選択ポイントと同期させるために助けが必要です。
私が何をしたいか、今まで何をしたかをよりよく説明するには、my exampleを見てください。

選択したドットの点滅を停止する必要があります。もっと滑らかな動きが必要です。
私はいくつかのトリックを試しましたが、成功しませんでした。

どんな助けでも大歓迎です。

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);
答え
'seeked'イベントを使用して変数を同期できます。
ユーザーがタイムラインをクリックすると、ビデオが実際にユーザーがクリックしたフレームに移動すると、このイベントが発生します。次に、最後の既知の位置を保持している変数とposicaoを同期する必要があります。
関連記事

java - 動画がページに表示されない(html5動画タグ)

firefox - HTML5ビデオとVideo.js:ソースの順序によっては、Firefoxで再生できない

ruby-on-rails - 動画や画像をRailsに保存する最良の方法[複製]

javascript - html5 javascript autoplayがAndroid 4.4で機能しない

java - Android向けYouTubeプレーヤーAPIがビデオ広告を表示しない

audio - Hi8-Lp形式からビデオを変換する

html - とにかく埋め込まれたvimeoビデオを含むiframeをサイレントにする方法はありますか?

python - Pygameムービーを再生するたびに音が出ない

c# - ビデオまたはスクリーンショットをディスクに書き込まずにメモリ内のビデオからスクリーンショット

c++ - Qt / C++マルチメディアプレーヤービデオクリップ、複数のビデオウィジェット