Videogular로 Angular 비디오 플레이어 만들기

온라인 트래픽 통계에 따르면 비디오가 웹을 장악하고 있습니다. 오래된 TV는 죽어가고 있으며 기업들은 2019년까지 온라인 트래픽의 80%를 차지할 시장을 선점하기 위해 빠르게 움직이고 있습니다.

많은 미디어 제공업체와 제품이 HTML5 비디오 지원에 의존합니다.

• Youtube: HTML5 비디오 및 소셜 공유 플랫폼
• Netflix: HTML5 비디오 콘텐츠 제공업체
• JWPlayer: HTML5 비디오 서비스 및 스트리밍 제공업체
• Brightcove: HTML5 비디오 서비스 및 스트리밍 제공업체
• Kaltura: HTML5 비디오 서비스 및 스트리밍 제공업체
• Video.js: HTML5 비디오 플레이어
• Flowplayer: HTML5 비디오 플레이어 및 스트리밍 제공업체

개발자 커뮤니티는 앞으로 닥칠 새로운 문제에 대처하기 위해 견고하고 확장 가능한 고급 미디어 프레임워크(단순한 HTML5 비디오 플레이어가 아님)가 필요합니다. 이 기사에서는 그러한 프레임워크 중 하나 인 Videogular 를 소개하고자 합니다.

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는 어떻게 작동합니까?

저는 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 설치 방법

이 예에서는 사용자가 비디오에 대한 추가 정보가 필요한 경우를 대비하여 Wikipedia에서 비디오 목록과 관련 발췌문을 제공합니다.

모든 코드는 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 개발자가 이해할 수 있는 규칙을 따릅니다.

NPM을 통해 전역적으로 Angular CLI를 설치합니다.

 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 글꼴을 사용하여 버튼과 컨트롤에 아이콘을 설정할 수 있습니다. 그렇게 하려면 프로젝트 루트에서 사용 가능한 .angular-cli.json 파일에 CSS를 추가해야 합니다.

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

자신만의 글꼴과 스타일을 설정하려면 여기 또는 styles.scss 내부에서 사용자 정의 CSS를 설정할 수 있습니다.

프로젝트에서 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로 미디어 재생 목록 만들기

비디오를 나열하기 위해 모든 옵션이 포함된 간단한 배열을 만듭니다. Angular의 HttpModule을 사용하여 REST 서비스를 통해 이 목록을 로드할 수 있지만 단순성을 위해 이 데모에서 하드코딩할 것임을 기억하십시오.

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 를 업데이트하는 데 중요합니다.

마지막으로 재생 목록에서 처리하는 currentItem 속성에서 소스를 설정하도록 video 요소만 수정하면 됩니다. 이를 위해 HTML5 비디오 요소의 src 속성에 대한 간단한 바인딩을 만듭니다.

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

이제 재생 목록을 테스트하고 작동 방식을 확인할 수 있습니다. 첫 번째 비디오는 처음에 로드되고 비디오 간에 변경할 수 있으므로 모든 것이 좋습니다! 그러나 비디오가 완료되면 비디오 간에 자동으로 전환하고 플레이어 상태에 대한 더 나은 전반적인 관리를 추가하여 약간의 조정을 수행하고 경험을 개선할 수 있습니다.

이를 위해서는 상태를 처리하고 이벤트를 수신하기 위해 모든 Videogular 인스턴스에서 사용할 수 있는 글로벌 서비스인 Videogular API가 필요합니다.

VgAPI를 사용하여 상태 처리

우리의 미디어 재생 목록은 현재 100% 작동하지만 새 항목이 선택되거나 비디오가 완료되면 비디오를 자동 재생하여 사용자 경험을 개선할 수 있습니다.

Videogular는 VgPlayer 구성 요소 내부의 각 VgMedia 인스턴스에 대한 변경 사항을 제어하고 수신 대기하는 API를 제공합니다. 실제로 모든 Videogular 모듈은 이 공개 API를 기반으로 하므로 고객을 위한 고유한 모듈을 만들거나 오픈 소스로 출시하여 커뮤니티에 기여할 수 있습니다.

Videogular API를 사용하려면 VgPlayer 구성 요소에서 발생하는 onPlayerReady 이벤트를 수신 대기하면 됩니다.

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

플레이어가 초기화되면 API를 저장하고 video 태그에 의해 전달된 이벤트 수신을 시작할 수 있습니다.

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

Videogular API는 RxJS를 기반으로 하므로 Observables 을 subscribe 하고 그에 따라 반응할 수 있습니다. 비디오를 자동 재생하려면 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(); } // ... }

그것은 쉽다; loadMetadata 옵저버블이 실행될 때 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 ]; } // ... }

이 방법을 사용하면 video 태그에 의해 ended 된 이벤트가 발생하는 시점을 처리하고 다음 비디오로 이동할 수 있습니다. 또한 currentIndex = 0; 그래서 우리는 첫 번째 항목으로 돌아갈 수 있습니다. 마지막으로 UI에서 Angular 바인딩을 업데이트할 currentItem 을 설정합니다.

보시다시피 여기에서 비디오를 재생하지 않습니다. 그것은 우리가 loadedMetadata 을 사용하여 처리하기 때문입니다. nextVideo() 내부의 currentItem 을 업데이트하면 새 비디오가 로드되고 이는 loadedMetadata 을 트리거합니다.

이것은 우리의 코드를 읽기 쉽고 깨뜨리기 어렵게 만듭니다! Observable은 정말 멋지죠?

무엇 향후 계획?

여기에서 HTML5 비디오 컨트롤을 추가하여 자동 재생 또는 무한 루프를 제거하고, 광고를 삽입하거나, 정보를 동기화할 수 있습니다.

이 데모에서는 Videogular로 수행할 수 있는 작업의 표면을 긁었습니다. API는 동시에 여러 미디어 파일을 관리할 수 있으며 스트리밍 및 광고용 모듈이 있으며 애니메이션, 지도의 경로 등을 재생하는 미디어 플레이어를 만들 수도 있습니다.

Videogular는 MIT 라이선스로 출시되었으며 GitHub에서 사용할 수 있는 오픈 소스 프로젝트입니다. 누구나 풀 리퀘스트를 생성하고, 이슈를 제출하고, 문서를 작성하고, 커뮤니티에 기여할 수 있습니다.