Skip to Content

Управление плеером

Для управления плеером используется объект со следующими свойствами и методами:

Свойства

Методы

  • on(type: PlayerApi.Events, listener: Function): this

    Подписаться на событие плеера. См. события плеера.

  • once(type: PlayerApi.Events, listener: Function): this

    Подписаться на событие плеера. Обработчик события будет вызван только один раз.

  • off(type: PlayerApi.Events, listener: Function): this

    Отписаться от события плеера.

  • isPaused(): Promise<boolean>

    Проигрывание приостановлено?

  • isEnded(): Promise<boolean>

    Проигрывание дошло до конца?

  • play(): Promise<void>

    Начать проигрывание.

  • pause(): Promise<void>

    Приостановить проигрывание.

  • getCurrentTime(): Promise<number>

    Текущее время воспроизведения (в секундах).

  • getDuration(): Promise<number>

    Продолжительность ролика (в секундах).

  • setPlaylistItemOptions(options: PlaylistItemOptions): Promise<void>

    Установить параметры для текущего ролика.

    interface PlaylistItemOptions {
  /** @experimental Закладки, привязанные ко времени. */
  bookmarks?: {
    id: string;
    /** Время в секундах. */
    time: number;
    /** Динамические стили с поддержкой селекторов. */
    sx?: CSSProperties;
  }[];
}

    Например:

    player.setPlaylistItemOptions({
  bookmarks: [
    {
      id: '1',
      time: 10,
      sx: { backgroundColor: 'yellow', '&::before': { content: '"12"', fontSize: '0.85em' } },
    },
  ],
});

  • setUIDisabled(disabled: boolean): Promise<void>

    Disable/enable the player UI and shortcuts. @experimental

  • setOptions(options: UpdatablePlayerOptions): Promise<void>

    Установить параметры для плеера. @experimental

    interface UpdatablePlayerOptions {
  /** @experimental Настройки темы. */
  theme?: {
    bookmarks?: {
      button?: {
        /** Для кнопки в целом. */
        root?: React.CSSProperties;
        /** Для кнопки с css селектором :hover. */
        hover?: React.CSSProperties;
        /** Для кнопки с css селектором :active. */
        active?: React.CSSProperties;
      };
      /** Установить `undefined` для удаления значка. */
      icon?: undefined;
    };
  };
}

    Например:

    player.setOptions({
  theme: {
    bookmarks: {
      button: {
        root: { backgroundColor: 'yellow' },
      },
      icon: undefined,
    },
  },
});

События плеера

В каждый обработчик события передается объект события с данными о нем.

Объект события

{
  /** Тип события */
  type: PlayerApi.Events;
  /** Данные события, зависят от типа события, могут отсутствовать */
  data: Data;
  /** Объект управления плеером, соответствующий событию */
  target: PlayerApi;
}

Перечисление событий

  • PlayerApi.Events.Ready - Плеер загрузил все необходимые данные и готов к воспроизведению. При выключенной предзагрузке (preload=‘none’) это событие сработает при начале воспроизведения.

    {
  currentTime: number;
  duration: number;
}

  • PlayerApi.Events.CurrentTrackChanged - Смена текущего трека. @experimental

    {
  item: { id?: string }
}

  • PlayerApi.Events.SizeChanged - Размер плеера изменился. @experimental

    {
  width: number;
  height: number;
}

  • PlayerApi.Events.Play - Запуск воспроизведения.

    У события нет данных.

  • PlayerApi.Events.Pause - Пауза.

    У события нет данных.

  • PlayerApi.Events.Ended - Окончание воспроизведения.

    У события нет данных.

  • PlayerApi.Events.TimeUpdate - Изменение текущего времени воспроизведения.

    {
  currentTime: number;
}

  • PlayerApi.Events.FullscreenChange - Изменение полноэкранного режима.

    {
  isFullscreen: boolean;
}

  • PlayerApi.Events.CallBookmark - Нажатие на закладку. @experimental

    {
  id: string;
  time: number;
}

  • PlayerApi.Events.AdBreakStateChange - Изменилось активность рекламной паузы. @experimental

    {
  active: boolean;
}
Встраивание плеера