How to deal with media / embedded content

[wooorm]

<audio>, <video>

Most examples use phrasing content in audio elements to say that stuff isn’t working, like this example from MDN:

<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>

The naive idea would be to unwrap it, to:

Your browser does not support the `audio` element.

...but that isn’t really useful.

We can also link to the resource like so:

[Your browser does not support the `audio` element.](http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg)

Video’s with a [poster] attribute could also be transformed to images:

<video src="videofile.webm" autoplay poster="posterimage.jpg">
Sorry, your browser doesn't support embedded videos, 
but don't worry, you can <a href="videofile.webm">download it</a>
and watch it with your favorite video player!
</video>

...to:

[![Sorry, your browser doesn't support embedded videos, 
but don't worry, you can download it and watch it with your favorite video player!](posterimage.jpg)](videofile.webm)

...but here the text isn’t very nice either.

<iframe>

<iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" width="400" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

...to:

[Your browser does not support iframes.](https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html)

...not very nice either.

<picture>

<picture>
 <source srcset="mdn-logo.svg" type="image/svg+xml">
 <img src="mdn-logo.png" alt="MDN">
</picture>

or:

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

Should we pick the first <img>?

<object>, <embed>

<object data="movie.swf" type="application/x-shockwave-flash"></object>

...or:

<object data="movie.swf" type="application/x-shockwave-flash">
  <param name="foo" value="bar">
</object>

...and:

<embed type="video/quicktime" src="movie.mov" width="640" height="480">

I think it’s best to ignore them.

<canvas>

<canvas id="canvas" width="300" height="300">
  An alternative text describing what your canvas displays. 
</canvas>

...to:

An alternative text describing what your canvas displays. 

?

[sethvincent]

Maybe these things could optionally pass through as html?

For my use case that may be preferable.

I'm thinking that could be a reasonable approach for any elements that are unrecognized or where handlers are not yet implemented, just let them stay html

[wooorm]

I’d like to stay away from raw HTML nodes in MDAST:

• Raw HTML nodes are terrible for virtual doms: vdom, react, and the like, as they need dangerouslySetInnerHTML, if that’s even possible in their environment
• Raw HTML nodes are terrible for plugins, as html nodes are black boxes and plugins cannot inspect them
• Raw HTML nodes are terrible for markdown, though not in this case, as for example <script> in an html node could turn all further nodes into hidden stuff, or even executable stuff, which is different than expected.

For my use case that may be preferable.

What are your use cases?