我需要一些帮助才能使 Videojs 视频播放器按钮可以使用 javascript 空间导航插件进行导航

Question

我正在创建一个可以通过键盘导航的网站。 我在这里使用了很棒的空间导航： https://github.com/luke-chang/js-spatial-navigation

使用此导航插件，我的键盘导航一切正常，但经过数小时和数天后，我仍然无法导航这些视频 js 按钮，我不明白为什么。

我在这里用 Codepen 做了一个小例子，但它仍然不起作用。 https://codepen.io/onigetoc/pen/MWBowmg

我使用 videojseek 添加前进和后退按钮。 我还将使用 videojs 热键插件，但现在，我尝试让我的播放器可以使用箭头键盘进行导航。

我绝对想使用空间导航插件。 （它根本不是 Videojs 插件）。

var SN = SpatialNavigation;
SN.init();

// SN.set({
//   straightOnly: true
// });

SN.add("playerview", {
  selector: "#content_video"
  //        defaultElement: '#vplayer',
  //        defaultElement: '#mediaOptionsContainer .item:first-child',
  //        defaultElement: '#media-options-container .item:first-child',
  //        enterTo: '#media-options-container .item:first-child',
  //        straightOnly: false,
  //          rememberSource: true,
  //enterTo: 'last-focused'
});

SN.add("playcontrols", {
  //    selector: '.vjs-control-bar .vjs-control',
  //  selector: '.vjs-control-bar button',
  //  selector: ".video-js button",
  selector: ".vjs-control-bar .vjs-button",
  defaultElement: ".vjs-play-control"
  //        defaultElement: '.vjs-play-control',
  //        enterTo: 'button',
  //        straightOnly: true,
  //        leaveFor: {
  //            right: '',
  //            up: '',
  //            down: '@playerview',
  //            left: ''
  //        }
});

SN.makeFocusable();

var player = videojs("content_video", {
        plugins: {
//          hotkeys: {
//              volumeStep: 0.1,
//              seekStep: 30,
//              enableModifiersForNumbers: false
//          },
            seekButtons: {
       backIndex: 0,
       forward: 30,
       back: 10
     },
        },
});


player.on("ready", function () {
  player.vhs = null;

  setTimeout(() => {
    
    /*** ADD TABINDEX TO BUTTONS IF NEEDED ***/
    // $('.vjs-control .vjs-button').attr('tabindex', '-1');
    //  $("#player-view").find(".vjs-button").attr("tabindex", "-1");
    // $("#content_video").find(".vjs-button").attr("tabindex", "-1");

    SN.makeFocusable();
    // SN.focus('playerview'); // FOR OTHER PURPOSE I NEED THIS
    SN.focus("playcontrols"); // FOCUS ON THE PLAY BUTTON AT READY
  }, 700);
});

Answer 1

试试这个

npmjs.com/package/videojs-spatial-navigation