QVideo видео плеер

QVideo — это высокоуровневый компонент библиотеки Quasar для отображения видео с поддержкой HTML5 и популярных источников, таких как YouTube и Vimeo. Он обеспечивает простой способ интеграции медиаконтента в приложения на Vue.js с минимальными настройками и максимальной гибкостью.

Основные свойства QVideo

  • src (String | Array) — путь к видеофайлу или массив источников. Поддерживаются локальные файлы и URL. При передаче массива компонент выбирает первый доступный источник.

  • type (String) — тип видео: 'video/mp4', 'video/webm', 'video/ogg' и др. Определяет, как браузер будет обрабатывать поток.

  • poster (String) — изображение-заставка, отображаемое до начала воспроизведения видео.

  • autoplay (Boolean) — автоматически запускает воспроизведение при загрузке компонента.

  • controls (Boolean) — отображает стандартные элементы управления видео: play/pause, ползунок, громкость.

  • loop (Boolean) — повторное воспроизведение видео после окончания.

  • muted (Boolean) — воспроизведение видео без звука по умолчанию.

  • preload (String) — определяет стратегию предварительной загрузки видео: 'auto', 'metadata', 'none'.

  • disable-remote-playback (Boolean) — запрещает потоковое воспроизведение через сторонние устройства (например, Chromecast).

События QVideo

QVideo генерирует события, которые позволяют отслеживать состояние плеера и управлять логикой приложения:

  • @play — срабатывает при начале воспроизведения.
  • @pause — срабатывает при паузе.
  • @ended — срабатывает при завершении видео.
  • @timeupdate — срабатывает при изменении текущего времени воспроизведения.
  • @volume-change — срабатывает при изменении громкости.
  • @error — срабатывает при возникновении ошибок загрузки или воспроизведения.

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

<q-video
  src="https://example.com/video.mp4"
  controls
  @play="onPlay"
  @pause="onPause"
/>

<script>
export default {
  methods: {
    onPlay() {
      console.log('Видео запущено');
    },
    onPause() {
      console.log('Видео на паузе');
    }
  }
}
</script>

Работа с внешними источниками

YouTube и Vimeo поддерживаются через QVideo без необходимости подключения сторонних библиотек. Для этого достаточно указать URL видео:

<q-video
  src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  controls
  autoplay
/>
  • При использовании внешних источников некоторые свойства, такие как preload или loop, могут иметь ограниченную функциональность из-за API плееров YouTube/Vimeo.

Настройка внешнего вида

  • ratio (String | Number) — задает соотношение сторон видео. Примеры: '16:9', '4:3', или числовое значение 1.77.
  • class и style — позволяют применять CSS-классы и инлайновые стили, интегрируя QVideo в дизайн приложения.
  • height / width — прямое указание размеров видео, может использоваться совместно с ratio для адаптивного отображения.

Пример адаптивного видео с соотношением сторон 16:9:

<q-video
  src="https://example.com/video.mp4"
  controls
  ratio="16:9"
/>

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

QVideo предоставляет доступ к методам управления через ссылку на компонент:

<q-video ref="myVideo" src="video.mp4" />

<script>
export default {
  mounted() {
    this.$refs.myVideo.play(); // запустить видео
    this.$refs.myVideo.pause(); // поставить на паузу
  }
}
</script>

Методы:

  • play() — запуск воспроизведения.
  • pause() — пауза.
  • mute() / unmute() — включение и отключение звука.
  • seek(position: Number) — перемотка к заданной позиции в секундах.

Оптимизация загрузки

  • Использование preload="metadata" позволяет загружать только метаданные видео, что ускоряет рендеринг страницы.
  • lazy-loading видео через v-if или динамическую подгрузку компонентов уменьшает потребление ресурсов при множестве видеоплееров на одной странице.
  • Кеширование локальных видео через service worker улучшает производительность приложений PWA.

Примеры комбинаций

  • Автовоспроизведение с циклом и без звука:
<q-video
  src="video.mp4"
  autoplay
  loop
  muted
/>
  • Видео с заставкой и пользовательским классом для стилей:
<q-video
  src="video.mp4"
  poster="poster.jpg"
  controls
  class="custom-video"
/>
  • Несколько источников с fallback:
<q-video
  :src="['video.webm', 'video.mp4', 'video.ogg']"
  controls
/>

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

Оглавление