Konflik peristiwa PlayToggle Video.js

Tujuan: mengikat tombol spasi untuk memutar/menjeda video yang disematkan melalui video.js

Masalah: walaupun pada pandangan pertama cukup jelas, tampaknya peristiwa klik pada tombol playtoggle @ bilah kontrol mengacaukan acara tersebut (mungkin semacam masalah kondisi balapan). Tag <video> sedang dimasukkan melalui permintaan jQuery ‹ jHXR.

Deskripsi: Berikut kodenya:

var
    self = this,
    vSrc = 'blah/Blah',
    videoOptions = {
        controlBar: {
            children: {
                volumeControl: false,
                muteToggle: false,
                fullscreenToggle: false
            }
        },
        poster: app.profile.virtualPath + '/Content/images/General/logo-web.png'
    };

var vC = $('<div class="video-container" />');
var vTag = $('<video controls preload="none" id="v1" width="100%" height="auto">' +
    '<source src="' + vSrc + '" type="video/mp4" />' +
    '</video>');

vC.append(vTag);
$(this.element).prepend(vC);

this.videoPlayer = videojs("v1", videoOptions, function () {
    this.one('play', function (e) {
        this.posterImage.hide();
    });
});

$(document).on('keyup.video', function (e) {
    e.stopImmediatePropagation();
    e.preventDefault();
    if (e.keyCode == 32) {
        self.videoPlayer.controlBar.playToggle.trigger('click');
    }
});

Ini berfungsi dengan baik jika saya hanya menggunakan keyboard untuk memulai (tidak diperlukan putar otomatis), memutar dan menjeda video. Bahkan berfungsi dengan baik jika saya mengklik video itu sendiri (mulai diputar), menekan spasi (berjeda), mengklik video/tekan spasi lagi (terus diputar). Namun segera setelah tombol PlayToggle diklik untuk memutar video, menekan spasi hanya akan menjeda video selama sekejap (bahkan tidak sedetik pun) dan melanjutkan pemutaran. Sekali lagi, event mouseup spasi hanya memicu event "klik" pada tombol playtoggle, tidak ada yang lain!

Ada ide apa yang terjadi di sini?


javascript video.js html5-video
person pop    schedule 28.04.2015    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward

Solusi: Anehnya, ketika komponen kontrol @controlBar diklik, komponen tersebut tetap fokus. Rupanya perilaku ini yang menyebabkan kesalahan. Baris berikut telah menyelesaikan masalah, tapi hei... beri tahu saya mengapa ini harus menjadi perilaku default?

$(this.videoPlayer.controlBar.el()).find('.vjs-control').on('click', function (e) {
     $(this).trigger('blur');
});
person pop    schedule 28.04.2015