Как создать 360 Video Player с помощью JavaScript с помощью Clappr

360 видео доставляются как обычный видео файл или поток. Обычно они работают не так, как ожидалось, даже в более новых браузерах, поскольку они будут отображаться как обычное видео, а пользователь увидит всю панораму в окне. Однако лучше предоставить пользователю обычный интерфейс, который позволит ему перетаскивать видео и просматривать все видео, как это делают многие видеоплееры сегодня (FB, YouTube и т. Д.). Затем интерактивный видеопроигрыватель переназначает его, чтобы показать только все поле зрения, на которое смотрит пользователь.

В этой статье мы покажем вам, как реализовать видеоплеер 360 с помощью Clappr.

1. Включите Clappr и 360 видео плагин

Единственная библиотека, которую вам нужно будет включить, чтобы создать свой собственный видеоплеер 360, — это Clappr. Clappr — это просто расширяемый медиаплеер для Интернета. Clappr находится в стадии разработки, но готов к работе, поэтому вы можете открывать проблемы и отправлять запросы на извлечение.

Проект находится на НПМ так что вы можете установить его как зависимость от вашего проекта, используя следующую команду:

npm install clappr

Вам нужно будет установить плагин 360 видео для Clappr, который позволяет легко воспроизводить 360 видео на видеоплеере:

npm install clappr-video360

Наконец, вам нужно будет включить основной файл плеера, а именно clappr.js и из плагина 360 видеоплеер clappr-video360.min.js, В качестве альтернативы, если вы не используете менеджер пакетов скачать мини-версию clappr из репозитория здесь и копия плагина 360 здесь. Или, если вы только хотите протестировать библиотеку в своем проекте, используйте CDN:

Для получения дополнительной информации и документации игрока Clappr, пожалуйста, посетите официальный репозиторий на Github здесь. Для получения дополнительной информации о плагине 360 Video, посетите хранилище в Github здесь. В том числе оба файла добавят о 185Кб Размер загрузки на вашу веб-страницу.

2. Настройка 360 Video Player

Реализация видеопроигрывателя с Clappr очень проста: вам нужно как минимум указать URL-адрес видео, которое вы хотите воспроизвести, в параметре источника и идентификатор элемента DIV в документе, где вы хотите создать видеоплеер. , Это позволит реализовать базовый проигрыватель, но если вы хотите разрешить воспроизведение 360-градусного видео, вам нужно будет вставить плагин Vide360 в контейнер.

В следующих примерах показано, как реализовать базовый видеоплеер 360 в браузере с VanillaJS и требовать наличия модулей, если вы используете пакет модулей (webpack, browserify и т. Д.):

A. С VanillaJS (прямо в браузере)

// The URL to the 360 video player
var Video360Url = 'video360.mp4';
// Configure your Clappr player.
var PlayerInstance = new Clappr.Player({
source: Video360Url,
plugins: {
container: [Video360],
},
parentId: '#player',
});
// Important to disable the click to pause native plugin of clappr
// otherwise you won't be able to use correctly the player
PlayerInstance.getPlugin('click_to_pause').disable();

Плагин создает глобальную переменную в окне, а именно Video360, которая должна быть введена как плагин в Clappr.

Б. Использование модульных упаковщиков

Если вы работаете с модулем связывания, вам потребуется каждый модуль, как показано в следующем примере:

// require modules
var Clappr = require("clappr");
var Video360 = require("clappr-video360");
// The URL to the 360 video player
var Video360Url = 'video360.mp4';
// Configure your Clappr player.
var PlayerInstance = new Clappr.Player({
source: Video360Url,
plugins: {
container: [Video360],
},
parentId: '#player',
});
// Important to disable the click to pause native plugin of clappr
// otherwise you won't be able to use correctly the player
PlayerInstance.getPlugin('click_to_pause').disable();

Заметка

У вас нет 360 видео для тестирования? Загрузите любое из следующих 360 бесплатных видео, которые вы можете скачать с Vimeo здесь.

Последний пример

В следующем документе создается базовый видеоплеер 360 с использованием файлов CDN, поэтому вы можете просто скопировать код и запустить его с локального сервера. Вам нужно будет только заменить URL-адрес видео 360 и все:

Clappr Video360

// The URL to the 360 video player
var Video360Url = 'video360.mp4';
// Configure your Clappr player.
var PlayerInstance = new Clappr.Player({
source: Video360Url,
plugins: {
container: [Video360],
},
parentId: '#player',
});
// Important to disable the click to pause native plugin of clappr
// otherwise you won't be able to use correctly the player
PlayerInstance.getPlugin('click_to_pause').disable();