✨ Serialize current video frame into a poster on the <video>

karma.config.js

@@ -19,7 +19,8 @@ module.exports = config => config.set({
     // local package files
     { pattern: 'src/index.js', watched: false },
     { pattern: 'test/helpers.js', watched: false },
-    { pattern: 'test/**/*.test.js', watched: false }
+    { pattern: 'test/**/*.test.js', watched: false },
+    { pattern: 'test/assets/**', watched: false, included: false }
   ],
 
   proxies: {

packages/dom/src/prepare-dom.js

@@ -5,7 +5,7 @@ function uid() {
 
 // Marks elements that are to be serialized later with a data attribute.
 export function prepareDOM(dom) {
-  for (let elem of dom.querySelectorAll('input, textarea, select, iframe, canvas')) {
+  for (let elem of dom.querySelectorAll('input, textarea, select, iframe, canvas, video')) {
     if (!elem.getAttribute('data-percy-element-id')) {
       elem.setAttribute('data-percy-element-id', uid());
     }

packages/dom/src/serialize-dom.js

@@ -3,6 +3,7 @@ import serializeInputs from './serialize-inputs';
 import serializeFrames from './serialize-frames';
 import serializeCSSOM from './serialize-cssom';
 import serializeCanvas from './serialize-canvas';
+import serializeVideos from './serialize-video';
 
 // Returns a copy or new doctype for a document.
 function doctype(dom) {
@@ -34,6 +35,7 @@ export function serializeDOM(options) {
   let clone = dom.cloneNode(true);
   serializeInputs(dom, clone);
   serializeFrames(dom, clone, { enableJavaScript });
+  serializeVideos(dom, clone);
 
   if (!enableJavaScript) {
     serializeCSSOM(dom, clone);

packages/dom/src/serialize-video.js

@@ -0,0 +1,22 @@
+// Captures the current frame of videos and sets the poster image
+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;
+
+    let videoId = video.getAttribute('data-percy-element-id');
+    let cloneEl = clone.querySelector(`[data-percy-element-id="${videoId}"]`);
+    let canvas = document.createElement('canvas');
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+
+    canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
+    let dataUrl = canvas.toDataURL();
+    // If the canvas produces a blank image, skip
+    if (!dataUrl || dataUrl === 'data:,') continue;
+
+    cloneEl.setAttribute('poster', dataUrl);
+  }
+}
+
+export default serializeVideos;

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

@@ -0,0 +1,45 @@
+import { withExample, parseDOM } from './helpers';
+import serializeDOM from '@percy/dom';
+
+describe('serializeVideos', () => {
+  let $;
+
+  it('serializes video elements', async () => {
+    withExample(`
+       <video src="base/test/assets/example.webm" id="video" controls />
+    `);
+
+    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', async () => {
+    withExample(`
+       <video src="base/test/assets/example.webm" id="video" poster="//:0" />
+    `);
+
+    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', () => {
+    withExample(`
+       <video src="//:0" id="video" />
+    `);
+
+    $ = parseDOM(serializeDOM());
+    expect($('#video')[0].getAttribute('poster')).toBe(null);
+  });
+});