{"id":18340430,"url":"https://github.com/dimensiondev/media-viewer","last_synced_at":"2025-07-03T09:05:15.282Z","repository":{"id":45146316,"uuid":"435819507","full_name":"DimensionDev/Media-Viewer","owner":"DimensionDev","description":"Media Viewer","archived":false,"fork":false,"pushed_at":"2022-03-07T04:48:09.000Z","size":1019,"stargazers_count":1,"open_issues_count":1,"forks_count":2,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-02-15T12:52:52.984Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://dimensiondev.github.io/Media-Viewer/debug.html","language":"TypeScript","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/DimensionDev.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":"2021-12-07T09:33:21.000Z","updated_at":"2022-10-24T23:23:39.000Z","dependencies_parsed_at":"2022-09-24T20:12:15.256Z","dependency_job_id":null,"html_url":"https://github.com/DimensionDev/Media-Viewer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DimensionDev%2FMedia-Viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DimensionDev%2FMedia-Viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DimensionDev%2FMedia-Viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DimensionDev%2FMedia-Viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DimensionDev","download_url":"https://codeload.github.com/DimensionDev/Media-Viewer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248110642,"owners_count":21049525,"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":[],"created_at":"2024-11-05T20:22:31.444Z","updated_at":"2025-04-09T20:43:43.546Z","avatar_url":"https://github.com/DimensionDev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Media Viewer\n\n## Usage\n\n### HTML\n\n```html\n\u003ciframe src=\"https://media-viewer.r2d2.to/index.html?url=[media_link]\" /\u003e\n```\n\n### JavaScript\n\n```typescript\nconst frame = document.createElement('iframe')\n\nframe.addEventListener('load', () =\u003e {\n  frame.contentWindow.postMessage({\n    type: '[media_type]', // optional\n    url: '[media_link]',\n    controls: true, // optional, allow user-control audio/video\n  })\n})\nframe.src = 'https://media-viewer.r2d2.to/index.html'\ndocument.body.appendChild(frame)\n```\n\n## Examples\n\n| Media Type          | Example                                                                                                                                                                                     |\n| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `image/svg`         | \u003chttps://media-viewer.r2d2.to/index.html?url=https://storage.opensea.io/files/8b38f04c8bbe079abb8a8a954ead6f8b.svg\u003e                                                                         |\n| `modle/gltf+binary` | \u003chttps://media-viewer.r2d2.to/index.html?url=https://storage.opensea.io/files/acb109c417a5043f45204fe0c69d2f92.gltf\u003e                                                                        |\n| `image/jpeg`        | \u003chttps://media-viewer.r2d2.to/index.html?url=https://lh3.googleusercontent.com/L0h_MmnLMemsF-Y7qM36_PJagkU4-mRT4LONgNcEmyMdUYwPFlNOWQmXmE5gL879pvsnCA_ElZ4em-Juuur99kFb0X6sukuH3f9y4g=w600\u003e |\n| `video/mp4`         | \u003chttps://media-viewer.r2d2.to/index.html?url=https://storage.opensea.io/files/11e764af044ac519558db4ceaae837e5.mp4#t=0.001\u003e                                                                 |\n| `audio/mp3`         | \u003chttps://media-viewer.r2d2.to/index.html?url=https://storage.opensea.io/files/959fd620a51c4604723e7b10b99be7f9.mp3\u003e                                                                         |\n\n## NFT JSON Schema\n\n| Schema             | Example                                                                                     |\n| ------------------ | ------------------------------------------------------------------------------------------- |\n| ERC721 JSON Schema | \u003chttps://media-viewer.r2d2.to/index.html?url=https://www.cyberkongz.com/api/metadata-vx/15\u0026source=erc721\u003e |\n\n## Parameters\n\n| Name          | Type        | Description                                                                                                             |\n| ------------- | ----------- | -----------------------------------------------------------------------------------------------------------------------\n| `url`         | string      | Resource url, or tokenURI if `source === 'erc721'`.                                                                     |\n| `type`        | string      | Predefined content type of the resource to determine which html element to render, if it is absent *Media-Viewer* will get the content type from response header through an extra query, so recommand add one if you know what type of resource is in advance. |\n| `source`      | 'erc721'    | if  `source === 'erc721'`, *Media-Viewer* will treat `url` as a tokenURI.                                                  |\n| `controls`    | boolean     | html5 video option. |\n| `autoPlay`    | boolean     | html5 video option. |\n| `playsInline` | boolean     | html5 video option. |\n| `loop`        | boolean     | html5 video option. |\n| `muted`       | boolean     | html5 video option. |\n| `erc721Token` | ERC721Token | if `url` is provided, *Media-Viewer* will ignore this parameter, otherwise it will fetch the NFT resource by the `tokenId` and `address` of `erc721Token` through its `rpc`. |\n\n```typescript\ninterface ERC721Token {\n    contractAddress: string\n    tokenId: string\n    rpc: string // the rpc url to send request to the relative chain.\n}\n```\n\n\n## LICENSE\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimensiondev%2Fmedia-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdimensiondev%2Fmedia-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimensiondev%2Fmedia-viewer/lists"}