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.