بناء مشغل فيديو زاوي مع Videogular

وفقًا لإحصائيات حركة المرور عبر الإنترنت ، فإن الفيديو يسيطر على الويب. التلفزيون القديم الجيد يحتضر والشركات تتحرك بسرعة للسيطرة على السوق الذي سيمثل 80٪ من حركة المرور عبر الإنترنت بحلول عام 2019.

يعتمد العديد من موفري الوسائط والمنتجات على دعم فيديو HTML5:

• يوتيوب: فيديو 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

في هذا المثال ، سيكون لدينا قائمة مقاطع الفيديو ومقتطف ذي صلة من ويكيبيديا ، فقط في حالة احتياج المستخدم إلى مزيد من المعلومات حول الفيديو.

كل الكود متاح في معرض Videogular Showroom GitHub repo ويتم نشره كصفحة GitHub.

يجب أن يكون التثبيت بالفيديو أمرًا صعبًا لأي مطور 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

إنشاء مشغل فيديو 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 مع Angular's HttpModule ، ولكن من أجل البساطة ، سنقوم بهذا الترميز الثابت في هذا العرض التوضيحي.

افتح 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 في واجهة برمجة التطبيقات العامة هذه ، لذا يمكنك إنشاء الوحدات النمطية الخاصة بك لعملائك أو المساهمة في المجتمع من خلال إصدارها كمصدر مفتوح.

لاستخدام Videogular API ، ما عليك سوى الاستماع إلى حدث onPlayerReady الذي أطلقه مكون VgPlayer:

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

عند تهيئة المشغل ، يمكنك حفظ واجهة برمجة التطبيقات والبدء في الاستماع إلى الأحداث المرسلة بواسطة علامة video :

 export class AppComponent { // ... onPlayerReady(api: VgAPI) { this.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(); } // ... }

كان ذلك سهلا؛ نقوم ببساطة بتشغيل الفيديو عبر 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 الذي سيحدث ارتباطاتنا الزاويّة في واجهة المستخدم.

كما ترى ، نحن لا نشغل الفيديو هنا ؛ هذا لأننا نتعامل مع ذلك باستخدام البيانات loadedMetadata التي يمكن ملاحظتها. عندما نقوم بتحديث العنصر الحالي داخل currentItem nextVideo() ، يتم تحميل مقطع فيديو جديد ويؤدي إلى تشغيل البيانات loadedMetadata التي يمكن ملاحظتها.

هذا يجعل الكود الخاص بنا أسهل في القراءة ويصعب كسره! الأشياء المرصودة رائعة ، أليس كذلك؟

ماذا بعد؟

من هنا ، يمكننا إضافة بعض عناصر تحكم فيديو HTML5 لإزالة التشغيل التلقائي أو الحلقة اللانهائية أو إدخال الإعلانات أو مزامنة المعلومات.

في هذا العرض التوضيحي ، قمنا للتو بخدش السطح لما يمكن فعله باستخدام Videogular. واجهة برمجة التطبيقات قادرة على إدارة العديد من ملفات الوسائط في نفس الوقت ، ولدينا وحدات للبث والإعلان ، ويمكنك حتى إنشاء مشغل وسائط لتشغيل الرسوم المتحركة والمسارات في الخريطة وغير ذلك الكثير.

تم إصدار Videogular بموجب ترخيص MIT وهو مشروع مفتوح المصدر متاح على GitHub. نرحب بالجميع لإنشاء طلب سحب وتقديم مشكلة وكتابة الوثائق والمساهمة في المجتمع.