Videogular ile Açısal Video Oynatıcı Oluşturma

Çevrimiçi trafik istatistiklerine göre, video web'in kontrolünü ele geçiriyor. Eski güzel TV ölüyor ve şirketler 2019'a kadar çevrimiçi trafiğin %80'ini temsil edecek bir pazara hükmetmek için hızla hareket ediyor.

Birçok medya sağlayıcısı ve ürünü, HTML5 video desteğine güvenir:

• Youtube: HTML5 video ve sosyal paylaşım platformu
• Netflix: HTML5 video içerik sağlayıcısı
• JWPlayer: HTML5 video hizmeti ve akış sağlayıcısı
• Brightcove: HTML5 video hizmeti ve akış sağlayıcısı
• Kaltura: HTML5 video hizmeti ve akış sağlayıcısı
• Video.js: HTML5 video oynatıcı
• Flowplayer: HTML5 video oynatıcı ve akış sağlayıcı

Geliştirici topluluğunun, ileride ortaya çıkan yeni zorluklarla yüzleşmek için sağlam, genişletilebilir ve gelişmiş bir medya çerçevesine (yalnızca bir HTML5 video oynatıcısına değil) ihtiyacı var. Bu yazıda böyle bir çerçeveyi tanıtmak istiyorum: Videogular .

Videogular Nedir?

Adından da anlaşılacağı gibi, Videogular, Angular 2+ ile yazılmış bir medya çerçevesidir. Videogular ile HTML5 video, ses veya istediğiniz diğer içerikleri oynatabilirsiniz. Angular 1.X (aka AngularJS) için bir uygulama var, ancak bu yazıda sadece mevcut Angular 2+ sürümünden bahsedeceğiz.

O halde, muhtemelen aklınızdan geçen bir sonraki soru şudur: Video için neden Angular kullanıyorsunuz?

Bir video kitaplığı oluşturmak için belirli bir çerçeve seçmenin birkaç iyi nedeni vardır.

• Katkı kolaylığı: Videogular, çok aktif bir topluluğa sahip popüler bir çerçeve olan Angular'a dayandığından, diğer kişilerin eklentiler oluşturarak veya hataları düzelterek katkıda bulunmaya başlaması çok kolaydır.
• Web Bileşenleri: Kendi oynatıcınızı oluşturmak ve stil oluşturmak için JavaScript yazmanıza gerek yok. HTML ve CSS kodu yazabilirsiniz.
• TypeScript: Angular, etrafındaki tüm kitaplıkların yanı sıra yazılan bir çerçevedir. Güçlü bir şekilde yazılmış bir ekosisteme sahip olmak, hataları ve mimari sorunları çok geç olmadan tespit etmemizi sağlar.
• Hız: Angular da dahil olmak üzere en son popüler çerçevelerin tümü hızla parlıyor.

Ek olarak, RxJS, AOT (önceden derleme), Angular CLI ve daha fazlası gibi başka harika özelliklerimiz de var.

Videogular Nasıl Çalışır?

Videogular'ın sadece bir HTML5 video oynatıcıdan çok bir medya çerçevesi olduğunu söylemeyi seviyorum. Diğer video oynatıcılar arasındaki en alakalı özellik ve fark, oynatıcınızı ayarlamak için JavaScript yerine etiketler yazmanızdır.

Çoğu video oynatıcı şu anda şu şekilde çalışıyor:

 <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 uygulaması şöyle görünür:

 <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'ın iyi yanı, HTML koduna yalnızca hızlı bir bakışla bu oynatıcının nasıl çalıştığını, hangi kontrollerin mevcut olduğunu ve örneğin parçaları ve parça seçiciyi kaldırmak için nasıl değiştirileceğini bilmenizdir.

Ancak Angular video oynatıcı oluştururken yararlanabileceğimiz tek avantaj bu değildir. HTML/CSS tasarımcılarının ve JavaScript geliştiricilerinin aynı kod temelinde birlikte çalıştığı büyük geliştirme ekiplerini düşünün. Özel öğeler kullandığımız için tasarımcılar, yeni bir kitaplık ve hatta JavaScript/TypeScript öğrenmeye gerek kalmadan stiller ve animasyonlar uygulayarak çalışmaya başlayabilir.

Ayrıca Videogular, birkaç medya dosyası arasında otomatik senkronizasyon veya yalnızca video/ses değil, hemen hemen herhangi bir başlangıcı ve sonu olan herhangi bir içeriği oynatma yeteneği gibi, yalnızca düz bir Angular video oynatıcı yazmaktan çok daha güçlü yetenekler sağlar.

Videogular ile zengin, etkileşimli bir uygulama oluşturmanın ne kadar kolay olduğunu görmek için, senkronize meta verilerle bir video oynatma listesi oluşturacağız.

Videogular Nasıl Kurulur

Bu örnekte, kullanıcının video hakkında daha fazla bilgiye ihtiyaç duyması durumunda, bir video listesine ve Wikipedia'dan ilgili bir alıntıya sahip olacağız.

Tüm kodlar Videogular Showroom GitHub depomuzda mevcuttur ve GitHub sayfası olarak yayınlanır.

Videogular kurulumu, yetenekli herhangi bir Angular geliştiricisi için basit bir mesele olmalıdır. Öte yandan, Angular'a yeni başlıyorsanız, ilk Angular uygulamanızı yapmak için bu hızlı kılavuza göz atmalısınız.

Henüz Node.js yüklemediyseniz, Node.js resmi web sitesine gidin ve yükleyin. Bu, Angular ile geliştirmemiz gereken tek sunucu ve NPM aracılığıyla bağımlılıkları kurmak için buna ihtiyacımız var. Node.js 6.9.0 veya üzerini ve NPM 3.0.0 veya üzerini kurduğunuzdan emin olmanız yeterlidir.

Yapmamız gereken ilk şey, Angular CLI'yi kurmak. Angular CLI, kolay iskele, test, geliştirme sunucuları ve yapım yapıları sağladığı için herhangi bir Angular geliştiricisi için olmazsa olmaz bir araçtır. Daha da önemlisi, diğer herhangi bir Angular geliştiricisinin anlayabileceği bir kuralı takip eder.

Angular CLI'yi global olarak NPM aracılığıyla kurun:

 npm install -g @angular/cli

Ve SASS destekli ilk projemizi oluşturalım:

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

Bu sizin için örnek bir proje oluşturmalıdır. Sonuçları aynı anda geliştirmeye ve izlemeye başlamak istiyorsanız, npm run start ve [http://localhost:4200](http://localhost:4200) dosyasını açabilirsiniz. Angular CLI, canlı yeniden yükleme ve geliştiriciler olarak sevdiğimiz tüm harika özelliklere sahip bir Node.js geliştirme sunucusu çalıştıracak.

Artık videogular2 kitaplığını ve core-js yazımlarını yükleyebilirsiniz:

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

Angular video oynatıcı oluşturma

İsterseniz, düğmeleriniz ve kontrollerinizdeki simgeleri ayarlamak için resmi Videogular yazı tipini kullanabilirsiniz. Bunu yapmak için projenizin kökünde bulunan .angular-cli.json dosyanıza CSS eklemeniz gerekir.

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

Kendi yazı tipinizi ve stillerinizi ayarlamak istiyorsanız, özel CSS'nizi burada veya styles.scss içinde ayarlayabilirsiniz.

Videogular'ı projenizde kullanmaya başlamak için uygulama modülünüze Videogular modülünü eklemeniz gerekmektedir.

src/app/app.module.ts açın ve FormsModule ile HttpModule'u kaldırın; Bu demo için onlara ihtiyacımız olmayacak. app.module.ts dosyanız şu şekilde olmalıdır:

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

Her şey hazır olduğunda, HTML kodumuzu yazmamız yeterli!

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

Artık sunucuyu çalıştırabilir ve Angular ve Videogular tarafından desteklenen ilk video uygulamanızın keyfini çıkarabilirsiniz.

 npm run start

Angular'da Medya Oynatma Listesi Oluşturma

Videolarımızı listelemek için tüm seçenekleri içeren basit bir dizi oluşturacağız. Bu listeyi Angular'ın HttpModule ile bir REST hizmeti aracılığıyla yükleyebileceğinizi unutmayın, ancak basitlik adına, bunu bu demoda kodlanmış halde yapacağız.

app.component.ts açın ve bu video dizisini ve arayüzünü ekleyin:

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

Artık oynatma listesini oynatıcımızın altına HTML dosyasına eklemeye hazırız:

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

selected sınıf ve hover efekti için bazı stiller ekleyelim:

 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 yöntemi, medyayı Videogular oynatıcımızda oynatılacak şekilde ayarlayacaktır. Şimdi yöntemi eklemek için app.component.ts gidelim:

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

currentIndex özelliği, daha sonra geçerli öğeyi ve çalma listesindeki konumunu belirlemek için kullanılacaktır. Bu, sonsuz döngülü çalma listeleri yapmak ve kullanıcı çalma listesinin bir öğesini tıkladığında currentIndex güncellemek için önemlidir.

Son olarak, oynatma listesi tarafından işlenen currentItem özelliğinden kaynağı ayarlamak için yalnızca video öğesini değiştirmemiz gerekir. Bunun için HTML5 video öğesinin src özelliğine basit bir bağlama oluşturacağız:

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

Artık çalma listemizi test edebilir ve nasıl çalıştığını görebiliriz. İlk video başlangıçta yüklenir ve videolar arasında geçiş yapabiliriz, yani her şey yolunda! Ancak, bir video tamamlandığında videolar arasında otomatik olarak geçiş yaparak ve oynatıcı durumunun daha iyi bir genel yönetimini ekleyerek bazı ince ayarlar yapabilir ve deneyimi iyileştirebiliriz.

Bunu yapmak için, durumu ele almak ve olayları dinlemek için her Videogular örneğinde bulunan küresel bir hizmet olan Videogular API'sine ihtiyacımız olacak.

Durumları işlemek için VgAPI kullanma

Medya oynatma listemiz şu anda %100 işlevseldir, ancak yeni bir öğe seçildiğinde veya bir video tamamlandığında videoları otomatik olarak oynatarak kullanıcı deneyimini iyileştirebiliriz.

Videogular, VgPlayer bileşeni içindeki her VgMedia örneği için değişiklikleri kontrol etmek ve dinlemek için bir API sunar. Aslında, tüm Videogular modülleri bu genel API'ye dayanmaktadır, böylece müşterileriniz için kendi modüllerinizi oluşturabilir veya bunları açık kaynak olarak yayınlayarak topluluğa katkıda bulunabilirsiniz.

Videogular API'sini kullanmak için, VgPlayer bileşeni tarafından başlatılan onPlayerReady olayını dinlemeniz yeterlidir:

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

Oynatıcı başlatıldığında, API'yi kaydedebilir ve video etiketi tarafından gönderilen olayları dinlemeye başlayabilirsiniz:

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

Videogular API, RxJS'ye dayalıdır, böylece Observables subscribe olabilir ve bunun sonucunda tepki verebilirsiniz. Videoları otomatik oynatmak için loadedmetadata olayını dinlememiz gerekiyor.

Meta veriler yüklendiğinde videoyu oynatmak için yeni bir Subscription ekleyelim:

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

Kolaydı; yüklenen Metadata gözlemlenebilir tetiklendiğinde videoyu loadedMetadata aracılığıyla oynatıyoruz.

currentIndex özelliğini hatırlıyor musunuz? Mevcut video tamamlandığında bir sonraki videoya geçebilmemiz için şimdi onu kullanma zamanı:

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

Bu yöntemle, video etiketi tarafından ended olayın ne zaman tetiklendiğini işleyebilir ve ardından bir sonraki videoya geçebiliriz. Ayrıca currentIndex = 0; böylece ilk maddeye geri dönebiliriz. Son olarak, kullanıcı arayüzündeki Angular bağlantılarımızı güncelleyecek olan currentItem ayarladık.

Gördüğünüz gibi, burada videoyu oynatmıyoruz; bunun nedeni, bunu gözlemlenebilir olan loadedMetadata ile halletmemizdir. nextVideo() içindeki currentItem güncellediğimizde, yeni bir video yüklenir ve bu, gözlemlenebilir olan loadedMetadata tetikler.

Bu, kodumuzun okunmasını kolaylaştırır ve kırılmasını zorlaştırır! Gözlemlenebilirler harika değil mi?

Sıradaki ne?

Buradan, otomatik oynatmayı veya sonsuz döngüyü kaldırmak, reklamları enjekte etmek veya bilgileri senkronize etmek için bazı HTML5 video kontrolleri ekleyebiliriz.

Bu demoda, Videogular ile yapılabileceklerin yüzeyini çizdik. API, aynı anda birkaç medya dosyasını yönetme yeteneğine sahiptir, akış ve reklam için modüllerimiz vardır ve animasyonları, haritadaki rotaları ve çok daha fazlasını oynatmak için bir medya oynatıcı bile oluşturabilirsiniz.

Videogular, bir MIT lisansı altında yayınlandı ve GitHub'da bulunan açık kaynaklı bir projedir. Herkes bir çekme talebi oluşturabilir, bir sorun gönderebilir, belgeler yazabilir ve topluluğa katkıda bulunabilir.