Membangun Pemutar Video Sudut dengan Videogular

Menurut statistik lalu lintas online, video mengambil alih kendali web. TV lama yang bagus sedang sekarat dan perusahaan bergerak cepat untuk mendominasi pasar yang akan mewakili 80% lalu lintas online pada tahun 2019 .

Banyak penyedia media dan produk mengandalkan dukungan video HTML5:

• Youtube: Video HTML5 dan platform berbagi sosial
• Netflix: Penyedia konten video HTML5
• JWPlayer: penyedia layanan video dan streaming HTML5
• Brightcove: penyedia layanan video dan streaming HTML5
• Kaltura: penyedia layanan video dan streaming HTML5
• Video.js: pemutar video HTML5
• Flowplayer: pemutar video HTML5 dan penyedia streaming

Komunitas pengembang membutuhkan kerangka kerja media yang solid, dapat diperluas, dan canggih (bukan hanya pemutar video HTML5) untuk menghadapi tantangan baru yang ada di depan. Dalam artikel ini, saya ingin memperkenalkan salah satu kerangka kerja tersebut: Videogular .

Apa itu Videogular?

Seperti namanya, Videogular adalah kerangka kerja media yang ditulis dalam Angular 2+. Dengan Videogular, Anda dapat memutar video HTML5, audio, atau konten lain yang Anda inginkan. Ada implementasi untuk Angular 1.X (alias AngularJS), tetapi dalam artikel ini kita hanya akan berbicara tentang versi Angular 2+ saat ini.

Jadi, pertanyaan berikutnya yang mungkin terlintas di benak Anda adalah: Mengapa menggunakan Angular untuk video?

Nah, ada sejumlah alasan bagus untuk memilih kerangka kerja tertentu untuk membuat perpustakaan video.

• Kemudahan berkontribusi: Karena Videogular didasarkan pada Angular, kerangka kerja populer dengan komunitas yang sangat aktif, sangat mudah bagi orang lain untuk mulai berkontribusi dengan membuat plugin atau memperbaiki bug.
• Komponen Web: Tidak perlu menulis JavaScript untuk membuat dan menata pemutar Anda sendiri. Anda dapat menulis kode HTML dan CSS.
• TypeScript: Angular adalah kerangka kerja yang diketik, serta semua perpustakaan di sekitarnya. Memiliki ekosistem yang diketik dengan kuat memungkinkan kami mendeteksi bug dan masalah arsitektur sebelum terlambat.
• Kecepatan: Semua kerangka kerja populer terbaru sangat cepat, termasuk Angular.

Selain itu, kami memiliki beberapa fitur keren lainnya seperti RxJS, AOT (kompilasi sebelumnya), Angular CLI, dan banyak lagi.

Bagaimana Cara Kerja Videogular?

Saya suka mengatakan bahwa Videogular lebih merupakan kerangka kerja media daripada sekadar pemutar video HTML5. Fitur dan perbedaan yang paling relevan antara pemutar video lainnya adalah Anda menulis tag untuk menyiapkan pemutar Anda, bukan JavaScript.

Inilah cara kerja sebagian besar pemutar video saat ini:

 <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>

Dan seperti inilah implementasi 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>

Hal yang baik tentang Videogular adalah, hanya dengan melihat sekilas ke kode HTML, Anda tahu cara kerja pemutar ini, kontrol mana yang tersedia, dan cara memodifikasinya untuk menghapus, misalnya, trek dan pemilih trek.

Tapi ini bukan satu-satunya keuntungan yang bisa kita dapatkan saat membuat pemutar video Angular. Pikirkan tim pengembangan besar di mana desainer HTML/CSS dan pengembang JavaScript bekerja bersama pada basis kode yang sama. Karena kami menggunakan elemen kustom, desainer dapat mulai bekerja dengan menerapkan gaya dan animasi tanpa perlu mempelajari pustaka baru atau bahkan JavaScript/TypeScript.

Selain itu, Videogular menyediakan kemampuan yang jauh lebih kuat daripada hanya menulis pemutar video Angular biasa, seperti sinkronisasi otomatis antara beberapa file media, atau kemampuan untuk memutar tidak hanya video/audio, tetapi hampir semua konten yang memiliki awal dan akhir.

Untuk melihat betapa mudahnya membuat aplikasi interaktif yang kaya dengan Videogular, kita akan membuat daftar putar video dengan metadata yang disinkronkan.

Cara Memasang Videogular

Dalam contoh ini, kami akan memiliki daftar video dan kutipan terkait dari Wikipedia, untuk berjaga-jaga jika pengguna perlu memiliki informasi lebih lanjut tentang video tersebut.

Semua kode tersedia di repo GitHub Showroom Videogular kami dan diterbitkan sebagai halaman GitHub.

Instalasi videogular harus menjadi urusan langsung untuk setiap pengembang Angular yang terampil. Di sisi lain, jika Anda baru memulai Angular, Anda harus membaca panduan singkat ini untuk membuat aplikasi Angular pertama Anda.

Jika Anda belum menginstal Node.js, buka situs web resmi Node.js dan instal. Ini adalah satu-satunya server yang perlu kami kembangkan dengan Angular, dan kami membutuhkannya untuk menginstal dependensi melalui NPM. Anda hanya perlu memastikan untuk menginstal Node.js 6.9.0 atau lebih tinggi dan NPM 3.0.0 atau lebih tinggi.

Hal pertama yang perlu kita lakukan adalah menginstal Angular CLI. Angular CLI adalah alat yang harus dimiliki untuk setiap pengembang Angular, karena menyediakan scaffolding, pengujian, server pengembangan, dan pembuatan produksi yang mudah. Lebih penting lagi, ini mengikuti konvensi yang dapat dipahami oleh pengembang Angular lainnya.

Instal Angular CLI secara global melalui NPM:

 npm install -g @angular/cli

Dan mari kita buat proyek pertama kita dengan dukungan untuk SASS:

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

Ini akan membuat proyek sampel untuk Anda. Jika Anda ingin mulai mengembangkan dan melihat hasilnya secara bersamaan, Anda dapat menjalankan npm run start dan membuka [http://localhost:4200](http://localhost:4200) . Angular CLI akan menjalankan server pengembangan Node.js dengan pemuatan ulang langsung dan semua fitur keren yang kami sukai sebagai pengembang.

Sekarang Anda dapat menginstal pustaka videogular2 dan pengetikan core-js :

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

Membuat pemutar video Sudut

Jika mau, Anda dapat menggunakan font Videogular resmi untuk mengatur ikon pada tombol dan kontrol Anda. Untuk melakukannya, Anda perlu menambahkan CSS ke file .angular-cli.json yang tersedia di root proyek Anda.

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

Jika Anda ingin mengatur font dan gaya Anda sendiri, Anda dapat mengatur CSS khusus Anda di sini atau di dalam styles.scss .

Untuk mulai menggunakan Videogular dalam proyek Anda, Anda harus menambahkan modul Videogular ke modul aplikasi Anda.

Buka src/app/app.module.ts dan hapus FormsModule dan HttpModule; kita tidak akan membutuhkan mereka untuk demo ini. Beginilah seharusnya file app.module.ts Anda:

 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 { }

Dengan semuanya sudah diatur, kita hanya perlu menulis kode HTML kita!

 <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>

Sekarang Anda dapat menjalankan server dan menikmati aplikasi video pertama Anda yang didukung oleh Angular dan Videogular.

 npm run start

Membangun Daftar Putar Media di Angular

Untuk membuat daftar video kami, kami akan membuat array sederhana dengan semua opsi. Ingatlah bahwa Anda dapat memuat daftar ini melalui layanan REST dengan HttpModule Angular, tetapi demi kesederhanaan, kami akan melakukan ini dengan kode keras dalam demo ini.

Buka app.component.ts dan tambahkan rangkaian video ini dan antarmukanya:

 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' } ]; }

Sekarang kami siap untuk menambahkan daftar putar di bawah pemutar kami di file HTML:

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

Mari tambahkan beberapa gaya untuk kelas yang selected dan efek 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; } } }

Metode onClickPlaylistItem akan mengatur media untuk diputar di pemutar Videogular kami. Mari kita pergi sekarang ke app.component.ts untuk menambahkan metode:

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

Properti currentIndex akan digunakan nanti untuk mengidentifikasi item saat ini dan posisinya dalam daftar putar. Ini penting untuk melakukan daftar putar loop tak terbatas dan memperbarui currentIndex saat ini ketika pengguna mengklik item dari daftar putar.

Terakhir, kita hanya perlu memodifikasi elemen video untuk menyetel sumber dari properti currentItem yang ditangani oleh daftar putar. Kami akan membuat untuk ini pengikatan sederhana ke properti src dari elemen video HTML5:

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

Sekarang kami dapat menguji daftar putar kami dan melihat cara kerjanya. Video pertama dimuat di awal dan kami dapat mengubah antar video, jadi semuanya baik-baik saja! Namun kami dapat membuat beberapa penyesuaian dan meningkatkan pengalaman dengan beralih secara otomatis di antara video saat video selesai, dan menambahkan manajemen keseluruhan yang lebih baik dari status pemutar.

Untuk melakukan ini, kita memerlukan API Videogular, layanan global yang tersedia di setiap instans Videogular untuk menangani status dan mendengarkan peristiwa.

Menggunakan VgAPI untuk menangani status

Daftar putar media kami sekarang berfungsi 100%, tetapi kami dapat meningkatkan pengalaman pengguna dengan memutar video secara otomatis saat item baru dipilih atau saat video selesai.

Videogular mengekspos API untuk mengontrol dan mendengarkan perubahan untuk setiap instance VgMedia di dalam komponen VgPlayer . Sebenarnya, semua modul Videogular berbasis di API publik ini, sehingga Anda dapat membuat modul sendiri untuk pelanggan Anda atau berkontribusi pada komunitas dengan merilisnya sebagai sumber terbuka.

Untuk menggunakan Videogular API, Anda hanya perlu mendengarkan event onPlayerReady yang diaktifkan oleh komponen VgPlayer:

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

Saat pemutar diinisialisasi, Anda dapat menyimpan API dan mulai mendengarkan peristiwa yang dikirim oleh tag video :

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

Videogular API didasarkan pada RxJS, sehingga Anda dapat subscribe Observables dan bereaksi sebagai konsekuensinya. Untuk memutar video secara otomatis, kita perlu mendengarkan acara loadedmetadata yang dimuat.

Mari tambahkan Subscription baru untuk memutar video saat metadata dimuat:

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

Itu mudah; kita cukup memutar video melalui VgAPI saat loadedMetadata observable diaktifkan.

Apakah Anda ingat properti currentIndex ? Sekarang saatnya untuk menggunakannya agar kita dapat beralih ke video berikutnya ketika video saat ini selesai:

 // ... 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 ]; } // ... }

Dengan metode ini, kami dapat menangani saat acara ended dipicu oleh tag video dan kemudian pindah ke video berikutnya. Kami juga menambahkan kontrol kecil untuk melakukan infinite loop ketika kami mencapai akhir daftar putar dengan mengatur currentIndex = 0; jadi kita bisa kembali ke item pertama. Akhirnya kami mengatur currentItem yang akan memperbarui binding Angular kami di UI.

Seperti yang Anda lihat, kami tidak memutar video di sini; itu karena kami menanganinya dengan loadedMetadata observable. Saat kami memperbarui currentItem di dalam nextVideo() , video baru dimuat dan itu memicu loadedMetadata yang dapat diamati.

Ini membuat kode kita lebih mudah dibaca dan lebih sulit untuk dipecahkan! Observables luar biasa bukan?

Apa berikutnya?

Dari sini, kita dapat menambahkan beberapa kontrol video HTML5 untuk menghapus putar otomatis atau infinite loop, menyuntikkan iklan, atau menyinkronkan informasi.

Dalam demo ini, kami baru saja menggores permukaan dari apa yang mungkin dilakukan dengan Videogular. API mampu mengelola beberapa file media secara bersamaan, kami memiliki modul untuk streaming dan iklan, dan Anda bahkan dapat membuat pemutar media untuk memutar animasi, rute di peta, dan banyak lagi.

Videogular dirilis di bawah lisensi MIT dan merupakan proyek sumber terbuka yang tersedia di GitHub. Semua orang dipersilakan untuk membuat permintaan tarik, mengirimkan masalah, menulis dokumentasi, dan berkontribusi pada komunitas.