@percy/dom 1.0.0-beta.75 → 1.0.0-beta.76

package/README.md

@@ -11,6 +11,7 @@ Serializes a document's DOM into a DOM string suitable for re-rendering.
   - [Frame elements](#frame-elements)
   - [CSSOM rules](#cssom-rules)
   - [Canvas elements](#canvas-elements)
+  - [Video elements](#video-elements)
   - [Other elements](#other-elements)
 
 ## Usage
@@ -64,6 +65,12 @@ with image elements. The image elements reference the serialized data URI and ha
 attributes as their respective canvas elements. The image elements also have a max-width of 100% to
 accomidate responsive layouts in situations where canvases may be expected to resize with JS.
 
+### Video elements
+
+Videos without a `poster` attribute will have the current frame of the video
+serialized into an image and set as the `poster` attribute automatically. This is
+to ensure videos have a stable image to display when screenshots are captured.
+
 ### Other elements
 
 _All other elements are not serialized._ The resulting cloned document is passed to any provided

package/dist/bundle.js

@@ -13,7 +13,7 @@
 
 
     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());
         }
@@ -157,6 +157,24 @@
       }
     }
 
+    // Captures the current frame of videos and sets the poster image
+    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');
+        let width = canvas.width = video.videoWidth;
+        let height = canvas.height = video.videoHeight;
+        canvas.getContext('2d').drawImage(video, 0, 0, width, height);
+        let dataUrl = canvas.toDataURL(); // If the canvas produces a blank image, skip
+
+        if (!dataUrl || dataUrl === 'data:,') continue;
+        cloneEl.setAttribute('poster', dataUrl);
+      }
+    }
+
     function doctype(dom) {
       var _dom$doctype;
 
@@ -192,6 +210,7 @@
       serializeFrames(dom, clone, {
         enableJavaScript
       });
+      serializeVideos(dom, clone);
 
       if (!enableJavaScript) {
         serializeCSSOM(dom, clone);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/dom",
-  "version": "1.0.0-beta.75",
+  "version": "1.0.0-beta.76",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,5 +34,5 @@
   "devDependencies": {
     "interactor.js": "^2.0.0-beta.10"
   },
-  "gitHead": "3b778a9c0b72dcbf113910227f1a073a2714042a"
+  "gitHead": "445af68d8e270e2a35fc74e26422ed5d3c91d2ae"
 }