Создание видеоплеера Angular с помощью Videogular

Согласно статистике онлайн-трафика, видео захватывает контроль над сетью. Старое доброе телевидение умирает, и компании быстро стремятся доминировать на рынке, на который к 2019 году будет приходиться 80% онлайн-трафика.

Многие медиа-провайдеры и продукты полагаются на поддержку видео HTML5:

• Youtube: платформа для обмена видео и социальными сетями в формате HTML5
• Netflix: поставщик видеоконтента HTML5
• JWPlayer: видеосервис HTML5 и провайдер потоковой передачи
• Brightcove: видеосервис HTML5 и провайдер потоковой передачи
• Kaltura: видеосервис HTML5 и провайдер потоковой передачи
• Video.js: видеопроигрыватель HTML5
• Flowplayer: видеопроигрыватель HTML5 и потоковый провайдер.

Сообществу разработчиков нужна надежная, расширяемая и продвинутая мультимедийная платформа (а не только видеопроигрыватель HTML5), чтобы справиться с новыми задачами, которые ждут впереди. В этой статье я хочу представить один такой фреймворк: Videogular .

Что такое Видеогулар?

Как следует из названия, Videogular — это медиа-фреймворк, написанный на Angular 2+. С Videogular вы можете воспроизводить видео, аудио или любой другой контент в формате HTML5. Есть реализация для Angular 1.X (он же AngularJS), но в этой статье речь пойдет только о текущей версии Angular 2+.

Итак, следующий вопрос, который, вероятно, приходит вам в голову: зачем использовать Angular для видео?

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

• Простота участия: поскольку Videogular основан на Angular, популярном фреймворке с очень активным сообществом, другим людям очень легко начать вносить свой вклад, создавая плагины или исправляя ошибки.
• Веб-компоненты: не нужно писать JavaScript для создания и оформления собственного проигрывателя. Вы можете писать код HTML и CSS.
• TypeScript: Angular — это типизированный фреймворк, как и все библиотеки вокруг него. Наличие строго типизированной экосистемы позволяет нам обнаруживать ошибки и проблемы с архитектурой, пока не стало слишком поздно.
• Скорость: все последние популярные фреймворки молниеносно работают, включая Angular.

Кроме того, у нас есть несколько других интересных функций, таких как RxJS, AOT (упреждающая компиляция), Angular CLI и другие.

Как работает Видеогулар?

Мне нравится говорить, что Videogular — это скорее медиа-фреймворк, чем просто видеоплеер HTML5. Наиболее важной особенностью и отличием других видеоплееров является то, что вы пишете теги для настройки вашего плеера вместо JavaScript.

Вот как сейчас работает большинство видеоплееров:

 <video class="library" controls preload="auto" data-config="some-js-object-here"> <source src="video-url.mp4" type='video/mp4'> </video> <script src="video-library.js"></script>

А вот как выглядит реализация Videogular:

 <vg-player> <vg-overlay-play></vg-overlay-play> <vg-buffering></vg-buffering> <vg-controls> <vg-play-pause></vg-play-pause> <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display> <vg-scrub-bar> <vg-scrub-bar-current-time></vg-scrub-bar-current-time> <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time> </vg-scrub-bar> <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display> <vg-track-selector></vg-track-selector> <vg-mute></vg-mute> <vg-volume></vg-volume> <vg-fullscreen></vg-fullscreen> </vg-controls> <video #myMedia [vgMedia]="myMedia" preload="auto" crossorigin> <source src="video-url.mp4" type='video/mp4'> <track kind="subtitles" label="English" src="assets/subs/pale-blue-dot.vtt" srclang="en" default> <track kind="subtitles" label="Espanol" src="assets/subs/pale-blue-dot-es.vtt" srclang="es"> </video> </vg-player>

Преимущество Videogular заключается в том, что, просто взглянув на HTML-код, вы знаете, как работает этот проигрыватель, какие элементы управления доступны и как изменить его, чтобы удалить, например, дорожки и селектор дорожек.

Но это не единственное преимущество, которым мы можем воспользоваться при создании видеоплеера Angular. Подумайте о больших командах разработчиков, в которых дизайнеры HTML/CSS и разработчики JavaScript работают вместе над одним кодом. Поскольку мы используем пользовательские элементы, дизайнеры могут начать работу, применяя стили и анимацию, без необходимости изучения новой библиотеки или даже JavaScript/TypeScript.

Кроме того, Videogular предоставляет гораздо более мощные возможности, чем просто написание простого видеоплеера на Angular, такие как автоматическая синхронизация между несколькими медиафайлами или возможность воспроизводить не только видео/аудио, но практически любой контент, у которого есть начало и конец.

Чтобы увидеть, как легко создать многофункциональное интерактивное приложение с помощью Videogular, мы собираемся создать список воспроизведения видео с синхронизированными метаданными.

Как установить Видеогулар

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

Весь код доступен в нашем репозитории Videogular Showroom GitHub и опубликован на странице GitHub.

Установка Videogular должна быть простой задачей для любого опытного разработчика Angular. С другой стороны, если вы только начинаете работать с Angular, вам следует ознакомиться с этим кратким руководством по созданию вашего первого приложения Angular.

Если вы еще не установили Node.js, перейдите на официальный сайт Node.js и установите его. Это единственный сервер, который нам нужно разрабатывать с помощью Angular, и он нужен нам для установки зависимостей через NPM. Вам просто нужно обязательно установить Node.js 6.9.0 или выше и NPM 3.0.0 или выше.

Первое, что нам нужно сделать, это установить Angular CLI. Angular CLI — это обязательный инструмент для любого разработчика Angular, поскольку он обеспечивает простоту создания шаблонов, тестирования, серверов разработки и производственных сборок. Что еще более важно, он следует соглашению, которое может понять любой другой разработчик Angular.

Установите Angular CLI глобально через NPM:

 npm install -g @angular/cli

И давайте создадим наш первый проект с поддержкой SASS:

 ng new smart-video-playlist --style=scss

Это должно создать образец проекта для вас. Если вы хотите начать разработку и одновременно наблюдать за результатами, вы можете запустить npm run start и открыть [http://localhost:4200](http://localhost:4200) . Angular CLI будет запускать сервер разработки Node.js с перезагрузкой в ​​реальном времени и всеми интересными функциями, которые мы, как разработчики, любим.

Теперь вы можете установить библиотеку videogular2 и типизацию core-js :

 npm install videogular2 --save npm install @types/core-js --save-dev

Создание видеоплеера Angular

Если вы хотите, вы можете использовать официальный шрифт Videogular для установки значков на кнопки и элементы управления. Для этого вам нужно добавить CSS в файл .angular-cli.json , доступный в корне вашего проекта.

 { ... "apps": [ { ... "styles": [ "../node_modules/videogular2/fonts/videogular.css", "styles.scss" ], ... } ], ... }

Если вы хотите установить свой собственный шрифт и стили, вы можете установить свой собственный CSS здесь или внутри styles.scss .

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

Откройте src/app/app.module.ts и удалите FormsModule и HttpModule; они нам не понадобятся для этой демонстрации. Вот как должен выглядеть ваш файл app.module.ts :

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { VgCoreModule } from 'videogular2/core'; import { VgControlsModule } from 'videogular2/controls'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, VgCoreModule, VgControlsModule ], providers: [], bootstrap: [ AppComponent ] }) export class AppModule { }

Когда все настроено, нам просто нужно написать наш HTML-код!

 <vg-player> <vg-controls> <vg-play-pause></vg-play-pause> <vg-playback-button></vg-playback-button> <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display> <vg-scrub-bar> <vg-scrub-bar-current-time></vg-scrub-bar-current-time> <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time> </vg-scrub-bar> <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display> <vg-mute></vg-mute> <vg-volume></vg-volume> <vg-fullscreen></vg-fullscreen> </vg-controls> <video #media [vgMedia]="media" preload="auto" crossorigin> <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4"> </video> </vg-player>

Теперь вы можете запустить сервер и наслаждаться своим первым видеоприложением на базе Angular и Videogular.

 npm run start

Создание списка воспроизведения мультимедиа в Angular

Чтобы перечислить наши видео, мы создадим простой массив со всеми параметрами. Просто имейте в виду, что вы можете загрузить этот список через службу REST с HttpModule Angular, но для простоты мы сделаем это жестко запрограммированным в этой демонстрации.

Откройте app.component.ts и добавьте этот массив видео и его интерфейс:

 import { Component } from '@angular/core'; export interface IMedia { title: string; src: string; type: string; } @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: [ './app.component.scss' ] }) export class AppComponent { playlist: Array<IMedia> = [ { title: 'Pale Blue Dot', src: 'http://static.videogular.com/assets/videos/videogular.mp4', type: 'video/mp4' }, { title: 'Big Buck Bunny', src: 'http://static.videogular.com/assets/videos/big_buck_bunny_720p_h264.mov', type: 'video/mp4' }, { title: 'Elephants Dream', src: 'http://static.videogular.com/assets/videos/elephants-dream.mp4', type: 'video/mp4' } ]; }

Теперь мы готовы добавить список воспроизведения под нашим плеером в файл HTML:

 <ul> <li *ngFor="let item of playlist; let $index = index" (click)="onClickPlaylistItem(item, $index)" [class.selected]="item === currentItem"> {{ item.title }} </li> </ul>

Давайте добавим несколько стилей для selected класса и эффекта hover :

 ul { list-style-type: none; margin: 0; padding: 0; font-family: sans-serif; li { padding: 10px; cursor: pointer; &.selected { background-color: #dddddd; } &:hover { background-color: #cce6ee; } } }

Метод onClickPlaylistItem настроит воспроизведение мультимедиа на нашем проигрывателе Videogular. Теперь перейдем к app.component.ts , чтобы добавить метод:

 // ... export class AppComponent { // ... currentIndex = 0; currentItem: IMedia = this.playlist[ this.currentIndex ]; onClickPlaylistItem(item: IMedia) { this.currentIndex = index; this.currentItem = item; } }

Свойство currentIndex будет использоваться позже для идентификации текущего элемента и его позиции в списке воспроизведения. Это важно для создания списков воспроизведения с бесконечным циклом и обновления currentIndex , когда пользователь щелкает элемент списка воспроизведения.

Наконец, нам нужно только изменить элемент video , чтобы установить источник из свойства currentItem , обрабатываемого списком воспроизведения. Для этого мы создадим простую привязку к свойству src HTML5:

 <video #media [vgMedia]="media" [src]="currentItem.src" preload="auto" crossorigin> </video>

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

Для этого нам понадобится Videogular API, глобальная служба, доступная на каждом экземпляре Videogular для обработки состояния и прослушивания событий.

Использование VgAPI для обработки состояний

Наш медиа-плейлист сейчас работает на 100%, но мы можем улучшить взаимодействие с пользователем, автоматически воспроизводя видео при выборе нового элемента или завершении видео.

Videogular предоставляет API для контроля и прослушивания изменений для каждого экземпляра VgMedia внутри компонента VgPlayer . На самом деле, все модули Videogular основаны на этом общедоступном API, поэтому вы можете создавать свои собственные модули для своих клиентов или вносить свой вклад в сообщество, выпуская их с открытым исходным кодом.

Чтобы использовать API Videogular, вам просто нужно прослушать событие onPlayerReady , запускаемое компонентом VgPlayer:

 <vg-player (onPlayerReady)="onPlayerReady($event)"> // ...

Когда проигрыватель инициализирован, вы можете сохранить API и начать слушать события, отправляемые тегом video :

 export class AppComponent { // ... onPlayerReady(api: VgAPI) { this.api = api; } }

API Videogular основан на RxJS, так что вы можете subscribe на Observables и реагировать соответственно. Чтобы автоматически воспроизвести видео, нам нужно прослушать событие loadedmetadata .

Давайте добавим новую Subscription для воспроизведения видео при загрузке метаданных:

 export class AppComponent { // ... onPlayerReady(api: VgAPI) { this.api = api; this.api.getDefaultMedia().subscriptions.loadedMetadata.subscribe( this.playVideo.bind(this) ); } playVideo() { this.api.play(); } // ... }

Это было легко; мы просто воспроизводим видео через VgAPI, когда запускается наблюдаемый loadedMetadata .

Вы помните свойство currentIndex ? Сейчас самое время использовать его, чтобы мы могли перейти к следующему видео, когда текущее видео будет завершено:

 // ... export class AppComponent { // ... onPlayerReady(api: VgAPI) { this.api = api; this.api.getDefaultMedia().subscriptions.loadedMetadata.subscribe( this.playVideo.bind(this) ); this.api.getDefaultMedia().subscriptions.ended.subscribe( this.nextVideo.bind(this) ); } nextVideo() { this.currentIndex++; if (this.currentIndex === this.playlist.length) { this.currentIndex = 0; } this.currentItem = this.playlist[ this.currentIndex ]; } // ... }

С помощью этого метода мы можем обрабатывать момент, когда ended событие запускается тегом video , а затем переходить к следующему видео. Мы также добавили небольшой элемент управления для выполнения бесконечного цикла при достижении конца плейлиста, установив currentIndex = 0; так что мы можем вернуться к первому пункту. Наконец, мы устанавливаем currentItem , который будет обновлять наши привязки Angular в пользовательском интерфейсе.

Как видите, здесь мы не проигрываем видео; это потому, что мы обрабатываем это с помощью наблюдаемого loadedMetadata . Когда мы обновляем currentItem внутри nextVideo() , загружается новое видео, и это запускает наблюдаемый loadedMetadata .

Это делает наш код более легким для чтения и трудным для взлома! Наблюдаемые — это круто, верно?

Что дальше?

Отсюда мы могли бы добавить некоторые элементы управления видео HTML5, чтобы удалить автовоспроизведение или бесконечный цикл, добавить рекламу или синхронизировать информацию.

В этой демонстрации мы только поверхностно рассмотрели возможности Videogular. API может управлять несколькими медиафайлами одновременно, у нас есть модули для потоковой передачи и рекламы, и вы даже можете создать медиаплеер для воспроизведения анимации, маршрутов на карте и многого другого.

Videogular выпущен под лицензией MIT и является проектом с открытым исходным кодом, доступным на GitHub. Каждый может создать запрос на вытягивание, представить проблему, написать документацию и внести свой вклад в сообщество.