Added video renderer for the image/link style

[fritzvd]

After looking around a bit I didn't see a MD compiler with video support. Because I like to use remark for my presentations, I thought I'd add this renderer.

If no one's interested, or it doesn't fit in with the rest that's fine too 👍

[alexkravets]

Image images are there, why not videos?
+1

[Feder1co5oave]

This looks useful, although I'm not sure about the default autoplay loop options.

[joshbruce]

The video element can be very tricky due to sources for audio, captions, and so on. Not sure if defined in any of the targeted specifications (see #956). Closing for now to focus on fixing known issues based on targeted specifications.

[Feder1co5oave]

Would it be currently feasible to include videos as

![my video](myvideo.mp4)

And let the (custom) image renderer take care of generating the correct HTML tags for videos when a video file extension in the href is detected, without marked even be aware of this?

[joshbruce]

My two cents??

Not sure. <img> and <video> are actually very different according to the HTML spec. The closer analogy, I think, would be <video> and <figure>, imho.

https://www.w3.org/TR/html52/grouping-content.html#the-figure-element - has content model
https://www.w3.org/TR/html52/semantics-embedded-content.html#the-video-element - has content model
https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element - no content model

[Feder1co5oave]

What has this to do with my question?

[joshbruce]

Fair question. Not sure. Maybe nothing. From a pure HTML perspective, the two elements are not similar enough, imo. However, if Marked allows users to jump into the middle - then it may be possible without modification.

Were you recommending implementing an extension like that? Or, something else?

Seemed like you were saying Marked is already capable of doing this (hence the "not sure" part in the previous comment).

[Feder1co5oave]

https://talk.commonmark.org/t/embedded-audio-and-video/441/31

[joshbruce]

Still feels like a hack when we take into consideration accessibility things like captioning and whatnot - things the img tag is not designed to do from an HTML spec perpsective. To go directly back to the question - I don't think it is physically possible for the Markdown image to accurately or fully describe a video element.

In other words, can't think of a decent way for Markdown to generate something like the following: https://www.w3.org/TR/html51/semantics-embedded-content.html#the-video-element

![alt text](image path)

// cannot output
<video>
  <source>path</source>
  <track kind="...">path</track>
</video>

// could output
<video src="..."></video>

// or
<video>
  <source>path</source>
</video>

The only way to achieve WCAG 2.0 Level A (lowest level) is to provide text-based alternatives to non-text content (this is why the ![]() works for images and links - the text is provided in the form of titles, alt text, and inner HTML). For videos that usually means the subtitles or captions: https://www.w3.org/WAI/WCAG20/quickref/#text-equiv - so, sure, the video would appear, but it won't be accessible according to the WCAG 2.0 guidelines (which are also now the US Federal guidelines to comply with the Americans with Disabilities Act - Section 508...they require level AA...same for the UK https://www.gov.uk/service-manual/helping-people-to-use-your-service/understanding-wcag-20).

At which point, videos seem more like the place for mixed content HTML + Markdown - not Markdown alone, because the beauty of Markdown is in defining a document, not necessarily a multimedia document with audio or video, imho.

[gazreese]

I needed this patch to serve video content through Contentful. The code, as is, didn't work for me. I had to change to var filetype = href.split('.').pop(); when extracting the file type from the extension.

I also changed the default autoplay and loop options. Seems to me like some of this code generation would need to be user-configurable for it to work well across most people's use cases.

[fritzvd]

@gazreese that is imo a much better solution. This pull request is 2 years old. So use at own risk.

Perhaps you could commit your changes? As @joshbruce said, the video element is kind of weird and different from the img. You can use multiple sources and have a fallback for browsers that don't support the video element. That said: I still use this patched version of markedjs in my custom build of 'remark.js' for presentations.

[UziTech]

This is not likely to get implemented in marked.js until it becomes standard.

This can be done easily by extending the marked.js renderer:

var marked = require('marked');

var renderer = new marked.Renderer();

renderer.oldImage = renderer.image;

renderer.image = function (href, title, text) {
  var videos = ['webm', 'mp4', 'mov'];
  var filetype = href.split('.')[1];
  if (videos.indexOf(filetype) > -1) {
    var out = '<video autoplay loop alt="' + text + '">'
            + '  <source src="' + href + '" type="video/' + filetype + '">'
            + '</video>'
    return out;
  } else {
    return renderer.oldImage(href, title, text);
  }
};

console.log(marked('![my video](myvideo.mp4)', { renderer: renderer }));

I'm hoping in the future to have marked.js just follow the standard and have lots of little add-ons that add this sort of functionality.

[fritzvd]

Perfect. Like a plug-in. I like it Op do 26 jul. 2018 om 17:26 schreef Tony Brix <notifications@github.com>

This is not likely to get implemented in marked.js until it becomes standard. This can be done easily by extending the marked.js renderer: var marked = require('marked'); var renderer = new marked.Renderer(); renderer.oldImage = renderer.image; renderer.image = function (href, title, text) { var videos = ['webm', 'mp4', 'mov']; var filetype = href.split('.')[1]; if (videos.indexOf(filetype) > -1) { var out = '<video autoplay loop alt="' + text + '">' + ' <source src="' + href + '" type="video/' + filetype + '">' + '</video>' return out; } else { return renderer.oldImage(href, title, text); } }; console.log(marked('', { renderer: renderer })); — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#675 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAJySIONEic_9BsrEhd3w1DaBBXLW5qZks5uKd-HgaJpZM4GgH0p> .

-- pgp public key: https://keybase.io/fritzvd/key.asc