Video.js PlayToggle конфликт событие

Question

Цель: привязать клавишу пробел, чтобы играть/пауза видео внедренный через video.js

Проблема: в то время как довольно просто, на первый взгляд, кажется, что событие щелчка на playtoggle кнопка @ controlbar помешает событию (может быть какая-то проблема состояния гонки). Тег <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'); 
      } 
     }); 

Это работает хорошо, если я использую только клавиатуру, чтобы начать (не требуется автозапуск), воспроизведения и паузы видео. Он даже работает нормально, если я сам кликнул на видео (начинает играть), ударяю по пробелу (он приостанавливается), снова нажимайте видео/ударить пробел (он продолжает воспроизводиться). Однако, как только нажата кнопка PlayToggle, чтобы воспроизвести видео, нажатие на пробел приостанавливает видео только на мгновение (даже на секунду) и возобновляет воспроизведение. Опять же, событие mousebar mouseup запускает событие «click» на кнопке playtoggle, ничего больше!

Любые идеи, что здесь происходит?

Answer 1

Удивительно, но при нажатии на элемент управления @controlBar он остается сфокусированным. По-видимому, это поведение вызывало ошибку. Следующая строка решила проблему, но эй ... скажите, почему это должно быть поведение по умолчанию?

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