💚 Wait for video ready state & use webm video

Turns out firefox on ubuntu can't play mpeg videos due to licensing. Swapping to
a webm video makes the tests pass in CI

> Note: Firefox doesn't include MPEG decoding (it's patented), so if that isn't
already in your distribution, you might need to install additional software. Not
sure if there are useful links here or whether a Linux user will need to jump
in: Fix common audio and video issues.

https://support.mozilla.org/en-US/questions/1227605#answer-1138231

packages/dom/src/serialize-video.js

@@ -2,7 +2,7 @@
 export function serializeVideos(dom, clone) {
   for (let video of dom.querySelectorAll('video')) {
     // If the video already has a poster image, no work for us to do
-    if (video.getAttribute('poster')) { continue; }
+    if (video.getAttribute('poster')) continue;
 
     let videoId = video.getAttribute('data-percy-element-id');
     let cloneEl = clone.querySelector(`[data-percy-element-id="${videoId}"]`);

packages/dom/test/serialize-videos.test.js

@@ -4,30 +4,34 @@ import serializeDOM from '@percy/dom';
 describe('serializeVideos', () => {
   let $;
 
-  it('serializes video elements', (done) => {
+  it('serializes video elements', async () => {
     withExample(`
-       <video src="base/test/assets/example.mp4" id="video" controls />
+       <video src="base/test/assets/example.webm" id="video" controls />
     `);
 
-    document.querySelector('#video').addEventListener('canplay', () => {
-      $ = parseDOM(serializeDOM());
-
-      expect($('#video')[0].getAttribute('poster').length > 25).toBe(true);
-      done();
+    let $video = window.video;
+    await new Promise(r => {
+      if ($video.readyState > 2) r();
+      else $video.addEventListener('canplay', r);
     });
+
+    $ = parseDOM(serializeDOM());
+    expect($('#video')[0].getAttribute('poster').length > 25).toBe(true);
   });
 
-  it('does not serialize videos with an existing poster', (done) => {
+  it('does not serialize videos with an existing poster', async () => {
     withExample(`
-       <video src="base/test/assets/example.mp4" id="video" poster="//:0" />
+       <video src="base/test/assets/example.webm" id="video" poster="//:0" />
     `);
 
-    document.querySelector('#video').addEventListener('canplay', () => {
-      $ = parseDOM(serializeDOM());
-
-      expect($('#video')[0].getAttribute('poster')).toBe('//:0');
-      done();
+    let $video = window.video;
+    await new Promise(r => {
+      if ($video.readyState > 2) r();
+      else $video.addEventListener('canplay', r);
     });
+
+    $ = parseDOM(serializeDOM());
+    expect($('#video')[0].getAttribute('poster')).toBe('//:0');
   });
 
   it('does not apply blank poster images', () => {