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.