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 usevideo.play()
JavaScript, and you haveenable-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 forvideo.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.
NOTE
The differences in the behavior on iOS & Android exist because this is the standard behavior on real mobile devices.
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!