Translation suport; use tag content for fallback text (#7)

Instead of hardcoding strings that cannot be overridden by the
user, we're using Markdown-It's environment object to support
translation, either with a built-in very naive function, or
with a user-provided function. The English messages can also
be customized without touching the translation logic.

The transparent content inside <video> and <audio> tags is not
a standard accessibility feature like the ALT text; it is only
shown when the browser cannot play this content at all. The
standard recommendation is to use this text to offer a download
link. See, e.g., the examples in
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

This implementation does so, but it also adds the descriptive
text (if any) for good measure. For backwards compatibility, we
continue to store the descriptive text (or "Untitled ...")
in parsed.title, and it can still be accessed inside the
Handlebars template via {{title}}.

README.md

@@ -24,7 +24,7 @@ var md = require('markdown-it')()
 
 md.render('![](http://example.com/file.webm)'); // => '<p><video width="320" height="240" class="audioplayer" controls>
                                                 // <source type="video/webm" src=https://example.com/file.webm></source>
-                                                // untitled video
+                                                // Fallback text (see below)
                                                 // </video></p>'
 ```
 
@@ -58,7 +58,10 @@ Rendered:
 ```html
 <p><video controls preload="metadata">
 <source type="video/webm" src="https://example.com/file.webm"></source>
-test link
+Your browser does not support playing HTML5 video. You can
+<a href="https://example.com/file.webm" download>download a copy of the video
+file</a> instead.
+Here is a description of the content: test link
 </video></p>
 ```
 
@@ -80,7 +83,9 @@ Rendered:
 ```html
 <p><video width="320" height="240" class="audioplayer" controls>
 <source type="video/webm" src="https://example.com/file.webm"></source>
-untitled video
+Your browser does not support playing HTML5 video. You can
+<a href="https://example.com/file.webm" download>download a copy of the video
+file</a> instead.
 </video></p>
 ```
 
@@ -111,7 +116,10 @@ Rendered:
 <p><a href="https://example.com/file.webm">test link</a></p>
 <video controls preload="metadata">
 <source type="video/webm" src="https://example.com/file.webm"></source>
-test link
+Your browser does not support playing HTML5 video. You can
+<a href="https://example.com/file.webm" download>download a copy of the video
+file</a> instead.
+Here is a description of the content: test link
 </video>
 ```
 
@@ -123,7 +131,7 @@ inline: false,
 autoAppend: true
 ```
 
-In this mode media files are embedded at the end of the rendered text without any specific directives. 
+In this mode media files are embedded at the end of the rendered text without any specific directives.
 
 This mode always uses link syntax.
 
@@ -138,7 +146,10 @@ Rendered:
 <p><a href="https://example.com/file.webm">test link</a></p>
 <video controls preload="metadata">
 <source type="video/webm" src="https://example.com/file.webm"></source>
-test link
+Your browser does not support playing HTML5 video. You can
+<a href="https://example.com/file.webm" download>download a copy of the video
+file</a> instead.
+Here is a description of the content: test link
 </video>
 ```
 
@@ -152,6 +163,12 @@ templateName: "media-embed_tpl"
 If you want to render media embed using Handlebars template, you can set `templateName` option and the plugin will try to find
 the template using global `HandlebarsTemplates` array and render using this template.    
 
+You can access the descriptive content (e.g., "test link" above) via the
+`{{title}}` variable. It will be set to "Untitled video" or "Untitled audio"
+if no title was set. You can access the fallback text ("Your browser does not
+support ...")  via the `{{fallback}}` variable. See below for how to
+customize/translate the text.
+
 ## Options reference
 
 #### attributes
@@ -184,7 +201,7 @@ Default: `false`.
 
 #### embedPlaceDirectiveRegexp
 
-Regexp. Regular expression for the directive which is used to set the place for media embeds in case of non-inline embedding. 
+Regexp. Regular expression for the directive which is used to set the place for media embeds in case of non-inline embedding.
 
 Default: ```/^\[\[html5media\]\]/im```
 
@@ -235,6 +252,31 @@ Boolean. Enables video/audio embed with ```[]()``` syntax.
 
 Default: `false`.
 
+#### messages
+
+Object. Override the built-in default fallback text. You can add translations as
+well, and load the translation by invoking `md.render` with a language
+environment variable, like so: `md.render('some text', { language: 'code' })`
+
+See `lib/index.js` for the default text in English.
+
+#### translateFn
+
+Object. Override the built-in translation function. The function has to process
+an object like this as its only argument, and return a string:
+
+````javascript
+{
+  messageKey: 'video not supported',
+  messageParam: 'somevideo.webm',
+  language: 'en'
+}
+````
+
+The keys you need to support are defined in `lib/index.js`. You can access the
+default messages, or the messages you passed via `options.messages`, through
+the `this` keyword within your translation function.
+
 ## Credits
 
 Originally based on [the code](http://talk.commonmark.org/t/embedded-audio-and-video/441/16) written by [v3ss0n](https://github.com/v3ss0n).