© Jeanine Meyer 2018
Jeanine MeyerHTML5 and JavaScript Projectshttps://doi.org/10.1007/978-1-4842-3864-6_3

3. Bouncing Video: Animating and Masking HTML5 Video

Jeanine Meyer1 
(1)
New York, USA
 
In this chapter, you will learn the following:

  • Produce a moving video clip by drawing the current frame of the video at different locations on a canvas

  • Produce a moving video clip by repositioning the video element within the document window

  • Make the moving video be a circle in the drawing a frame on canvas case by drawing a mask that travels along with the video

  • Make the moving video be a circle in the moving element situation by using clipPath

  • Build an application that will adapt to different window sizes

Introduction

The project for this chapter is a display of ...

Get HTML5 and JavaScript Projects: Build on your Basic Knowledge of HTML5 and JavaScript to Create Substantial HTML5 Applications now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial