web-dev-qa-db-ja.com

オーディオプレイリスト：「トラックチェンジ」、「トラックエンド」のイベントをバインドするには？

ネイティブのWordpressプレイリストをカスタマイズしています

echo do_shortcode('[playlist ids="3267,3266,821"]');

イベントをバインドして "track change"と "track end"を検出し、それらのイベントが発生したときに何かをしたい.

だから、私はwp-playlist.jsをチェックしました。いくつかのイベントが表示されますが、別のjsファイルにバインドする方法がわかりません（jquery）

events : {
        'click .wp-playlist-item' : 'clickTrack',
        'click .wp-playlist-next' : 'next',
        'click .wp-playlist-prev' : 'prev'
    },

    clickTrack : function (e) {
        e.preventDefault();

        this.index = this.$( '.wp-playlist-item' ).index( e.currentTarget );
        this.setCurrent();
    },

    ended : function () {
        if ( this.index + 1 < this.tracks.length ) {
            this.next();
        } else {
            this.index = 0;
            this.current = this.tracks.at( this.index );
            this.loadCurrent();
        }
    },

    next : function () {
        this.index = this.index + 1 >= this.tracks.length ? 0 : this.index + 1;
        this.setCurrent();
    },

    prev : function () {
        this.index = this.index - 1 < 0 ? this.tracks.length - 1 : this.index - 1;
        this.setCurrent();
    },

それらのイベントをバインドすることは可能ですか？

mediamedia-libraryaudiomedia-settings
1
Atthapon Junpun-eak

プレイリスト内のオーディオ要素をターゲットにすることで、「終了」イベントにバインドできます。

$('.wp-playlist .mejs-mediaelement audio').on('ended', function (event) {
    console.log('ended');
});

「クリック」イベントは標準的なものです。

$('.wp-playlist-item').on('click', function (event) {
    console.log('clicked');
});
2
bonger