Embedding Video/Audio File Types

Resolves #897

This is an experimental branch that explores syntax to embed media. The idea is to use the existing ![]() syntax that has been historically used for images, and instead, use it for media in general.

![](mov.webm)

"Img" links are processed as normal, and once attr_list has processed them, we intercept them in a Treeprocessor. There we identify any links that appear to be media links. Once we've found such links we wrap them in their appropriate element tag (<video> or <audio>). Inside the "media" tag, the video or audio file with be specified via a <source> element.

We do have a default mapping for some known extension types, but some can be either audio or video, if our default assumption is incorrect, the user should specify the type attribute using attr_list.

Since these are processed after attr_list, this means we can apply whatever attributes we want to the element(s) and leverage those. When we are processing the attributes attached to the given tag, we can sort them based on whether they are appropriate for the <source> (or <track> -- subtitles) element or the parent container.

For instance, here we set preload to metadata for the media container.

![](mov.webm){preload=metadata}

But here, since webm can be ambiguous, and we default to assuming video, we can specify on the <source> element that the type is audio/webm. Since we are aware of which attributes are <source> specific, we can specify them together and it will all get sorted out.

![](mov.webm){type="audio/webm" preload=metadata}

Anything non-specific to either element will be attached at the parent container level.

If desired, a user can specify globally, via options, a set of default attributes to apply on every media object. If a user explicitly sets that attribute on a media object, the global value will of course be overridden.

For all videos, we will specify a fallback, the last resort for when the video or audio isn't handled. It is a simple message that allows the user to try and download the file directly.

<video controls preload="metadata">
<source src="https://dl8.webmfiles.org/elephants-dream.webm" type="video/webm">
<a download="" href="https://dl8.webmfiles.org/elephants-dream.webm">https://dl8.webmfiles.org/elephants-dream.webm</a>
</video>

If the user provides an alt, we will use that to provide a description -- in the case that no alt is specified and a title is, title can double as an alt. Assuming none of these are provided, the fallback will simply be the source link.

<video controls preload="metadata"><source src="https://dl8.webmfiles.org/elephants-dream.webm" type="video/webm"><source src="./images/elephants-dream.webm" type="video/webm">
<a download="" href="https://dl8.webmfiles.org/elephants-dream.webm">Elephant has a dream</a>
</video>

Lastly, we provide a mechanism for fallback sources. If multiple, same types of media (audio or video) are grouped together, the first one will be assumed as the main video, and all others will be assumed fallbacks if they specify the fallback attribute. This can be used to specify multiple video types in case a browser does not support one type. Additionally, .vtt sources can be used and will be included in whatever the parent is, audio or video -- .vtt sources are inserted as <track> elements, not <source>.

![A movie about stuff](mov.webm)
![](mov.mp4){fallback}

<video controls= preload="metadata">
<source src="mov.webm" type="video/webm">
<source src="mov.mp4" type="video/mp4">
<a download="" href="mov.webm">mov.webm</a>
</video>

Source-specific attributes will apply to each source, but the "media" and general attributes will be taken only from the main source.

![Audio about stuff](audio.mp3){loop=''}
![](audio.webm){fallback type="audio/webm"}

<audio controls loop preload="metadata">
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.webm" type="audio/webm">
<a download="" href="audio.mp3">Audio about stuff</a>
</audio>

Embedding Media Services

Resolves #896

Embedding video services such as Youtube uses the same syntax as the above ![some alt text](youtube.link). These media links will be converted to an appropriate embedded link and wrapped in an <iframe>.

<iframe> have no concept of alt, but it is generally encouraged that a title is applied. So in this case, alt will double as a title if title is not defined. If neither alt or title is defined, something generic like YouTube video player will be provided via the default configuration.

![Random YouTube link](https://www.youtube.com/embed/ZTjzHsAU5-U)

<iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/ZTjzHsAU5-U" title="Random YouTube link"></iframe>

Things are abstracted in such a way that someone could provide their own function for a specific video service, but as of right now, only: Vimeo, YouTube, and Dailymotion are supported out of the box.

Global default attributes can be defined per media service.

Feedback is welcome!