Skip to Content
Оптимизация, отложенная загрузка и автозапуск

Оптимизация, отложенная загрузка и автозапуск

Для экономии ресурсов и более быстрой загрузки страницы можно отложить загрузку плеера или видео. Ниже описаны доступные способы.

Отключение предзагрузки видео

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

Простое встраивание:

<iframe
  src="https://kinescope.io/embed/VIDEO_ID?preload=0"
  ...
></iframe>

IFrame API:

playerFactory.create('player', {
  url: 'https://kinescope.io/VIDEO_ID',
  behavior: { preload: false },
});

Отложенная загрузка самого плеера

Если плеер находится вне зоны видимости (например, внизу страницы), можно отложить загрузку <iframe> до тех пор, пока пользователь не прокрутит до него. Браузер не будет загружать iframe, пока он не окажется вблизи видимой области.

<iframe
  loading="lazy"
  src="https://kinescope.io/embed/VIDEO_ID"
  ...
></iframe>

Отключение постера плеера

Если вы используете собственный постер (например, <img> поверх плеера), отключите встроенный постер, чтобы не загружать его дважды:

<iframe
  src="https://kinescope.io/embed/VIDEO_ID?no_poster=1&preload=0"
  ...
></iframe>

Автозапуск при видимости на странице

Плеер начнёт воспроизведение автоматически, когда окажется в видимой области. Удобно, если плеер расположен ниже первого экрана.

playerFactory.create('player', {
  url: 'https://kinescope.io/VIDEO_ID',
  behavior: { autoPlay: 'viewable' },
});

Автозапуск и воспроизведение пока курсор над плеером

Видео проигрывается только пока курсор находится над плеером — при уходе курсора ставится на паузу. До первого клика по плееру.

playerFactory.create('player', {
  url: 'https://kinescope.io/VIDEO_ID',
  behavior: { autoPlay: 'hover' },
});

Ограничение максимального качества при ABR

По умолчанию плеер автоматически выбирает лучшее доступное качество видео (ABR). Можно ограничить максимальное качество, чтобы снизить потребление трафика:

playerFactory.create('player', {
  url: 'https://kinescope.io/VIDEO_ID',
  behavior: { maxAbrQuality: 720 },
});
Управление плееромПлейлисты