Introduction
Design web video experiences
(01:07)
Exercise files
(01:11)
1. Encoding Video
History
(04:19)
Browsers
(04:04)
MP4 format
(03:36)
M4V format
(01:45)
2. HTML5 and Video
The pipe
(03:05)
Adobe Media Encoder overview
(03:49)
Encoding an MP4
(07:57)
Miro Video Converter
(04:33)
Handbrake
(04:38)
Encoding from Adobe Premiere
(02:58)
Encoding from Adobe After Effects
(05:39)
Encoding a LottieFile
(05:47)
3. HTML5 and Video
The video element
(02:17)
The source attribute
(03:26)
Autoplay
(03:20)
Adding controls
(03:49)
Alternate content sources
(03:15)
Poster frame
(02:23)
Resize video
(03:45)
Looping video
(01:34)
Animated GIF
(03:25)
4. Video and UX Prototyping
Overview
(03:06)
Adobe Experience Design
(05:41)
Figma
(04:03)
Principle
(04:03)
UXPin
(03:52)
5. Video and CSS
Video in a box
(05:47)
Applying opacity
(03:41)
Text wrap
(04:44)
Apply a gradient
(07:44)
Rotate a video
(03:01)
Animate a video
(07:20)
6. Playing With Video
Background video in After Effects
(08:45)
Background video in Premiere
(07:11)
Background video code
(05:42)
Captioning video
(08:30)
Cinemagraph in Photoshop
(06:54)
Animated GIF
(05:39)
Third-party controllers
(07:26)
Preparing for social media
(03:58)
Create a video for your Facebook page
(06:57)
Using Dynamic Link
(05:38)
Create a PNG sequence with transparency for an animated GIF
(05:38)
Create a simple meme
(06:15)
Conclusion
Next steps
(01:26)
Ex_Files_Delivering_Video_in_Web_Experiences_Part_1.zip
(2.3 GB)
Ex_Files_Delivering_Video_in_Web_Experiences_Part_2.zip
(639.1 MB)