สร้างโปรแกรมเล่นวิดีโอเชิงมุมด้วย Videogular

ตามสถิติการเข้าชมออนไลน์ วิดีโอกำลังเข้าควบคุมเว็บ ทีวีเก่าที่ดีกำลังจะตาย และบริษัทต่างๆ กำลังเดินหน้าอย่างรวดเร็วเพื่อครองตลาดที่จะเป็นตัวแทนของการเข้าชมออนไลน์ 80% ภายในปี 2019

ผู้ให้บริการและผลิตภัณฑ์สื่อจำนวนมากพึ่งพาการสนับสนุนวิดีโอ 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 ซึ่งเป็นเฟรมเวิร์กยอดนิยมที่มีชุมชนที่มีความกระตือรือร้นสูง จึงเป็นเรื่องง่ายมากสำหรับผู้อื่นที่จะเริ่มต้นมีส่วนร่วมด้วยการสร้างปลั๊กอินหรือแก้ไขข้อบกพร่อง
• Web Components: ไม่จำเป็นต้องเขียน 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 แบบคร่าวๆ คุณจะรู้ว่าโปรแกรมเล่นนี้ทำงานอย่างไร มีตัวควบคุมใดบ้าง และวิธีแก้ไขเพื่อนำออก เช่น แทร็กและตัวเลือกแทร็ก

แต่นี่ไม่ใช่ข้อได้เปรียบเพียงอย่างเดียวที่เราจะได้รับเมื่อสร้างโปรแกรมเล่นวิดีโอเชิงมุม ลองนึกถึงทีมพัฒนาขนาดใหญ่ที่นักออกแบบ HTML/CSS และนักพัฒนา JavaScript ทำงานร่วมกันบนฐานโค้ดเดียวกัน เนื่องจากเราใช้องค์ประกอบแบบกำหนดเอง นักออกแบบสามารถเริ่มทำงานโดยใช้สไตล์และแอนิเมชั่นโดยไม่จำเป็นต้องเรียนรู้ไลบรารี่ใหม่หรือแม้แต่ JavaScript/TypeScript

นอกจากนี้ Videogular ยังให้ความสามารถที่ทรงพลังมากกว่าการเขียนโปรแกรมเล่นวิดีโอเชิงมุมธรรมดา เช่น การซิงโครไนซ์อัตโนมัติระหว่างไฟล์มีเดียหลายๆ ไฟล์ หรือความสามารถในการเล่นไม่เพียงแต่วิดีโอ/เสียงเท่านั้น แต่ยังรวมถึงเนื้อหาใดๆ ที่มีจุดเริ่มต้นและจุดสิ้นสุด

หากต้องการดูว่าการสร้างแอปแบบอินเทอร์แอกทีฟที่สมบูรณ์และสมบูรณ์ด้วย Videogular นั้นง่ายเพียงใด เราจะสร้างเพลย์ลิสต์วิดีโอที่มีข้อมูลเมตาที่ซิงโครไนซ์

วิธีการติดตั้ง Videogular

ในตัวอย่างนี้ เราจะมีรายการวิดีโอและข้อความที่ตัดตอนมาจาก Wikipedia ในกรณีที่ผู้ใช้ต้องการข้อมูลเพิ่มเติมเกี่ยวกับวิดีโอ

รหัสทั้งหมดมีอยู่ใน Videogular Showroom GitHub repo ของเราและเผยแพร่เป็นหน้า 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 and open [http://localhost:4200](http://localhost:4200) Angular CLI จะเรียกใช้เซิร์ฟเวอร์การพัฒนา Node.js พร้อมการรีโหลดแบบสดและฟีเจอร์สุดเจ๋งทั้งหมดที่เราในฐานะนักพัฒนาชื่นชอบ

ตอนนี้คุณสามารถติดตั้งไลบรารี videogular2 และการพิมพ์ core-js :

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

การสร้างเครื่องเล่นวิดีโอเชิงมุม

หากต้องการ คุณสามารถใช้แบบอักษร 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 สาธารณะนี้ ดังนั้นคุณสามารถสร้างโมดูลของคุณเองสำหรับลูกค้าของคุณหรือมีส่วนร่วมในชุมชนโดยปล่อยเป็นโอเพ่นซอร์ส

ในการใช้ Videogular API คุณเพียงแค่ต้องฟังเหตุการณ์ onPlayerReady ที่เกิดจากองค์ประกอบ VgPlayer:

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

เมื่อเริ่มต้นโปรแกรมเล่น คุณสามารถบันทึก API และเริ่มฟังเหตุการณ์ที่ส่งโดยแท็ก video :

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

Videogular API นั้นใช้ 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 ที่จะอัปเดตการเชื่อมโยงเชิงมุมของเราใน UI

อย่างที่คุณเห็น เราไม่ได้เล่นวิดีโอที่นี่ นั่นเป็นเพราะเราจัดการกับมันด้วย loadedMetadata ที่สังเกตได้ เมื่อเราอัปเดตรายการปัจจุบันภายใน currentItem nextVideo() วิดีโอใหม่จะถูกโหลดและทริกเกอร์ข้อมูลเมตาที่ loadedMetadata สามารถสังเกตได้

ทำให้โค้ดของเราอ่านง่ายขึ้นและแตกยากขึ้น! สิ่งที่สังเกตได้น่ากลัวใช่มั้ย?

อะไรต่อไป?

จากที่นี่ เราสามารถเพิ่มการควบคุมวิดีโอ HTML5 บางส่วนเพื่อลบการเล่นอัตโนมัติหรือการวนซ้ำที่ไม่สิ้นสุด แทรกโฆษณา หรือซิงโครไนซ์ข้อมูล

ในการสาธิตนี้ เราเพิ่งจะขีดข่วนพื้นผิวของสิ่งที่สามารถทำได้ด้วย Videogular API มีความสามารถในการจัดการไฟล์สื่อหลายไฟล์พร้อมกัน เรามีโมดูลสำหรับการสตรีมและโฆษณา และคุณยังสามารถสร้างโปรแกรมเล่นสื่อเพื่อเล่นแอนิเมชัน เส้นทางในแผนที่ และอื่นๆ อีกมากมาย

Videogular เผยแพร่ภายใต้ใบอนุญาต MIT และเป็นโครงการโอเพ่นซอร์สที่มีอยู่ใน GitHub ทุกคนสามารถสร้างคำขอดึง ส่งปัญหา เขียนเอกสาร และมีส่วนร่วมในชุมชน