Delivering Video in Web Experiences

Explore the evolution and best practices of web video and learn how to deliver rich video experiences with ease.

Introduction

• Design web video experiences
• Exercise files

1. Encoding Video

• History
• Browsers
• MP4 format
• M4V format

2. HTML5 and Video

• The pipe
• Adobe Media Encoder overview
• Encoding an MP4
• Miro Video Converter
• Handbrake
• Encoding from Adobe Premiere
• Encoding from Adobe After Effects
• Encoding a LottieFile

3. HTML5 and Video

• The video element
• The source attribute
• Autoplay
• Adding controls
• Alternate content sources
• Poster frame
• Resize video
• Looping video
• Animated GIF

4. Video and UX Prototyping

• Overview
• Adobe Experience Design
• Figma
• Principle
• UXPin

5. Video and CSS

• Video in a box
• Applying opacity
• Text wrap
• Apply a gradient
• Rotate a video
• Animate a video

6. Playing With Video

• Background video in After Effects
• Background video in Premiere
• Background video code
• Captioning video
• Cinemagraph in Photoshop
• Animated GIF
• Third-party controllers
• Preparing for social media
• Create a video for your Facebook page
• Using Dynamic Link
• Create a PNG sequence with transparency for an animated GIF
• Create a simple meme

Conclusion

• Next steps