# VideoPlayer

Source: https://developer.nylas.com/docs/v3/components/notetaker-components/videoplayer-component/

The `VideoPlayer` component displays and controls playback of meeting recordings captured by Notetaker. It wraps a native HTML5 video element and supports common features like autoplay, mute, looping, and native controls.

## Using the `VideoPlayer` component

```jsx

import React from "react";
import { VideoPlayer } from "@nylas/react";
// import '@nylas/react/style.css' // to style the component

function App() {
  return (
    <VideoPlayer
      videoUrl="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
      className="custom-video-player"
      poster="https://via.placeholder.com/640x360.png?text=Video+Poster"
      autoPlay={false}
      muted={false}
      loop={false}
      videoType="video/mp4"
      onTimeUpdate={(currentTime) => console.log("Time update:", currentTime)}
      onSeek={(newTime) => console.log("Seeked to:", newTime)}
      onPlay={() => console.log("Video started playing")}
      onPause={() => console.log("Video paused")}
      onEnded={() => console.log("Video ended")}
    />
  );
}

export default App;


```

### Integrating with `Transcript` component

When you use the `VideoPlayer` and [`Transcript`](/docs/v3/components/notetaker-components/transcript-component/) components on the same page, they automatically synchronize. This means...

- Clicking on a timestamp in the transcript will seek the video recording to that position.
- The transcript will automatically scroll to and highlight the current segment as the recording plays.
- Seeking in the video player updates the active transcript segment.

## `VideoPlayer` properties

### `autoPlay?`

|                 |                                               |
| --------------- | --------------------------------------------- |
| **Description** | Set the video to start playing automatically. |
| **Type**        | `boolean`                                     |
| **Default**     | `false`                                       |

### `className?`

|                 |                                                           |
| --------------- | --------------------------------------------------------- |
| **Description** | One or more additional class names for the video element. |
| **Type**        | `string`                                                  |

### `loop?`

|                 |                                                           |
| --------------- | --------------------------------------------------------- |
| **Description** | Set the video to loop back to the beginning when it ends. |
| **Type**        | `boolean`                                                 |
| **Default**     | `false`                                                   |

### `muted?`

|                 |                              |
| --------------- | ---------------------------- |
| **Description** | Mute the sound on the video. |
| **Type**        | `boolean`                    |
| **Default**     | `false`                      |

### `onEnded?`

|                 |                                                    |
| --------------- | -------------------------------------------------- |
| **Description** | A callback generated when the video playback ends. |
| **Type**        | `() => void`                                       |

### `onPause?`

|                 |                                                      |
| --------------- | ---------------------------------------------------- |
| **Description** | A callback generated when the user pauses the video. |
| **Type**        | `() => void`                                         |

### `onPlay?`

|                 |                                                     |
| --------------- | --------------------------------------------------- |
| **Description** | A callback generated when the video starts playing. |
| **Type**        | `() => void`                                        |

### `onSeek?`

|                 |                                                                                                            |
| --------------- | ---------------------------------------------------------------------------------------------------------- |
| **Description** | A callback generated when the user moves to a new time in the recording. Receives the new time in seconds. |
| **Type**        | `(newTime: number) => void`                                                                                |

### `onTimeUpdate?`

|                 |                                                                                            |
| --------------- | ------------------------------------------------------------------------------------------ |
| **Description** | A callback generated for every time update. Receives the current playback time in seconds. |
| **Type**        | `(currentTime: number) => void`                                                            |

### `poster?`

|                 |                                                            |
| --------------- | ---------------------------------------------------------- |
| **Description** | The URL of the image that displays before the video plays. |
| **Type**        | `string`                                                   |

### `videoType?`

|                 |                                                                                                                              |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **Description** | The MIME type of the video (for example, `'video/mp4'`). Used for the `<source>` tag if [`videoUrl`](#videourl) is provided. |
| **Type**        | `string`                                                                                                                     |

### `videoUrl`

|                 |                                                                                |
| --------------- | ------------------------------------------------------------------------------ |
| **Description** | The URL of the video. If provided, a `<source>` tag is rendered with this URL. |
| **Type**        | `string`                                                                       |