آموزش یادگیری صوتی و تصویری وب

Learning Web Audio and Video

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: نیاز به اشتراک گذاری ویدیو یا صدا در سایت های خود دارید ، اما انداختن آن در YouTube یا موتور پادکست گزینه ای نیست؟ فناوری های وب بومی - HTML ، CSS و JavaScript - پشتیبانی مستقیم از صدا و تصویر را برای شما فراهم می کنند تا بتوانید از رسانه استفاده کرده و تجربه پخش را کاملاً شخصی سازی کنید. این دوره مقدماتی با مربیگری جوزف لابرکک به شما کمک می کند تا صدا و فیلم تعاملی را در وب سایت ها و برنامه های خود ایجاد کنید. ابتدا اصول عناصر رسانه HTML5 و ویژگی های آنها را مرور کنید. سپس نحوه جاسازی رسانه ، پشتیبانی از عقب مانده و تنظیم اندازه ، میزان صدا و سایر تنظیمات مهم را بیابید. در مرحله بعدی ، نحوه شخصی سازی رابط ها برای استاندارد کردن ظاهر و عملکرد پخش کننده خود در مرورگرهای مختلف را بیاموزید. بعلاوه ، بیاموزید که چگونه تجربه کاربر را با HTML5 Media API کاملاً تعاملی کنید.
موضوعات شامل:
  • پیوند با رسانه
  • جاسازی رسانه ها
  • تغییر سند خود برای صدا و تصویر
  • تعیین منابع صوتی
  • تعیین ارتفاع و عرض فیلم
  • اطمینان از دسترسی
  • ایجاد کنترل های پخش
  • یک ظاهر طراحی کنترل های پخش
  • کار با HTML5 Media API

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

مقدمه Introduction

  • صوتی و تصویری تعاملی را در وب سایت ها و برنامه های خود بسازید Build interactive audio and video into your websites and applications

  • آنچه شما باید بدانید What you should know

  • از پرونده های تمرینی استفاده کنید Use the exercise files

  • چه جدید در این به روز رسانی What's new in this update

1. با رسانه های مبتنی بر وب شروع کنید 1. Get Started with Web-Based Media

  • محیط خود را تنظیم کنید Set up your environment

  • سند جدیدی ایجاد کنید Create a new document

  • پیوند به محتوای رسانه ای Link to media content

  • از رسانه های تعبیه شده استفاده کنید Use embedded media

  • چالش: حاشیه iframe را بردارید Challenge: Remove the iframe border

  • راه حل: حاشیه iframe را بردارید Solution: Remove the iframe border

2. با عناصر صوتی کار کنید 2. Work with Audio Elements

  • سند خود را برای صدا تغییر دهید Modify your document for audio

  • منبع صوتی را مشخص کنید Specify an audio source

  • چندین منبع صوتی را مشخص کنید Specify multiple audio sources

  • محتوای برگشتی را وارد کنید Include fallback content

  • ویژگی های صوتی اضافی Additional audio attributes

  • چالش: قابلیت دسترسی صوتی را با برچسب ها افزایش دهید Challenge: Increase audio accessibility with tags

  • راه حل: قابلیت دسترسی صوتی را با برچسب ها افزایش دهید Solution: Increase audio accessibility with tags

3. با عناصر ویدیویی کار کنید 3. Work with Video Elements

  • سند خود را برای فیلم اصلاح کنید Modify your document for video

  • ارتفاع و عرض را مشخص کنید Specify height and width

  • از تصویر پوستر استفاده کنید Use a poster image

  • قابلیت دسترسی به رسانه Media accessibility

  • چالش: پس زمینه را با ویدئو حلقه ای پر کنید Challenge: Fill the background with looping video

  • راه حل: پس زمینه را با ویدئو حلقه ای پر کنید Solution: Fill the background with looping video

4. کنترل های پخش رسانه را ایجاد کنید 4. Create Media Playback Controls

  • کنترلهای پیش فرض رسانه را غیرفعال کنید Disable default media controls

  • دکمه های پخش را اضافه کنید Add playback buttons

  • عناصر متن را وارد کنید Include text elements

  • یک نوار پیشرفت ایجاد کنید Create a progress bar

  • چالش: کنترل های رسانه را بیش از حد پوشش دهید Challenge: Overlay the media controls

  • راه حل: کنترل های رسانه را همپوشانی کنید Solution: Overlay the media controls

5. کنترل های پخش رسانه ای سبک 5. Style Media Playback Controls

  • سبک های CSS را در یک سند تعریف کنید Define CSS styles in a document

  • دکمه های خود را طراحی کنید Design your buttons

  • متن خود را سبک کنید Style your text

  • نوار پیشرفت خود را طراحی کنید Design your progress bar

  • چالش: از فونت های وب استفاده کنید Challenge: Use web fonts

  • راه حل: از فونت های وب استفاده کنید Solution: Use web fonts

6. با API Media کار کنید 6. Work with the Media API

  • بررسی اجمالی API رسانه Overview of media API

  • برای رویدادهای رسانه گوش دهید Listen for Media events

  • کنترل های دکمه برنامه Program button controls

  • نمایش زمان پویا Dynamic time display

  • نوار پیشرفت را سیم کشی کنید Wire up the progress bar

  • چالش: کنترل ها را نشان دهید و پنهان کنید Challenge: Show and hide the controls

  • راه حل: کنترل ها را نشان دهید و پنهان کنید Solution: Show and hide the controls

نتیجه Conclusion

  • اطلاعات بیشتر Further information

نمایش نظرات

Linkedin (لینکدین)

لینکدین: شبکه اجتماعی حرفه‌ای برای ارتباط و کارآفرینی

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

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

آموزش یادگیری صوتی و تصویری وب
جزییات دوره
1h 16m
43
Linkedin (لینکدین) Linkedin (لینکدین)
(آخرین آپدیت)
12,566
- از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Joseph Labrecque Joseph Labrecque

استاد دانشگاه، مدرس Adobe، رئیس استودیو

جوزف لابرک یک توسعه دهنده، طراح و استاد دانشگاه خلاق است.

جوزف نزدیک به دو دهه تجربه در ساخت وب گویا دارد. راه حل های دسکتاپ و موبایل. او کتاب‌ها، مقالات و دوره‌های ویدئویی در زمینه فناوری‌های طراحی و توسعه، ابزارها و مفاهیم را از طریق ناشران مانند LinkedIn Learning، Peachpit Press و Adobe تالیف کرده است. او شرکت Fractured Vision Media, LLC را تأسیس کرد. یک استودیوی تولید رسانه های دیجیتال و وسیله نقلیه توزیع. جوزف استاد دانشگاه کلرادو بولدر کالج رسانه، ارتباطات و اطلاعات، و همچنین یک رهبر آموزش Adobe، Adobe Community Professional، و یکی از اعضای Adobe Partners by Design است.