# Video \*

### Installation

{% hint style="info" %}
 This component is not included by default, to use it import the following package:
{% endhint %}

{% tabs %}
{% tab title="NPM" %}

```bash
$ npm i react-ult-ext-video
```

{% endtab %}

{% tab title="Yarn" %}

```
$ yarn add react-ult-ext-video
```

{% endtab %}
{% endtabs %}

### Styles

* Flexbox Styles
* View Styles
* Transform Styles

### Props

| Name                   | Type                                     | Description                                                                                                                                     |
| ---------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| **accessibilityLabel** | `string`                                 | <ul><li>Alternate text to display if the image cannot be loaded or by screen readers</li></ul>                                                  |
| **authToken**          | `string`                                 | <ul><li> Authentication token to include in request (not supported on some React Native implementations)</li></ul>                              |
| **loop**               | `boolean`                                | <ul><li>Should video playback loop to beginning after it completes?</li></ul>                                                                   |
| **onBuffer**           | `() => void`                             | <ul><li>Called when the video is paused for buffering</li></ul>                                                                                 |
| **onCanPlay**          | `() => void`                             | <ul><li>Called when enough of the video has been loaded that playback is possible</li></ul>                                                     |
| **onCanPlayThrough**   | `() => void`                             | <ul><li>Called when enough of the video has been loaded that playback can proceed all the way to the end without buffering pauses</li></ul>     |
| **onEnded**            | `() => void`                             | <ul><li>Called when the video playback reaches the end</li></ul>                                                                                |
| **onError**            | `() => void`                             | <ul><li>Called when the video cannot be loaded</li></ul>                                                                                        |
| **onLoadedData**       | `(info: VideoInfo) => void`              | <ul><li>Called when the video's metadata has been loaded; returns information about the video</li></ul>                                         |
| **onLoadStart**        | `() => void`                             | <ul><li>Called when the video data is starting to load</li></ul>                                                                                |
| **onProgress**         | `(progress: VideoProgress) => void`      | <ul><li>Called periodically when the video is playing; reports progress information</li></ul>                                                   |
| **preload**            | `'auto'\|'metadata'\|'none'`             | <ul><li>Indiciates which portion of the video should be pre-loaded when the component is mounted</li></ul>                                      |
| **resizeMode**         | `'contain'\|'cover'\|'stretch'`          | <ul><li>Determines how to resize the image if its natural size does not match the size of the container</li></ul>                               |
| **showControls**       | `boolean`                                | <ul><li>Displays controls for play, pause, etc.</li></ul>                                                                                       |
| **source**             | `string \| number`                       | <ul><li>Source of video (URL) or resource <code>id</code> as resolved by <code>require()</code> for <code>react-native</code> targets</li></ul> |
| **style**              | `ViewStyleRuleSet \| ViewStyleRuleSet[]` | <ul><li>See above for supported styles</li></ul>                                                                                                |

###