1 | <h1>
|
2 | Material UI Player
|
3 | </h1>
|
4 |
|
5 | <p align='center'>
|
6 | Simple React components for playing audio and video, using <a href="https://material-ui.com/">Material UI</a>
|
7 | </p>
|
8 | <ul>
|
9 | <li>AudioCard: Audio element with controls</li>
|
10 | <li>VideoCard: Video element with controls</li>
|
11 | <li>SoundButton: IconButton to only play audio files (ideal for short audios)</li>
|
12 | </ul>
|
13 |
|
14 | ### Usage
|
15 |
|
16 | ```bash
|
17 | npm install material-ui-player # or yarn add material-ui-player
|
18 | ```
|
19 |
|
20 | ```jsx
|
21 | import React from 'react'
|
22 | import { AudioCard, VideoCard } from 'material-ui-player'
|
23 |
|
24 | // Relative URL - play a media from same origin
|
25 | <AudioCard src={'/audio.mp3'} />
|
26 | <VideoCard src={'/video.mp4'} />
|
27 | <SoundButton src={'/audio.mp3'} />
|
28 |
|
29 | // Absolute URL - play a media from external source
|
30 | <AudioCard src={'https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_1MG.mp3'} />
|
31 | <VideoCard src={'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'} />
|
32 | <SoundButton src={'https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_1MG.mp3'} />
|
33 |
|
34 | // Promise retrieve URL
|
35 | <AudioCard src={fetch('<my url>')} />
|
36 | <VideoCard src={fetch('<my url>')} />
|
37 | <SoundButton src={fetch('<my url>')} />
|
38 |
|
39 | ```
|
40 | string | Promise<string> | (() => Promise<string>) | (() => string)
|
41 | ### Props
|
42 |
|
43 | Prop | Description | Default | Component
|
44 | ---- | ----------- | ------- | ---------
|
45 | `src` | `string` or `Promise<string>` or `() => string` or `() => Promise<string>` <br /> - The url of a media to play ◦ Can be a relative or absolute url <br /> A Promise resolved into a string (the url) after Play button clicked. This case can be useful when you are using Firebase Storage, where you need to call an API to retrieve the download Url. | (mandatory) | AudioCard, VideoCard, SoundButton
|
46 | `forward` | Set to `true` or falsy to show forward button | `undefined` | AudioCard, VideoCard
|
47 | `backward` | Set to `true` or falsy to show backward button | `undefined` | AudioCard, VideoCard
|
48 | `autoplay` | Set to `true` or falsy to set autoplay on audio | `undefined` | AudioCard, VideoCard
|
49 | `loop` | Set to `true` or falsy to set loop on audio | `undefined` | AudioCard, VideoCard
|
50 | `width` | Set the width of the player | Audio: `undefined` (fit parent container) <br /> Video: `undefined` (video maintain original size, card fit parent container) | AudioCard, VideoCard
|
51 | `speed` | Set to `true` or falsy to show speed control | `undefined` | AudioCard, VideoCard
|
52 | `mute` | Set to `true` or falsy to show mute button | `undefined` | AudioCard, VideoCard
|
53 | `fadeSettings` | Object with `fadeInTime` and `fadeOutTime` (number, seconds) to fadein and fadeout video | `undefined` | VideoCard
|
54 |
|
55 | #### Callback props
|
56 |
|
57 | Callback props take a function that gets fired on various player events:
|
58 |
|
59 | Prop | Description | Component
|
60 | ---- | ----------- | ---------
|
61 | `onForwardClick` | Called when forward button is clicked | AudioCard, VideoCard
|
62 | `onBackwardClick` | Called when backward button is clicked | AudioCard, VideoCard
|
63 | `onEnded` | Called when media ended | AudioCard, VideoCard
|
64 |
|
65 |
|
66 | #### Please note:
|
67 | This module has following peerDependencies:
|
68 | React (>=17.0.0)
|
69 | Material UI (@material-ui/core: >=4.0.0, @material-ui/icons: >=4.0.0).
|
70 |
|
71 |
|