Delivering Video in Web Experiences
3h 35mGeneral2022-05-02
Authors

Tom Green
Teacher, Author, Professor
Course details
Do you want to keep up-to-date on the current best practices for video delivery on the web? In this course, instructor Tom Green walks you through a collection of the latest best practices and the history underpinning them. Tom begins with the history of web videos, then covers browsers and video encoding formats. He explains how a video moves from the web server to the user’s browser and walks you through several tools you can use to encode and convert videos. Tom discusses the HTML5 video element, applying autoplay, adding controls, resizing videos, and more. After stepping through the prototyping process and tools you may use in the process, he goes over ways you can use Cascading Style Sheets (CSS) to draw the user’s attention to video content. Plus, Tom shows you ways to have a webpage’s background be a full-screen video, add captioning, create cinemagraphs, prepare a video for social media, and more.
Skills covered
Media EncoderComputer SkillsPremiere ProAfter EffectsProjectAdobeBusiness Software and ToolsMicrosoft
Concepts
0. Introduction
- 01 - Design web video experiences
- 02 - Exercise files
1. Encoding Video
- 03 - History
- 04 - Browsers
- 05 - MP4 format
- 06 - M4V format
2. HTML5 and Video
- 07 - The pipe
- 08 - Adobe Media Encoder overview
- 09 - Encoding an MP4
- 10 - Miro Video Converter
- 11 - Handbrake
- 12 - Encoding from Adobe Premiere
- 13 - Encoding from Adobe After Effects
- 14 - Encoding a LottieFile
3. HTML5 and Video
- 15 - The video element
- 16 - The source attribute
- 17 - Autoplay
- 18 - Adding controls
- 19 - Alternate content sources
- 20 - Poster frame
- 21 - Resize video
- 22 - Looping video
- 23 - Animated GIF
4. Video and UX Prototyping
- 24 - Overview
- 25 - Adobe Experience Design
- 26 - Figma
- 27 - Principle
- 28 - UXPin
5. Video and CSS
- 29 - Video in a box
- 30 - Applying opacity
- 31 - Text wrap
- 32 - Apply a gradient
- 33 - Rotate a video
- 34 - Animate a video
6. Playing With Video
- 35 - Background video in After Effects
- 36 - Background video in Premiere
- 37 - Background video code
- 38 - Captioning video
- 39 - Cinemagraph in Photoshop
- 40 - Animated GIF
- 41 - Third-party controllers
- 42 - Preparing for social media
- 43 - Create a video for your Facebook page
- 44 - Using Dynamic Link
- 45 - Create a PNG sequence with transparency for an animated GIF
- 46 - Create a simple meme
Conclusion
- 47 - Next steps
Related courses
- Web Video for Business: 1 Creating an Online Series
- Video for Photographers: 2 Filmmaking on Location
- Content Strategy in the Age of AI
- Voice-Over for Video and Animation
- Advanced Animations and Interactions with Framer X
- Final Cut Pro Essential Training
- Using Video to Convey Your Passion and Personality
- How to Freelance and Get Paid Making Digital Commercials
Related learn paths
- Produce Audio for Interactive Projects
- Master Digital Transformation
- Advance Your Content Marketing Skills
- Generative AI for Customer Service with Microsoft 365 Copilot Professional Certificate
- Become a FileMaker Custom App Developer
- Explore Songwriting
- Become a Back-End Web Developer
- Explore Web Development with Node.js