{"id":17310665,"url":"https://github.com/eloquence/markdown-it-html5-media","last_synced_at":"2025-04-14T13:32:22.350Z","repository":{"id":40986028,"uuid":"110899078","full_name":"eloquence/markdown-it-html5-media","owner":"eloquence","description":"Minimalist \u003cvideo\u003e/\u003caudio\u003e plugin for markdown-it, using image syntax","archived":false,"fork":false,"pushed_at":"2024-03-25T17:03:32.000Z","size":832,"stargazers_count":23,"open_issues_count":9,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-01T04:29:28.288Z","etag":null,"topics":["audio","commonmark","html5","markdown","markdown-it","video"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eloquence.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.MD","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-15T23:33:26.000Z","updated_at":"2024-10-15T01:55:02.000Z","dependencies_parsed_at":"2024-03-25T18:29:04.635Z","dependency_job_id":"ad9b7461-6bb5-4f77-9207-1c0508d15a27","html_url":"https://github.com/eloquence/markdown-it-html5-media","commit_stats":{"total_commits":30,"total_committers":3,"mean_commits":10.0,"dds":"0.19999999999999996","last_synced_commit":"7f7b81149fc3d66847afb4ee62cc555284ac7221"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eloquence%2Fmarkdown-it-html5-media","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eloquence%2Fmarkdown-it-html5-media/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eloquence%2Fmarkdown-it-html5-media/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eloquence%2Fmarkdown-it-html5-media/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eloquence","download_url":"https://codeload.github.com/eloquence/markdown-it-html5-media/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223634176,"owners_count":17176879,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio","commonmark","html5","markdown","markdown-it","video"],"created_at":"2024-10-15T12:38:01.112Z","updated_at":"2024-11-08T05:01:30.775Z","avatar_url":"https://github.com/eloquence.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# markdown-it-html5-media\n![](https://travis-ci.org/eloquence/markdown-it-html5-media.svg?branch=master)\n\nMinimalist \u0026lt;video\u003e/\u0026lt;audio\u003e plugin for markdown-it, using image syntax.\n\nInspired by [markdown-it-html5-embed](https://github.com/cmrd-senya/markdown-it-html5-embed).\nKey differences:\n\n- Only supports image syntax: `![descriptive text](video.mp4)`, which is what\n  the CommonMark folks [seem to favor](https://talk.commonmark.org/t/embedded-audio-and-video/)\n- Tokenizes video and audio to tokens of the 'video' and 'audio' type (useful\n  for working with, e.g., rich text editors that process these tokens)\n- No library dependency for file type detection, just a simple extension check\n  for commonly used video/audio formats.\n- Transpiled version: 10KB unminified vs. 169KB unminified\n\n## Basic usage\n\n````javascript\nconst md = require('markdown-it')();\n// Destructuring assignment; we also export UI messages \u0026 media type detection\nconst { html5Media } = require('markdown-it-html5-media');\nmd.use(html5Media);\nconsole.log(md.render('![text](video.mp4)'));\n````\n\nOutput:\n\n````html\n\u003cp\u003e\u003cvideo src=\"video.mp4\" controls class=\"html5-video-player\"\u003e\nYour browser does not support playing HTML5 video.\nYou can \u003ca href=\"video.mp4\" download\u003edownload the file\u003c/a\u003e instead.\nHere is a description of the content: text\n\u003c/video\u003e\u003c/p\u003e\n````\n\n## Custom attributes\n\nYou can pass any string that will be rendered instead of the default attributes shown above.\n\n````javascript\n// Init as above\nmd.use(html5Media, {\n  videoAttrs: 'class=\"my-video-css\"',\n  audioAttrs: 'class=\"my-audio-css\" data-collapse'\n});\nconsole.log(md.render('![](video.mp4)'));\nconsole.log(md.render('![](audio.mp3)'));\n````\n\nOutput:\n\n````html\n\u003cp\u003e\u003cvideo src=\"video.mp4\" class=\"my-video-css\"\u003e\nYour browser does not support playing HTML5 video.\nYou can \u003ca href=\"video.mp4\" download\u003edownload the file\u003c/a\u003e instead.\n\u003c/video\u003e\u003c/p\u003e\n\u003cp\u003e\u003caudio src=\"audio.mp3\" class=\"my-audio-css\" data-collapse\u003e\nYour browser does not support playing HTML5 audio.\nYou can \u003ca href=\"audio.mp3\" download\u003edownload the file\u003c/a\u003e instead.\n\u003c/audio\u003e\u003c/p\u003e\n````\n\n## Media type detection\n\nThis module detects the media type by examining the file extension\n(case-insensitive). The valid audio and video extensions are defined\n[here](https://eloquence.github.io/markdown-it-html5-media/index.js.html#line15).\n\nIf you need to perform an identical media type detection outside the module,\nyou can import the `guessMediaType` function\n([docs](https://eloquence.github.io/markdown-it-html5-media/HTML5Media.html#.guessMediaType)):\n\n````javascript\nconst { guessMediaType } = require('markdown-it-html5-media');\n````\n\n## Custom messages\n\nYou can customize the fallback text. This text will only be shown to users whose browser does not support HTML5 video or audio at all. %s is used as a substitution marker for the filename or the description.\n\n````javascript\n// Init as above\nmd.use(html5Media, {\n  messages: {\n    en: {\n      'html5 video not supported':\n        'Cannot play video.',\n      'html5 audio not supported':\n        'Cannot play audio.',\n      'html5 media fallback link':\n        'Download \u003ca href=\"%s\"\u003efile\u003c/a\u003e.',\n      'html5 media description':\n        'Description: %s'      \n    }\n  }\n});\nconsole.log(md.render('![text](video.mp4)'));\n````\n\nOutput:\n\n````html\n\u003cp\u003e\u003cvideo src=\"video.mp4\" controls class=\"html5-video-player\"\u003e\nCannot play video.\nDownload \u003ca href=\"video.mp4\"\u003efile\u003c/a\u003e.\nDescription: text\n\u003c/video\u003e\u003c/p\u003e\n````\n\nIf you only want to change some of the text, you can import the `messages`\nobject from the module and partially alter its contents:\n\n````javascript\nconst { html5Media, messages } = require('markdown-it-html5-media');\nmessages.en['html5 vide not supported'] = 'Cannot play video.';\n````\n\n## Translation\n\nMarkdown-It supports passing along environment options, like so:\n\n````javascript\nmd.render('![some text](video.mp4)', {\n  language: 'en'\n});\n````\n\nThis library will look up messages using the  `language` key as in the example provided, or `'en'` if none is provided. Only English messages are included with the library, and the built-in translation function falls back to English if a translation cannot be found.\n\nYou can provide additional translations using the approach in the previous example, or you can override the internal translation function, like so:\n\n````javascript\nmd.use(html5Media, { translateFn: someFunction });\n````\n\nFunction documentation:\n\n````javascript\n/**\n * @param {String} language\n *  a language code, typically an ISO 639-[1-3] code.\n * @param {String} messageKey\n *  an identifier for the message, typically a short descriptive text\n * @param {String[]} messageParams\n *  Strings to be substituted into the message using some pattern, e.g., %s or\n *  %1$s, %2$s. By default we only use a simple %s pattern.\n * @returns {String}\n *  the translation to use\n */\nfunction translateFn(language, messageKey, messageParams) {\n  // Your code here\n}\n````\n\n## Anything else?\n\nThe module is written in modern JavaScript. The version in `dist/` is transpiled\ndown to ES5 compatible with recent browsers. Use `npm run build` to update the\nbuild (does not change contents of `dist`; use `npm run dist` to build \u0026 dist).\n\nYou can find the automatically generated documentation [here](https://eloquence.github.io/markdown-it-html5-media/HTML5Media.html).\nUse `npm run docs` to regenerate it (changes contents of `docs`, which is\ntracked).\n\nThis library overrides Markdown-It's image tokenizer, which means that it\nduplicates portions of that particular Markdown-It code. If you can think of a\nbetter way to do what it does without scanning the whole token stream, please go\nahead and file an issue or send a PR.\n\nStrings should be escaped where they ought to be, but see the provided tests\nfor yourself. Use at your own risk. :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feloquence%2Fmarkdown-it-html5-media","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feloquence%2Fmarkdown-it-html5-media","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feloquence%2Fmarkdown-it-html5-media/lists"}