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

مقدمه 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