Video handling


Covered in this doc

  • How Percy handles videos for stable screenshots
  • Handling video tags
  • Handling JavaScript

This document describes how Percy handles videos in rendering.

There are two popular ways of video play over the web

  • <video autoplay> element
  • using JavaScript

<video autoplay> tags

All <video> elements will be frozen and shown the video's static thumbnail. This makes it stable for visual testing. JavaScript

If you use JavaScript, and you have enable-javascript: true in your Percy config (rare), you must handle these manually because Percy cannot freeze them. Currently, snapshots will be taken at a random point in the video.

To handle freezing in Percy screenshots for, we recommend the following options:

  • Use Percy specific CSS to hide or blank out the video element.
  • In test environment, play blank videos so that screenshots are consistent when taken.