HTML5 Projects: Video Bumpers

with Joseph Lowery
please wait ...
HTML5 Projects: Video Bumpers
Video duration: 0s 31m 36s Intermediate


Put HTML5, CSS3, and recent JavaScript API technologies to work and provide an enhanced brand opportunity for your clients with custom video bumpers. This short, easy-to-follow project shows how to add opening and closing video bumpers with the video tag and its JavaScript API. Author Joseph Lowery shows how to add these elements dynamically without additional editing, and includes instructions for troubleshooting the final presentation.

Video Web
HTML JavaScript CSS


- [Voiceover] Hello, I'm Joe Lowery and I'm really happy you've joined me for HTML5 Projects Video Bumpers. A video bumper is a separate piece of video that introduces or closes the primary video. Previously to integrate a bumper into your final output, the primary video would have to be re-edited to include the additional content and then converted to the proper format. Thanks to the introduction of the video tag in HTML5, that workflow is a thing of the past. Because the video tag uses players native to the browser and can be manipulated through a JavaScript API, we can programmatically play a sequence of videos.

In this lesson I'll take you step-by-step to show you how it's done. Let's get going.

please wait ...