Video и audio плееры

SvelteKit предоставляет гибкую архитектуру для интеграции медиа-контента. Использование видео и аудио плееров в приложениях на SvelteKit можно реализовать через готовые UI библиотеки или собственные компоненты с расширяемыми возможностями управления воспроизведением, кастомизации интерфейса и реактивного контроля состояния плеера.

Подключение плеера через UI библиотеку

Наиболее популярные Svelte UI библиотеки для работы с медиа включают Svelte Media Player, SvelteKit Video Player и компоненты на основе HTML5 media API с реактивным биндингом. Подключение происходит через npm:

npm install svelte-media-player

После установки можно импортировать компонент в SvelteKit:

<script>
  import MediaPlayer from 'svelte-media-player';
  let videoSrc = '/videos/sample.mp4';
  let audioSrc = '/audio/sample.mp3';
</script>

Компонент поддерживает свойства для управления воспроизведением:

  • src — путь к медиафайлу.
  • autoplay — автоматическое воспроизведение при загрузке.
  • controls — отображение стандартных элементов управления.
  • loop — повтор воспроизведения после окончания.
  • muted — начальная установка звука в отключенном состоянии.
<MediaPlayer src={videoSrc} controls autoplay loop />
<MediaPlayer src={audioSrc} controls />

Реактивное управление состоянием плеера

SvelteKit обеспечивает реактивность через привязку переменных к свойствам компонентов. В плеерах это позволяет отслеживать:

  • текущую позицию воспроизведения,
  • состояние паузы/игры,
  • громкость и mute,
  • прогресс загрузки и буферизации.

Пример реактивного управления:

<script>
  import MediaPlayer from 'svelte-media-player';
  let currentTime = 0;
  let isPlaying = false;
  let volume = 0.5;

  function handleTimeUpdate(event) {
    currentTime = event.detail.currentTime;
  }

  function togglePlay(player) {
    isPlaying ? player.pause() : player.play();
    isPlaying = !isPlaying;
  }
</script>

<MediaPlayer 
  src={videoSrc} 
  bind:currentTime 
  bind:volume 
  on:timeupdate={handleTimeUpdate} 
/>
<button on:click={() => togglePlay($refs.player)}>Play/Pause</button>

bind: позволяет синхронизировать внутреннее состояние плеера с переменными Svelte, что упрощает построение сложного интерфейса.

Кастомизация интерфейса плеера

UI библиотеки обычно предоставляют возможность стилизации элементов управления через CSS-переменные или слот-компоненты. Это позволяет создать уникальный дизайн плеера, подходящий под фирменный стиль приложения.

Пример кастомизации кнопки воспроизведения:

<MediaPlayer src={videoSrc}>
  <button slot="play-button" class="custom-play">▶</button>
</MediaPlayer>

<style>
  .custom-play {
    background-color: #ff6600;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    color: white;
    border: none;
    cursor: pointer;
  }
</style>

Слоты позволяют менять отдельные элементы плеера — кнопки, прогресс-бар, громкость — без необходимости переписывать логику воспроизведения.

Поддержка потокового видео и аудио

Для потокового контента можно использовать компоненты с поддержкой HLS/DASH. Библиотеки, как svelte-hls-player, интегрируются через:

npm install svelte-hls-player

Пример использования:

<script>
  import HlsPlayer from 'svelte-hls-player';
  let streamUrl = 'https://example.com/stream.m3u8';
</script>

<HlsPlayer src={streamUrl} controls autoplay />

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

Доступность и управление через клавиатуру

Качественные SvelteKit UI библиотеки поддерживают ARIA-атрибуты и управление через клавиши:

  • Space — пауза/игра
  • ArrowLeft/ArrowRight — перемотка
  • ArrowUp/ArrowDown — регулировка громкости

Можно расширить доступность, добавив собственные обработчики:

<script>
  function handleKey(event, player) {
    switch(event.key) {
      case ' ':
        player.paused ? player.play() : player.pause();
        break;
      case 'ArrowRight':
        player.currentTime += 5;
        break;
      case 'ArrowLeft':
        player.currentTime -= 5;
        break;
      case 'ArrowUp':
        player.volume = Math.min(player.volume + 0.1, 1);
        break;
      case 'ArrowDown':
        player.volume = Math.max(player.volume - 0.1, 0);
        break;
    }
  }
</script>

<div tabindex="0" on:keydown={(e) => handleKey(e, $refs.player)}>
  <MediaPlayer bind:this={$refs.player} src={videoSrc} controls />
</div>

Интеграция с SvelteKit store и глобальным состоянием

Для приложений с несколькими плеерами можно синхронизировать состояние через Svelte store:

import { writable } from 'svelte/store';

export const globalVolume = writable(0.5);
export const globalMute = writable(false);

Привязка store к компонентам:

<MediaPlayer src={videoSrc} bind:volume={$globalVolume} bind:muted={$globalMute} />
<MediaPlayer src={audioSrc} bind:volume={$globalVolume} bind:muted={$globalMute} />

Это обеспечивает единый контроль громкости и mute для всех медиа-элементов приложения.

Продвинутые возможности

  • Кастомные плагины для субтитров и аудиодорожек — многие UI библиотеки поддерживают подключение внешних файлов .vtt или .srt.
  • События воспроизведения — on:ended, on:pause, on:play, on:seeked позволяют строить сложную логику взаимодействия.
  • Ленивая загрузка видео — динамический импорт компонентов плеера для уменьшения времени первой загрузки страницы.
<script>
  let showPlayer = false;
  import('svelte-media-player').then(module => {
    MediaPlayer = module.default;
    showPlayer = true;
  });
</script>

{#if showPlayer}
  <MediaPlayer src={videoSrc} controls />
{/if}

Использование ленивой загрузки сокращает нагрузку на клиент и повышает производительность страниц с несколькими плеерами.

Эти техники позволяют строить современные, отзывчивые и управляемые видео и аудио плееры в приложениях на SvelteKit, полностью используя реактивность фреймворка и возможности UI библиотек.

Оглавление