Question

目标：绑定空格键以播放/暂停通过video.js嵌入的视频

问题：虽然初看起来非常简单，但似乎playtoggle按钮@controlbar上的click事件搞砸了事件（可能是某种竞争条件问题）。正在通过jQuery＆lt;插入<video>标记。 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');
            }
        });

如果我只使用键盘启动（不需要自动播放），播放和暂停视频，它就可以正常工作。如果我点击视频本身（开始播放），点击空间（暂停），再点击视频/点击空格键（它继续播放），它甚至可以正常工作。然而只要点击PlayToggle按钮播放视频，点击空格键只会暂停视频一眨眼（甚至不是一秒钟）并继续播放。同样，空格键鼠标事件只会触发＆＃34;点击＆＃34;在playtoggle按钮上的事件，没有别的！

任何想法在这里发生了什么？

Answer 1

解决方案：令人惊讶的是，当点击控件组件@controlBar时，它会保持专注。显然这种行为导致了错误。以下行解决了这个问题，但是嘿......告诉我为什么这应该是默认行为？

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

Video.js PlayToggle事件冲突

1 个答案: