ข้อขัดแย้งของเหตุการณ์ Video.js PlayToggle

วัตถุประสงค์: ผูกแป้น Spacebar เพื่อเล่น/หยุดวิดีโอที่ฝังผ่าน video.js

ปัญหา: ถึงแม้จะค่อนข้างตรงไปตรงมาเมื่อมองแวบแรก แต่ดูเหมือนว่าเหตุการณ์การคลิกบนปุ่ม playtoggle @ แถบควบคุมจะทำให้เหตุการณ์ยุ่งเหยิง (อาจเป็นปัญหาสภาพการแข่งขันบางประเภท) แท็ก <video> กำลังถูกแทรกผ่านคำขอ jQuery ‹ jHXR

คำอธิบาย: นี่คือรหัส:

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');
    }
});

มันใช้งานได้ดีถ้าฉันใช้เพียงแป้นพิมพ์เพื่อเริ่มเล่น (ไม่จำเป็นต้องเล่นอัตโนมัติ) เล่นและหยุดวิดีโอชั่วคราว มันจะใช้งานได้ดีหากฉันคลิกวิดีโอ (เริ่มเล่น) กด Space (หยุดชั่วคราว) คลิกวิดีโอ/กด Spacebar อีกครั้ง (เล่นต่อ) อย่างไรก็ตาม ทันทีที่คลิกปุ่ม PlayToggle เพื่อเล่นวิดีโอ การกดปุ่ม Spacebar จะหยุดวิดีโอชั่วคราวเพียงพริบตาเดียว (ไม่แม้แต่วินาทีเดียว) แล้วเล่นต่อ ขอย้ำอีกครั้งว่าเหตุการณ์การเลื่อนเมาส์ของสเปซบาร์จะทำให้เกิดเหตุการณ์ "คลิก" บนปุ่ม playtoggle ไม่มีอะไรอื่นอีกแล้ว!

มีความคิดเห็นว่าเกิดอะไรขึ้นที่นี่?


javascript video.js html5-video
person pop    schedule 28.04.2015    source แหล่งที่มา

คำตอบ (1)


arrow_upward
1
arrow_downward

วิธีแก้ไข: น่าแปลกที่เมื่อมีการคลิกส่วนประกอบควบคุม @controlBar ส่วนประกอบนั้นจะยังคงโฟกัสอยู่ เห็นได้ชัดว่าพฤติกรรมนี้ทำให้เกิดข้อผิดพลาด บรรทัดต่อไปนี้ช่วยแก้ปัญหาได้ แต่เดี๋ยวก่อน... บอกฉันหน่อยว่าทำไมสิ่งนี้ถึงเป็นพฤติกรรมเริ่มต้น

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