Handling Videos

Learn how Percy performs visual testing on pages that have videos

This document describes how Percy handles videos in rendering.

There are two popular ways of video play over the web

• <video autoplay> element: All <video> elements will be frozen and shown the video’s static thumbnail. This makes it stable for visual testing.
• video.play() using 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.

Handling Videos on Mobile Browsers

Currently supported mobile browsers:

• Safari on iPhone: Percy pauses autoplay videos and shows a blank space instead. If a thumbnail exists, it is shown instead.
• Chrome on Android: Percy pauses autoplay videos and shows the first frame as thumbnail. If a thumbnail exists, it is shown instead.