Видео плеер для Vue

Компонент VideoPlayer представляет собой простой и настраиваемый видео-плеер, который легко интегрируется в любые проекты на Vue. Компонент поддерживает базовые функции воспроизведения, паузы, перемотки и отображения прогресса видео. Все необходимые параметры передаются через props.

Использование

Установка

1. Скопируйте файл VideoPlayer.vue в свой проект.

2. Импортируйте компонент в нужный Vue-компонент:

import VideoPlayer from '@/components/VideoPlayer.vue';

3. Используйте компонент в шаблоне:

<template>
  <div>
    <VideoPlayer 
      :videoSources="[
        { src: 'https://example.com/video.mp4', type: 'video/mp4' },
        { src: 'https://example.com/video.webm', type: 'video/webm' },
        { src: 'https://example.com/video.ogv', type: 'video/ogg' }
      ]" 
      title="Видео с несколькими форматами" 
      loader="Загрузка видео..."
    />
  </div>
</template>

<script>
import VideoPlayer from '@/components/VideoPlayer.vue';

export default {
  components: {
    VideoPlayer,
  },
};
</script>

Props

Компонент принимает следующие входные параметры (props):

Название	Тип	Обязательный	Описание
videoSources	Array	Да	Массив объектов с полями src (URL видео) и type (MIME-тип видео).
videoSrc	String	Нет	Название видео, отображаемое в заголовке. По умолчанию: “Video Title”.
loader	String	Нет	Текст, отображаемый во время загрузки видео. По умолчанию: “Loading…”.

Методы

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

• setLength: Устанавливает общую длину видео после загрузки метаданных.
• timeUpdateFunction: Обновляет текущее время воспроизведения и позицию прогресс-бара.
• timeChangeBack: Перематывает видео назад на 10 секунд.
• timeChangeFw: Перематывает видео вперед на 10 секунд.
• formatTime: Форматирует время в минуты и секунды для удобного отображения.

Пример

<template>
  <div>
    <VideoPlayer 
      :videoSources="[
        { src: 'https://example.com/video.mp4', type: 'video/mp4' }
      ]"
    />
  </div>
</template>

Стили

Компонент использует изолированные (scoped) стили для форматирования элементов плеера, таких как:

• Контейнер видео-плеера
• Прогресс-бар
• Кнопки перемотки

Примечание

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

Скачать VideoPlayer.vue