{"id":17399236,"url":"https://github.com/feross/render-media","last_synced_at":"2025-04-12T16:35:51.287Z","repository":{"id":50767045,"uuid":"48767872","full_name":"feross/render-media","owner":"feross","description":"Intelligently render media files in the browser","archived":false,"fork":false,"pushed_at":"2021-05-30T14:43:59.000Z","size":118,"stargazers_count":210,"open_issues_count":7,"forks_count":29,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-03T16:14:14.248Z","etag":null,"topics":["audio","browser","browserify","file","javascript","media","mediasource","play","render","stream","streaming","video"],"latest_commit_sha":null,"homepage":"https://webtorrent.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/feross.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-29T21:26:53.000Z","updated_at":"2025-02-01T10:14:09.000Z","dependencies_parsed_at":"2022-09-11T18:23:17.320Z","dependency_job_id":null,"html_url":"https://github.com/feross/render-media","commit_stats":null,"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feross%2Frender-media","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feross%2Frender-media/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feross%2Frender-media/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feross%2Frender-media/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/feross","download_url":"https://codeload.github.com/feross/render-media/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248597208,"owners_count":21130832,"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","browser","browserify","file","javascript","media","mediasource","play","render","stream","streaming","video"],"created_at":"2024-10-16T15:13:45.118Z","updated_at":"2025-04-12T16:35:51.255Z","avatar_url":"https://github.com/feross.png","language":"JavaScript","readme":"# render-media [![travis][travis-image]][travis-url] [![npm][npm-image]][npm-url] [![downloads][downloads-image]][downloads-url] [![javascript style guide][standard-image]][standard-url]\n\n[travis-image]: https://img.shields.io/travis/feross/render-media/master.svg\n[travis-url]: https://travis-ci.org/feross/render-media\n[npm-image]: https://img.shields.io/npm/v/render-media.svg\n[npm-url]: https://npmjs.org/package/render-media\n[downloads-image]: https://img.shields.io/npm/dm/render-media.svg\n[downloads-url]: https://npmjs.org/package/render-media\n[standard-image]: https://img.shields.io/badge/code_style-standard-brightgreen.svg\n[standard-url]: https://standardjs.com\n\n#### Intelligently render media files in the browser\n\n[![Sauce Test Status](https://saucelabs.com/browser-matrix/render-media.svg)](https://saucelabs.com/u/render-media)\n\nShow the file in a the browser by appending it to the DOM. This is a powerful\npackage that handles many file types like video (.mp4, .webm, .m4v, etc.), audio\n(.m4a, .mp3, .wav, etc.), images (.jpg, .gif, .png, etc.), and other file formats\n(.pdf, .md, .txt, etc.).\n\nThe file will be streamed into the page (if it's video or audio). Seeking the media\nelement will request a different byte range from the incoming file-like object.\n\nIn some cases, video or audio files will not be streamable because they're not in a\nformat that the browser can stream, so the file will be fully downloaded before being\nplayed. For other non-streamable file types like images and PDFs, the file will be\ndownloaded then displayed.\n\nThis module is used by [WebTorrent](https://webtorrent.io).\n\n### install\n\n```\nnpm install render-media\n```\n\n### usage\n\n```js\nvar render = require('render-media')\nvar from = require('from2')\n\nvar img = new Buffer('some jpg image data')\n\nvar file = {\n  name: 'cat.jpg',\n  createReadStream: function (opts) {\n    if (!opts) opts = {}\n    return from([ img.slice(opts.start || 0, opts.end || (img.length - 1)) ])\n  }\n}\n\nrender.append(file, 'body', function (err, elem) {\n  if (err) return console.error(err.message)\n\n  console.log(elem) // this is the newly created element with the media in it\n})\n```\n\n### api\n\n#### `render.append(file, rootElem, [opts], [function callback (err, elem) {}])`\n\n`file` is an object with a `name` (string, with file extension) and `createReadStream`\nmethod which provides the file data.\n\nHere's an example file:\n\n```js\nvar file = {\n  name: 'file.mp4'\n  createReadStream: function (opts) {\n    var start = opts.start\n    var end = opts.end\n    // Return a readable stream that provides the bytes between offsets \"start\"\n    // and \"end\" inclusive. This works just like fs.createReadStream(opts) from\n    // the node.js \"fs\" module.\n  }\n}\n```\n\nAn optional `file.length` property can also be set to specify the length of the\nfile in bytes. This will ensure that `render-media` does not attempt to load large\nfiles (\u003e200 MB by default) into memory, which it does in the \"blob\" strategy. (See discussion\nof strategies below.)\n\n`rootElem` is a container element (CSS selector or reference to DOM node) that the\ncontent will be shown in. A new DOM node will be created for the content and\nappended to `rootElem`.\n\nIf provided, `opts` can contain the following options:\n\n- `autoplay`: Autoplay video/audio files (default: `false`)\n- `muted`: Mute video/audio files (default: `false`)\n- `controls`: Show video/audio player controls (default: `true`)\n- `maxBlobLength`: Files above this size will skip the \"blob\" strategy and fail (default: `200 * 1000 * 1000` bytes)\n\nNote: Modern browsers tend to block media that autoplays with audio (here's the\n[Chrome policy](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)\nfor instance) so if you set `autoplay` to `true`, it's a good idea to also set\n`muted` to `true`.\n\nIf provided, `callback` will be called once the file is visible to the user.\n`callback` is called with an `Error` (or `null`) and the new DOM node that is\ndisplaying the content.\n\n#### `render.render(file, elem, [opts], [function callback (err, elem) {}])`\n\nLike `render.append` but renders directly into given element (or CSS selector).\n\n\n### why does video/audio streaming not work on file X?\n\nStreaming support depends on support for `MediaSource` API in the browser. All\nmodern browsers have `MediaSource` support.\n\nMany file types are supported (again, depending on browser support), but only `.mp4`,\n`.m4v`, and `.m4a` have full support, including seeking.\n\n### rendering strategies\n\nFor video and audio, `render-media` tries multiple methods of playing the file:\n\n- [`videostream`][videostream] -- best option, supports streaming **with seeking**,\n  but only works with MP4-based files for now (uses `MediaSource` API)\n- [`mediasource`][mediasource] -- supports more formats, supports streaming\n  **without seeking** (uses `MediaSource` API)\n- Blob URL -- supports the most formats of all (anything the `\u003cvideo\u003e` tag supports\n  from an http url), **with seeking**, but **does not support streaming** (entire\n  file must be downloaded first)\n\n[videostream]: https://www.npmjs.com/package/videostream\n[mediasource]: https://www.npmjs.com/package/mediasource\n\nThe Blob URL strategy will not be attempted if the file is over\n`opts.maxBlobLength` (200 MB by default) since it requires the entire file to be\ndownloaded before playback can start which gives the appearance of the `\u003cvideo\u003e`\ntag being stalled. If you increase the size, be sure to indicate loading progress\nto the user in the UI somehow.\n\nFor other media formats, like images, the file is just added to the DOM.\n\nFor text-based formats, like html files, pdfs, etc., the file is added to the DOM\nvia a sandboxed `\u003ciframe\u003e` tag.\n\n### license\n\nMIT. Copyright (c) [Feross Aboukhadijeh](http://feross.org).\n\n[travis-image]: https://img.shields.io/travis/feross/render-media/master.svg\n[travis-url]: https://travis-ci.org/feross/render-media\n[npm-image]: https://img.shields.io/npm/v/render-media.svg\n[npm-url]: https://npmjs.org/package/render-media\n[downloads-image]: https://img.shields.io/npm/dm/render-media.svg\n[downloads-url]: https://npmjs.org/package/render-media\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffeross%2Frender-media","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffeross%2Frender-media","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffeross%2Frender-media/lists"}