[Video.js] Скрытие и отображение элементов управления видеоплеером

внешний интерфейс JavaScript Ресурсы изображений CSS

Оригинальная ссылка:Hiding and Showing Video Player Controls

На прошлой неделе я решил решить некоторые нерешенные проблемы, связанные с панелью управления, а затем попал в поток связанных обновлений плеера. Мне посчастливилось иметь некоторое время, и я буду писать об этом некоторые обновления.

Одно из ожидаемых действий панели управления проигрывателем заключается в том, что она исчезает через несколько секунд, когда пользователь неактивен во время просмотра видео. Раньше мы добивались этого с помощью video.js с помощью некоторых приемов CSS. Когда мышь пользователя выходит за пределы области видеоплеера, панели управления будет присвоено имяvjs-fade-outсорт. Этот класс имеет анимацию перехода после задержки в 2 секунды.

.vjs-fade-out {
  display: block;
  visibility: hidden;
  opacity: 0;

  -webkit-transition: visibility 1.5s, opacity 1.5s;
     -moz-transition: visibility 1.5s, opacity 1.5s;
      -ms-transition: visibility 1.5s, opacity 1.5s;
       -o-transition: visibility 1.5s, opacity 1.5s;
          transition: visibility 1.5s, opacity 1.5s;

  /* 等一会儿，然后淡出控制栏 */
  -webkit-transition-delay: 2s;
     -moz-transition-delay: 2s;
      -ms-transition-delay: 2s;
       -o-transition-delay: 2s;
          transition-delay: 2s;
}

Когда мышь пользователя вернется к игроку, класс будет удален, а все анимации отложенного затухания будут отменены. Это простой пример того, как вы ожидаете, что управление исчезнет, ​​​​всего несколько строк javascript для добавления/удаления классов.

player.on('mouseout', function(){ 
  controlBar.addClass('vjs-fade-out'); 
});

player.on('mouseover', function(){ 
  controlBar.removeClass('vjs-fade-out'); 
});

Хотя и есть некоторые недостатки, избавиться от этого метода все же необходимо.

  • Панель управления не исчезает в полноэкранном режиме, потому что возможно, что мышь никогда не перемещается из области игрока.
  • На мобильных устройствах нет мыши, поэтому для отображения/скрытия элементов управления требуются различные события и взаимодействия.

Помимо этих проблем, мы хотели бы, чтобы любой компонент или плагин проигрывателя мог подключаться к тому же триггеру, который скрывает элементы управления. Такие компоненты, как значки социальных сетей, должны исчезать вместе с панелью управления.

Статус пользователь

Одна из первых вещей, которую нужно добавить, этоuserActiveатрибут, который может бытьtrueилиfalse. Это абстрагирует элементы управления от того, что нас действительно волнует, независимо от того, взаимодействует ли пользователь в данный момент с проигрывателем или пассивно смотрит видео. Это также приводит к тому, что панель управления больше не отслеживает активность пользователя и позволяет другим компонентам легче согласовываться с панелью управления через состояние на уровне игрока.

Вызов этого свойстваplayer.userActive(), и вернетсяtrueилиfalse. Когда это значение изменяется, оно запускает событие для игрока.

player.userActive(true)
    // -> 'useractive'事件被触发
player.userActive(false)
    // -> 'userinactive'事件被触发

Элемент player также добавляетvjs-user-activeилиvjs-user-inactiveИмя класса CSS. Имя класса фактически используется для скрытия и отображения содержимого панели управления.

.vjs-default-skin.vjs-user-inactive .vjs-control-bar {
  display: block;
  visibility: hidden;
  opacity: 0;

  -webkit-transition: visibility 1.5s, opacity 1.5s;
     -moz-transition: visibility 1.5s, opacity 1.5s;
      -ms-transition: visibility 1.5s, opacity 1.5s;
       -o-transition: visibility 1.5s, opacity 1.5s;
          transition: visibility 1.5s, opacity 1.5s;
}

2-секундная задержка была удалена из CSS и вместо этого будет встроена в тайм-аут через JavaScript.userActiveСтатус установлен наfalseв процессе. Этот тайм-аут сбрасывается всякий раз, когда на игроке происходит событие мыши. Например:

var resetDelay, inactivityTimeout;

resetDelay = function(){
    clearTimeout(inactivityTimeout);
    inactivityTimeout = setTimeout(function(){
        player.userActive(false);
    }, 2000);
};

player.on('mousemove', function(){
    resetDelay();
})

mousemoveСобытия вызываются очень быстро при движении мыши, и мы хотим как можно меньше блокировать процесс игрока во время этой операции, поэтому используемДжон Резигтехнологии.

вместо сброса каждогоmousemoveтайм-аут, но черезmousemoveсобытие, чтобы установить переменную, которая может быть получена с помощью контролируемого интервала JavaScript.

var userActivity, activityCheck;

player.on('mousemove', function(){
    userActivity = true;
});

activityCheck = setInterval(function() {

  // 检查鼠标是否被移动
  if (userActivity) {

    // 重置活动跟踪器
    userActivity = false;

    // 如果用户状态处于非活动状态，请将状态设置为活动状态
    if (player.userActive() === false) {
      player.userActive(true);
    }

    // 清除任何现有的不活动超时以启动计时器
    clearTimeout(inactivityTimeout);

    // 在X秒内，如果没有更多的活动发生，用户将被视为不活动
    inactivityTimeout = setTimeout(function() {
      // 防止在activityCheck循环拾取下一个用户活动之前可以触发非活动超时的情况。
      if (!userActivity) {
        this.userActive(false);
      }
    }, 2000);
  }
}, 250);

Вероятно, за этим нужно следить, и это немного проще, чем то, что на самом деле есть в проигрывателе прямо сейчас, но, по сути, это позволяет нам получить некоторый вес обработки от браузера при движении мыши.

Скрыть панель управления в полноэкранном режиме

из-за новогоuserActiveтайм-аут javascript для состояний и задержек, элементы управления больше не требуют, чтобы мышь перемещалась за пределы области игрока, чтобы скрыться, и теперь их можно скрыть в полноэкранном режиме, как когда игрок входит в игру. Это также означает, что теперь мы можем скрыть курсор мыши так же, как элементы управления, чтобы мышь не отображалась на плеере при просмотре в полноэкранном режиме.

.vjs-fullscreen.vjs-user-inactive {
  cursor: none;
}

Скрыть панель управления на сенсорных устройствах

Ожидаемое поведение на сенсорных устройствах отличается от поведения в настольных браузерах. нетmousemoveСобытия помогают определить, активен пользователь или неактивен, поэтому обычно добавляют длительную задержку перед исчезновением элемента управления. Кроме того, при нажатии на само видео в настольных браузерах обычно происходит переключение между воспроизведением и паузой, а при нажатии на видео на мобильных устройствах переключается только видимость элементов управления.

К счастью, мы окружаемuserActiveУстановленная структура упрощает настройку этой последней части.

video.on('tap', function(){
  if (player.userActive() === true) {
    player.userActive(false);
  } else {
    player.userActive(true);
  }
});

существуетtrueа такжеfalseпереключаться вручную междуuserActiveБудет применено соответствующее имя класса, и будут запущены события, необходимые для отображения и скрытия элемента управления, как и ожидается на мобильных устройствах.

tapНа самом деле это настраиваемое событие, похожее на то, что вы найдете в jQuery mobile, Hammer.js и других мобильных сенсорных библиотеках.tapмероприятие. в любое времяtouchstartинициируемые событиями и связанные с нимиtouchendКогда событие запускается в течение 250 миллисекунд, он будет вызватьtapмероприятие. еслиtouchendДля запуска события требуется больше времени или что-то среднееtouchmoveсобытие, это не считается касанием.

В заключение

Я надеюсь, что эта статья дает представление о том, как эти элементы управления работают в Video.js, и о том, как создать собственный плагин для Video.js, который имитирует те же взаимодействия.

ваше здоровье,

-heff

Категории