# [دوره اول کدآپ](https://quera.ir/codeup) **نکات کلی که باید مورد توجه قرار گیرند: ** + استفاده از هر ابزار و کد آماده آزاد است. + امتیاز دهی نهایی بر اساس تعداد جواب های نوع A سپس نوع B و سپس نوع C می باشد. به این معنی که یک پاسخ نوع A از چندین پاسخ از نوع B امتیاز بالاتری دارد. + برای هر سوال باید یک صفحه html مجزا طراحی شود. + هیچ ترتیبی برای حل سوال ها وجود ندارد و هر سوال می تواند به صورت مستقل از سوال های قبل و بعد از آن حل شود. + در هر سوال باید آدرس مخزن گیت‌هاب آن را Fork کنید و پیاده سازی را در آن ادامه دهید.

کتابخانه MediaElementPlayer یک پخش کننده (player) ویدئو و صوت قدرتمند و در عین حال با قابلیت تغییر ساده و بالا است که بر روی پخش کننده html5 نوشته شده است. با استفاده از پخش کننده MediaElementPlayer یک صفحه html طراحی نمایید که شامل این پخش کننده باشد و ویدئویی که لینک آن در قسمت منابع آمده است را پخش نماید. (C) **Github link: https://github.com/codup1/MediaElementPlayer-exmaple** **نکاتی که باید مورد توجه قرار گیرند:** + صفحه باید به صورت Responsive طراحی شده باشد. **منابع مورد نیاز: ** + Sample video: https://quera.ir/qbox/view/CZuyN2vaUM/sample.mp4 **لینک های مفید: ** + MediaElement: https://github.com/mediaelement/mediaelement

با استفاده از افزونه (plugin) تنظیم کیفیت در MediaElementPlayer کاربر می‌تواند از بین کیفیت‌های مختلف موجود در منو، کیفیت مورد نظر خود را انتخاب نماید. با استفاده از لینک‌های مشخص شده در قسمت منابع موارد زیر را پیاده سازی نمایید. + افزونه تنظیم کیفیت را به player طراحی شده در سوال ۱ اضافه نمایید به طوری که کاربر بتواند بین کیفیت‌های مختلف ویدیو جابه جا شود. (C) + تکنیک (**Dynamic Adaptive Streaming over HTTP** (**DASH** قابلیت تنظیم خودکار کیفیت جریان با توجه به سرعت اینترنت کاربر را به ما مید‌هد. یک افزونه برای MediaElementPlayer پیاده سازی نمایید که قابلیت DASH را به این پخش کننده اضافه نماید به طوری که کیفیت مناسب ویدئو با توجه به سرعت اینترنت کاربر تنظیم شود و کاربر بتواند با استفاده از منوی طراحی شده کیفیت مورد نظر و یا تنظیم خودکار کیفیت را انتخاب نماید. (A) **Github link: https://github.com/codup1/MediaElementPlayer-dash-plugin** **نکاتی که باید مورد توجه قرار گیرند:** **منابع مورد نیاز: ** + ویدئو (کیفیت پایین): https://quera.ir/qbox/view/7pDFocgufX/sample_360.mp4 + ویدئو (کیفیت بالا): https://quera.ir/qbox/view/rQFYrbV4Kc/sample_720.mp4 **لینک های مفید:** + Quality plugin: https://github.com/mediaelement/mediaelement-plugins/blob/master/docs/quality.md

در پخش کننده ها storyboard به فریم‌هایی با بازه زمانی مشخص از بخش‌های مختلف ویدئو گفته می‌شود که به کاربر کمک می‌کند نمای کلی ویدئو را با استفاده از تصاویر بخش‌های مختلف مشاهده نماید. یک افزونه برای MediaElementPlayer پیاده سازی نمایید که با حرکت مکان نمای کاربر بر روی progress bar پخش‌کننده تصویر مربوط به آن بخش ویدئو را نمایش دهد. (A)  هر ویدئو در این بخش شامل چندین فایل تصویری storyboard می باشد و هر فایل storyboard شامل ۵ سطر(به جز storyboard آخر) و ۵ ستون فریم ویدئو با فاصله زمانی یکسان می باشد(ترتیب فریم ها از چپ به راست و از بالا به پایین است).  \**Github link: https://github.com/codup1/MediaElementPlayer-storyboard-plugin** **نکاتی که باید مورد توجه قرار گیرند:** + تعداد کل `frame`های یک فایل‌ ویدئویی را به عنوان ورودی در اختیار داریم.(مثلا برای این سوال تعداد ۹۵ است) + آدرس storyboardها دارای یک قالب می‌باشند (مثلا برای نمونه داده شده به صورت `https://quera.ir/qbox/view/HpmNqdhNbk/M*.jpg` است ) ما این قالب را به عنوان ورودی در اختیار داریم و آدرس فایل‌های تصویر بر اساس قالب و تعداد ورودی‌ها بدست می‌آید. + فاصله زمانی بین فریم ها یکسان است. + تمام storyboard ها شامل ۵ ستون هستند. (تعداد فریم ها مضرب ۵ است) و به جز storyboard آخر همه storyboard ها ۵ سطر دارند. و storyboard آخر به تعداد لازم سطر دارد. (بهتر است بر حسب نیاز به نمایش storyboard‌ ها دریافت شوند.) **منابع مورد نیاز: ** + فایل ویدئویی: https://quera.ir/qbox/view/CZuyN2vaUM/sample.mp4 + تصاویر storyboard: + https://quera.ir/qbox/view/HpmNqdhNbk/M0.jpg + https://quera.ir/qbox/view/unIewuaWgF/M1.jpg + https://quera.ir/qbox/view/g021cyaHvA/M2.jpg + https://quera.ir/qbox/view/FVvx16FJmI/M3.jpg

ویدئوهای HD عموما شامل ۲ فایل مجزا برای برای صدا و تصویر هستند یک صفحه HTML به همراه پخش کننده MediaElementPlayer طراحی نمایید که قابلیت پخش ویدیوهای HD که شامل فایل صدا و تصویر مجزا هستند را داشته باشد. (A) **Github link: https://github.com/codup1/MediaElementPlayer-HD-plugin** **نکاتی که باید مورد توجه قرار گیرند:** **منابع مورد نیاز: ** + فایل ویدئو: https://quera.ir/qbox/view/Q7FUU2ZGYj/sample_hd.mp4 + فایل صدا : https://quera.ir/qbox/view/69dqzvQrg6/sample_hd.m4a

زیرنویس ها متنی هستند که از متن فیلمنامه، گفتگو یا تفسیر در فیلم‌ها، برنامه‌های تلویزیونی و مانند آن، معمولا در پایین صفحه نمایش داده می شود. + با استفاده از افزونه زیرنویس در MediaElementPlayer زیرنویس های یک ویدئو را نمایش دهید. (C) + فایل‌های vtt قابلیت مشخص نمودن style برای متن ها را نیز دارا می باشند یک پلاگین برای MediaElementPlayer پیاده‌سازی نمایید که بتواند فایل‌های vtt همراه با style را به درستی نمایش دهد. (A) **Github link: https://github.com/codup1/MediaElementPlayer-subtitle-plugin** **نکاتی که باید مورد توجه قرار گیرند:** + کاربر باید بتواند بین زیرنویس‌های مختلف جابه جا شود. + در پیاده‌سازی بخش دوم کافی است تنها فایل sample.auto.vtt را به درستی نمایش دهید. **منابع مورد نیاز: ** + فایل ویدئویی: https://quera.ir/qbox/view/CZuyN2vaUM/sample.mp4 + فایل های زیرنویس: + https://quera.ir/qbox/view/IYEGKd5Kc5/sample.auto.vtt + https://quera.ir/qbox/view/xGGXTz8Z6D/sample.fa.vtt + https://quera.ir/qbox/view/HUpWE8sSVp/sample.en.vtt **لینک های مفید: ** + Vtt file sturcture: https://www.w3.org/TR/webvtt1/#css-extensions

استاندارد (VAST (Video Ad Serving Template ارتباط بین سرویس‌های تبلیغاتی و پخش کننده‌های ویدئو را مشخص می نماید. + با استفاده از افزونه‌های vast/vpaid, ads یک تبلیغ پیش نمایشی(preroll) در ابتدای ویدئو نمایش دهید و event های مربوط به آن را فراخوانی کنید. (B) + با استفاده از استاندارد vmap می‌توان چندین تبلیغ با ساختارهای متفاوت را بر روی یک پخش کننده تعریف کرد. یک افزونه برای MediaElementPlayer پیاده سازی نمایید که بتواند فایل vmap را parse نماید و یک تبلیغ پیش نمایشی از آن را نمایش دهد. (B) + تبلیغات midroll تبلیغاتی هستند که هنگام پخش ویدئو نمایش داده می شوند. یک افزونه پیاده سازی نمایید که تبلیغات midroll را از فایل vmap استخراج نموده و نمایش دهد. (A) + تبلیغات postroll در انتهای ویدئو نمایش داده می شوند. یک افزونه پیاده سازی نمایید که تبلیغ postroll را از فایل vmap استخراج نموده و نمایش دهد. (B) **Github link: https://github.com/codup1/MediaElementPlayer-VAST-plugin** **نکاتی که باید مورد توجه قرار گیرند:** + تمام تبلیغات از نوع inline linear vast3 هستند. + تمامی event های تبلیغات باید در زمان مشخص شده صدا زده شوند. + در صورت قابل رد بودن تبلیغ در زمان مشخص کاربر بتواند تبلیغ را رد کند. + فایل تبلیغ می تواند به صورت تصویر و یا ویدئو باشد. **منابع مورد نیاز: ** + فایل ویدئویی: https://quera.ir/qbox/view/CZuyN2vaUM/sample.mp4 + فایل vmap: https://quera.ir/qbox/view/oNcV8e0I4j/vast.xml + فایل vast: https://quera.ir/qbox/view/inMDcUE8qt/vmap.xml **لینک های مفید: ** + Ad plugin: https://github.com/mediaelement/mediaelement-plugins/blob/master/docs/ads.md + Vast plugin: https://github.com/mediaelement/mediaelement-plugins/blob/master/docs/ads-vast.md

وب سرورها برنامه هایی هستند که می توانند محتوا را بر روی بستر وب عرضه کنند. یک وب سرور ایجاد نمایید که بتواند فایل های ویدئویی را عرضه (serve) کند. (C) **نکاتی که باید مورد توجه قرار گیرند:** + فایل ها قابل تغییر هستند و سرور باید بتواند تمام محتواهای ویدئویی موجود در یک پوشه را با توجه به درخواست(request) ورودی سرو کند. + هر درخواست به سرور به صورت https://localhost/file.type می باشد. **منابع مورد نیاز: ** + فایل ویدئویی: https://quera.ir/qbox/view/CZuyN2vaUM/sample.mp4

پروتکل (HLS (HTTP Live Streaming یک پروتکل جهت استریم ویدئو است این روش کل استریم را به مجموعه ای از دانلود استریم های کوچک می شکند. + یک وب سرور ایجاد کنید که فایل ویدئویی را با استفاده از پروتکل HLS با شرایط زیر پاسخ دهد. (B) + فایل ها قابل تغییر هستند و سرور باید بتواند تمام محتواهای ویدئویی موجود در یک پوشه را با توجه به درخواست(request) ورودی سرو کند. + هر تکه (chunk) از فایل دارای حجم یکسان ۱MB باشند. + در ساختار HLS طراحی شده بتوان حجم هر chunk را مشخص نمود و هر ریکوست تاریخ انقضای ۱ ساعته داشته باشند.(A) **Github link: https://github.com/codup1/HLS-video-serve** **منابع مورد نیاز:** + https://quera.ir/qbox/view/CZuyN2vaUM/sample.mp4

برای هر ویدئو یک storyboard با ویژگی های سوال ۳ بخش FrontEnd بسازید. در حقیقت باید با اجرای یک دستور storyboard مورد نظر در آدرس خاصی ایجاد شود. از جمله پارامترهای دستور موارد ‍`total_frames` و `frame_height` می‌باشد (A) **Github link: https://github.com/codup1/video-storyboard-creator** **نکاتی که باید مورد توجه قرار گیرند:** + حداکثر از ۲۰۰ فریم و حداقل از ۵ فریم برای ساخت storyboard کل ویدئو استفاده شود که با توجه به مدت زمان ویدئو مشخص می گردد. + تعداد فریم ها مضرب ۵ است. + هر فایل storyboard حداکثر شامل ۵ سطر است.

یک وب سرور طراحی نمایید که فایل های ویدئویی را به جای فایل از یک دیتابیس دریافت کرده و سرو نماید. علاوه بر سرو فایل باید commandهایی برای موارد زیر داشته باشیم: (A) + ایجاد مدل مناسب در دیتابیس در صورت لزوم + اضافه کردن یک فایل به دیتابیس **Github link: https://github.com/codup1/database-media-store** **نکاتی که باید مورد توجه قرار گیرند:** + حجم هر فایل می تواند تا ۴GB باشد. + فایل ها قابل تغییر هستند و سرور باید بتواند تمام محتواهای ویدئویی موجود در یک جدول را بر اساس نوع درخواست پاسخ دهد. + خود فایل باید در دیتابیس ذخیره شده باشد.

+ در صفحه طراحی شده در سوال ۱ بخش FrontEnd از سرور پیاده سازی شده در بخش Backend استفاده نموده و ویدئو را پخش نمایید. (B) + از storyboard به دست آمده در سوال ۳ بخش Backend در سوال ۳ بخش FrontEnd استفاده نمایید. (از۲۰ و ۴۰ فریم استفاده نمایید) (B)