Special offers now — see discounted courses.
day
:
hour
:
min
:
sec
See special offers
Delivering Video in Web Experiences

Delivering Video in Web Experiences

3h 35mGeneral2022-05-02

Authors

Tom Green

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

Related learn paths

About us

LyndaKade is a leading learning platform that helps people learn business, software, technology, and creative skills to achieve personal and professional goals.

Phone numberAparat ChannelTelegram SupportTelegram ChannelInstagram Page

All rights to this site belong to LyndaKade.

Terms of Service|Privacy Policy

نماد الکترونیک enamad در صورت اتصال با آی‌پی داخل کشور، نمایش داده خواهد شد.
logo-samandehi - لوگو ساماندهی
zarinpal
zibal