https://github.com/dimensiondev/media-viewer
Media Viewer
https://github.com/dimensiondev/media-viewer
Last synced: 7 months ago
JSON representation
Media Viewer
- Host: GitHub
- URL: https://github.com/dimensiondev/media-viewer
- Owner: DimensionDev
- License: mit
- Created: 2021-12-07T09:33:21.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-03-07T04:48:09.000Z (almost 4 years ago)
- Last Synced: 2025-02-15T12:52:52.984Z (12 months ago)
- Language: TypeScript
- Homepage: https://dimensiondev.github.io/Media-Viewer/debug.html
- Size: 995 KB
- Stars: 1
- Watchers: 13
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Media Viewer
## Usage
### HTML
```html
```
### JavaScript
```typescript
const frame = document.createElement('iframe')
frame.addEventListener('load', () => {
frame.contentWindow.postMessage({
type: '[media_type]', // optional
url: '[media_link]',
controls: true, // optional, allow user-control audio/video
})
})
frame.src = 'https://media-viewer.r2d2.to/index.html'
document.body.appendChild(frame)
```
## Examples
| Media Type | Example |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `image/svg` | |
| `modle/gltf+binary` | |
| `image/jpeg` | |
| `video/mp4` | |
| `audio/mp3` | |
## NFT JSON Schema
| Schema | Example |
| ------------------ | ------------------------------------------------------------------------------------------- |
| ERC721 JSON Schema | |
## Parameters
| Name | Type | Description |
| ------------- | ----------- | -----------------------------------------------------------------------------------------------------------------------
| `url` | string | Resource url, or tokenURI if `source === 'erc721'`. |
| `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. |
| `source` | 'erc721' | if `source === 'erc721'`, *Media-Viewer* will treat `url` as a tokenURI. |
| `controls` | boolean | html5 video option. |
| `autoPlay` | boolean | html5 video option. |
| `playsInline` | boolean | html5 video option. |
| `loop` | boolean | html5 video option. |
| `muted` | boolean | html5 video option. |
| `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`. |
```typescript
interface ERC721Token {
contractAddress: string
tokenId: string
rpc: string // the rpc url to send request to the relative chain.
}
```
## LICENSE
[MIT](LICENSE)