Последние несколько лет я сосредоточился на видеоплеере. С ростом видеоконтента и пропускной способности многие веб-сайты используют видео, чтобы предоставить пользователям больше информации. Так что я надеюсь, что этот плагин vue.js поможет вам решить эту проблему.

Vue-core-video-player - это легкий видеоплеер для Vue.js. Начать легко. Вы напишете меньше кода, чтобы создать более мощный видеопроигрыватель. И он удобен для рендеринга на стороне сервера, поэтому паукам или другим ботам будет легко показать ваш источник видео.

Начать

npm install vue-core-video-player --save

Также можно использовать пряжу ：

yarn add vue-core-video-player --save

Затем отредактируйте свой main.js, чтобы импортировать модуль.

import VueCoreVideoPlayer from 'vue-core-video-player'
//...
Vue.use(VueCoreVideoPlayer)

В-третьих, используя компонент в контейнере вашего плеера.

<div id="app">
  <div class="player-container">
    <vue-core-video-player src="./your_video_source.mp4"></vue-core-video-player>
  </div>
</div>

Финальный предварительный просмотр рендеринга ниже:

Посмотреть демо онлайн

Базовая конфигурация

Источник видео

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

  • Нить; Это может быть относительный путь к вашему видеофайлу или URL-адрес CDN.
<vue-core-video-player src="https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4"></vue-core-video-player>
  • Множество; Это означает, что вы устанавливаете разное разрешение для одного и того же источника видео; Наше разрешение по умолчанию - 720p; И вы должны установить два ключа (resolution, src) вашего элемента массива.
const videoSource = [
{
src: 'https://media.vued.vanthink.cn/sparkle_your_name_am360p.mp4',
resolution: '360p',
}, {
src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4',
resolution: '720p',
}, {
src: 'https://media.vued.vanthink.cn/y2mate.com%20-%20sparkle_your_name_amv_K_7To_y9IAM_1080p.mp4',
resolution: '1080p'
}]

Если вы хотите воспроизводить файлы разных типов в другом браузере. Вы можете добавить свойство type в массив;

const videoSource = [
{
  src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.webm',
  type: 'video/webm',
}, {
  src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4',
  type: 'video/mp4',
}]

Caniuse-video-format показывает, какой браузер поддерживает указанный видеофайл.

Управление

controls установлен для нижней панели плеера.

  • Нить; «Фиксированный» означает, что нижняя панель инструментов все еще видна пользователям. «Авто» означает, что нижняя панель управления будет скрыта, если между пользователем и игроком нет взаимодействия.
  • Boolean; false указывает, что игрок скроет нижнюю панель управления. true указывает, что проигрыватель будет показывать нижнюю панель управления и работать так же, как значение 'auto', указанное выше;

Автовоспроизведение

Если выставить autoplay, плеер будет пытаться воспроизвести видео. В разных браузерах разные политики для обработки автовоспроизведения. Если проигрыватель потерпел неудачу, он покажет кнопку воспроизведения, которую пользователь должен коснуться.

Управление воспроизведением видео

И сохраняет те же атрибуты HTML Video.

  • volume: громкость видео (0–1)
  • cover: покажет обложку видео; Если вы установите автоматическое воспроизведение проигрывателя успешно, свойство cover работать не будет.
  • logo: будет отображаться ваш логотип плеера

И вы можете прочитать Официальный документ, чтобы узнать об этом больше.

Будущее

На самом деле, веб-медиаплеер сталкивается со многими ситуациями:

  • другой формат видео
  • прямая трансляция
  • 360 видео
  • Hevc / av1
  • мобильная совместимость в разных браузерах

Поэтому я пытаюсь предоставить разработчикам ядро воспроизведения для расширения базового класса. Тогда элементы пользовательского интерфейса могут подписаться на данные из событий.

Надеюсь, каждый, кто заинтересован в проекте, сможет открыть пиар или обсудить вопросы 💐.

Github: https://github.com/core-player/vue-core-video-player

Документы: https://core-player.github.io/vue-core-video-player/