آموزش ایجاد ویدیوی تعاملی HTML5

Creating Interactive HTML5 Video

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: با افزودن ویدیوهای تعاملی HTML5 بر روی ویدیوهای خود، ویدیوی خود را زنده کنید. تعبیه HTML5 ایجاد کانون های قابل کلیک روی ویدیو باعث ایجاد رویدادها در طول قسمت های خاصی از ویدیو پرش به قسمت های مختلف ویدیو بر اساس ورودی کاربران

در این دوره آموزشی، شما یاد خواهید گرفت که چگونه از یک ویدیوی HTML ایستا فراتر رفته و به کاربران خود اجازه دهید تا با ویدیوهای HTML شما تعامل داشته باشند. ما یک ویدیوی معمولی HTML می‌گیریم و عناصر تعاملی را اضافه می‌کنیم، مانند قسمت‌های قابل کلیک روی ویدیو که با کلیک روی آن‌ها می‌توان به کاربر اجازه داد مفاهیم را با عمق بیشتری کاوش کند و همچنین محرک‌های زمان‌بندی‌شده‌ای را که در نقاط خاصی از ویدیو اتفاق می‌افتد اضافه کند. سپس، شما همچنین یاد خواهید گرفت که چگونه بسته به انتخاب کاربر، به قسمت های مختلف ویدیو منشعب شوید. در نهایت، خواهید دید که چگونه این تعامل در همه دستگاه های تلفن همراه و دسکتاپ قابل مشاهده است.

مفاهیم آموزش داده شده:

  • ویدیو HTML5

  • CSS

  • جاوا اسکریپت

  • jQuery

  • Skeleton CSS

  • لایت باکس های Featherlight


سرفصل ها و درس ها

مقدمه و مثال Introduction and Example

  • معرفی Introduction

  • کار با فایل های پروژه Working with the Project Files

ایجاد طرح بندی صفحه ویدیوی شما Creating Your Video Page Layout

  • نمای کلی Skeleton CSS Overview of Skeleton CSS

  • چیدمان صفحه ویدیوی اصلی Basic Video Page Layout

  • سبک سازی طرح بندی ویدیو Stylizing the Video Layout

  • ایجاد یک منطقه توصیف ویدیو Creating a Video Description Area

  • سبک سازی جعبه های قابل کلیک Stylizing the Clickable Boxes

  • مروری بر Featherlight JS Overview of Featherlight JS

  • ایجاد مناطق Featherlight Creating the Featherlight Areas

افزودن تعامل به ویدیوی شما Adding Interactivity to Your Video

  • تنظیم رویدادهای کلیک در مناطق قابل کلیک Setting up Click Events on the Clickable Areas

  • رفع مشکل در مرورگر کروم Fixing an Issue with Chrome Browser

  • پخش/مکث عملکرد ویدیو Play/Pause Video Function

  • اجرای یک تابع پس از بسته شدن لایت باکس Running a Function After Lightbox Closes

  • ایجاد انتخاب کاربران Creating the Users Choice

  • راه اندازی برخی از متغیرها Setting Up Some Variables

  • رفع متغیر Variable Fix

  • عملکردهای بارگذاری ویدئو و به روز رسانی زمان Video Loaded and Time Update Functions

  • راه اندازی انتخاب در جدول زمانی ویدیوی شما Triggering the Choice in Your Video Timeline

  • رویدادهای ویدیویی نیمه راه و به پایان رسید Halfway and Finished Video Events

  • رویداد رسیدگی به انتخاب Choice Handling Event

  • پرش به یک نقطه خاص در ویدیو Jumping to a Certain Point in the Video

  • توقف ویدیو Stopping the Video

  • به روز رسانی برچسب های زمان Updating the Time Labels

نتیجه Conclusion

  • افکار نهایی Final Thoughts

نمایش نظرات

Udemy (یودمی)

یودمی یکی از بزرگ‌ترین پلتفرم‌های آموزشی آنلاین است که به میلیون‌ها کاربر در سراسر جهان امکان دسترسی به دوره‌های متنوع و کاربردی را فراهم می‌کند. این پلتفرم امکان آموزش در زمینه‌های مختلف از فناوری اطلاعات و برنامه‌نویسی گرفته تا زبان‌های خارجی، مدیریت، و هنر را به کاربران ارائه می‌دهد. با استفاده از یودمی، کاربران می‌توانند به صورت انعطاف‌پذیر و بهینه، مهارت‌های جدیدی را یاد بگیرند و خود را برای بازار کار آماده کنند.

یکی از ویژگی‌های برجسته یودمی، کیفیت بالای دوره‌ها و حضور استادان مجرب و با تجربه در هر حوزه است. این امر به کاربران اعتماد می‌دهد که در حال دریافت آموزش از منابع قابل اعتماد و معتبر هستند و می‌توانند به بهترین شکل ممکن از آموزش‌ها بهره ببرند. به طور خلاصه، یودمی به عنوان یکی از معتبرترین و موثرترین پلتفرم‌های آموزشی آنلاین، به افراد امکان می‌دهد تا به راحتی و با کیفیت، مهارت‌های مورد نیاز خود را ارتقا دهند و به دنبال رشد و پیشرفت شغلی خود باشند.

آموزش ایجاد ویدیوی تعاملی HTML5
جزییات دوره
2 hours
24
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
1,413
4.6 از 5
دارد
دارد
دارد
Jeff Batt
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Jeff Batt Jeff Batt

بنیانگذار در Learning Dojo