✨Get placeholder background from placeholder srcs

extensions/amp-video-docking/0.1/amp-video-docking.js

@@ -45,6 +45,7 @@ import {
   escapeCssSelectorIdent,
   isRTL,
   removeElement,
+  scopedQuerySelector,
 } from '../../../src/dom';
 import {getInternalVideoElementFor} from '../../../src/utils/video';
 import {getServiceForDoc} from '../../../src/service';
@@ -1213,27 +1214,40 @@ export class VideoDocking {
 
   /**
    * @param {!../../../src/video-interface.VideoOrBaseElementDef} video
+   * @private
    */
   setPosterImage_(video) {
-    const attr = 'poster';
-
-    const {element} = video;
-
     const placeholderPoster = this.getPlaceholderRefs_()['poster'];
+    const posterSrc = this.getPosterImageSrc_(video.element);
 
-    if (!element.hasAttribute('poster')) {
+    if (!posterSrc) {
       toggle(placeholderPoster, false);
       return;
     }
 
-    const posterSrc = element.getAttribute(attr);
-
     toggle(placeholderPoster, true);
     setStyles(placeholderPoster, {
       'background-image': `url(${posterSrc})`,
     });
   }
 
+  /**
+   * @param {!Element} element
+   * @return {string|undefined}
+   * @private
+   */
+  getPosterImageSrc_(element) {
+    const poster = 'poster';
+    if (element.hasAttribute(poster)) {
+      return element.getAttribute(poster);
+    }
+    const imgEl = scopedQuerySelector(element,
+        'amp-img[placeholder],img[placeholder],[placeholder] amp-img');
+    if (imgEl) {
+      return imgEl.getAttribute('src');
+    }
+  }
+
   /**
    * @param  {number} width
    * @param  {number} height

extensions/amp-video-docking/0.1/test/test-amp-video-docking.js

@@ -20,6 +20,7 @@ import {
 } from '../amp-video-docking';
 import {PlayingStates} from '../../../../src/video-interface';
 import {Services} from '../../../../src/services';
+import {htmlFor} from '../../../../src/static-template';
 import {layoutRectLtwh} from '../../../../src/layout-rect';
 
 
@@ -174,6 +175,46 @@ describes.repeated('', {
       viewport.height = 0;
     });
 
+    describe('#getPosterImageSrc_', () => {
+
+      skipForSlot('uses `poster` attr', () => {
+        const html = htmlFor(env.win.document);
+        const el = html`<amp-video poster=foo.png></amp-video>`;
+
+        expect(docking.getPosterImageSrc_(el)).to.equal('foo.png');
+      });
+
+      skipForSlot('uses `placeholder` amp-img', () => {
+        const html = htmlFor(env.win.document);
+        const el = html`<amp-video>
+          <amp-img src=foo.png placeholder></amp-img>
+        </amp-video>`;
+
+        expect(docking.getPosterImageSrc_(el)).to.equal('foo.png');
+      });
+
+      skipForSlot('uses amp-img in a `placeholder`', () => {
+        const html = htmlFor(env.win.document);
+        const el = html`<amp-video>
+          <div placeholder>
+            <amp-img src=foo.png></amp-img>
+          </div>
+        </amp-video>`;
+
+        expect(docking.getPosterImageSrc_(el)).to.equal('foo.png');
+      });
+
+      skipForSlot('uses `placeholder` img', () => {
+        const html = htmlFor(env.win.document);
+        const el = html`<amp-video>
+          <img src=foo.png placeholder>
+        </amp-video>`;
+
+        expect(docking.getPosterImageSrc_(el)).to.equal('foo.png');
+      });
+
+    });
+
     it(`should use a ${targetType} as target`, () => {
       maybeCreateSlotElementLtwh(190, topBoundary, 200, 100);