Video handling

👍

Covered in this doc

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

This document describes how Percy handles videos in rendering.

There are two popular ways of video play over the web

  • <video autoplay> element
  • video.play() 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.

video.play() JavaScript

If you use video.play() 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 video.play(), 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.