آموزش ارائه ویدیو در تجربیات وب - آخرین آپدیت

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

مقدمه Introduction

• فایل‌های تمرینی Exercise files

• طراحی تجربیات ویدیویی وب Design web video experiences

1. کدگذاری ویدیو 1. Encoding Video

• تاریخچه History

• فرمت MP4 MP4 format

• مرورگرها Browsers

• فرمت M4V M4V format

2. HTML5 و ویدیو 2. HTML5 and Video

• کدگذاری یک LottieFile Encoding a LottieFile

• مراحل انتقال (The pipe) The pipe

• مرور کلی Adobe Media Encoder Adobe Media Encoder overview

• کدگذاری MP4 Encoding an MP4

• کدگذاری از Adobe After Effects Encoding from Adobe After Effects

• مبدل ویدیو Miro Miro Video Converter

• نرم‌افزار Handbrake Handbrake

• کدگذاری از Adobe Premiere Encoding from Adobe Premiere

3. HTML5 و ویدیو 3. HTML5 and Video

• گیف متحرک (Animated GIF) Animated GIF

• ویدیوی تکرار شونده (Looping) Looping video

• منابع محتوای جایگزین Alternate content sources

• افزودن کنترل‌ها Adding controls

• المان ویدیو The video element

• فریم پوستر Poster frame

• تغییر اندازه ویدیو Resize video

• پخش خودکار (Autoplay) Autoplay

• ویژگی source The source attribute

4. ویدیو و نمونه‌سازی UX 4. Video and UX Prototyping

• مرور کلی Overview

• Adobe Experience Design Adobe Experience Design

• فیگما (Figma) Figma

• پرینسیپل (Principle) Principle

• یو‌اکس‌پین (UXPin) UXPin

5. ویدیو و CSS 5. Video and CSS

• اعمال گرادینت Apply a gradient

• چرخاندن ویدیو Rotate a video

• ویدیو در باکس Video in a box

• پیچیدن متن دور ویدیو Text wrap

• متحرک‌سازی ویدیو Animate a video

• اعمال شفافیت (Opacity) Applying opacity

6. کار با ویدیو 6. Playing With Video

• استفاده از Dynamic Link Using Dynamic Link

• کنترلرهای شخص ثالث Third-party controllers

• گیف متحرک (Animated GIF) Animated GIF

• آماده‌سازی برای شبکه‌های اجتماعی Preparing for social media

• ساخت ویدیو برای صفحه فیس‌بوک Create a video for your Facebook page

• ساخت یک میم (Meme) ساده Create a simple meme

• ویدیوی پس‌زمینه در Premiere Background video in Premiere

• ساخت سکانس PNG شفاف برای گیف متحرک Create a PNG sequence with transparency for an animated GIF

• سینماگراف در فتوشاپ Cinemagraph in Photoshop

• کد ویدیوی پس‌زمینه Background video code

• ویدیوی پس‌زمینه در After Effects Background video in After Effects

• زیرنویس گذاری ویدیو Captioning video

جمع‌بندی Conclusion

• گام‌های بعدی Next steps