Polymer paper-dialog: Chrome:Nothing playing, Firefox: "No video with supported format and MIME type found"

Question

I have a list of video results displaying in a paper-card element, using an HTML5 video-tag without the controls attribute, so the video only shows the first frame. To view the video there is an action to open the video in a paper-dialog (modal).

In the collection view, it works as expected.

When the dialog is launched, it simply displays the controls only in Chrome, and in Firefox it shows the controls with the message No video with supported format and MIME type found.

The video-element's src-attribute is populated, and the source definitely exists.

This is awkward as the video shows fine inside the collection view, but in the modal it is not functional.

Answer 1

It turns out that the issue is with the instant the video-tag is realised and rendered.

The dialog is shared and the video item is populated on demand.

This causes the video-element to report an error because <source src="..."> is not populated at first. Simply using src$="..." was not enough.

Instead it works by wrapping the video-element in a dom-if template like so:

<template is="dom-if" if="[[video.references.0.url]]">
  <video width="320" height="240" title="[[video.caption]]" controls>
    <source src$="[[video.references.0.url]]">
    Your browser does not support the html5 video tag.
  </video>
</template>