# Advanced video mode

<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

<span className="pill_media">Zoom Contact Center only</span>

Customize your video client with advanced controls. For example, you can create your own button to start the video client and add actions to perform after the video has ended.

## VideoClient API

Use the following methods to create, initialize, and control the video client programmatically.

To create and initialize a video client, create a `VideoClient` instance and call `init()`, replacing `entryId` with your entry ID.

```javascript
new VideoClient({});

await videoClient.init({
    entryId,
    name: "name", // optional field, omit if not using, null value not accepted
});
```

To trigger the video flow, call `startVideo()`.

```javascript
videoClient.startVideo();
```

### VideoClient events

The video client supports these events:

| Event                    | Description                       |
| ------------------------ | --------------------------------- |
| `video-start`            | Video started.                    |
| `video-end`              | Video ended.                      |
| `notification-join-call` | User notified to join video.      |
| `video-click-end`        | User clicked button to end video. |
| `video-force-end`        | User's video forcefully ended.    |
| `task-created`           | A task was created.               |

## Custom video button

This code creates a custom button element, listens for clicks, and initializes and starts the video client when the button is clicked.

```html
<!DOCTYPE html>
<!-- other page elements -->
    create video
    <script src="https://test.example.com/sample/web-sdk/video-client.js">
    </script>
    <script>
      (() => {
        const dom = document.getElementById('create')
        dom.addEventListener('click', async () => {
          const entryId = "Your entry id"
          const videoClient = new VideoClient({
          });
          await videoClient.init({
            entryId,
            name: 'name' // optional field, omit if not using, null value not accepted
          });
          videoClient.startVideo()
          videoClient.on('video-end', () => {
            console.log('video ended')
            // Add any actions to perform when the video ends
          })
        })
      })()
    </script>
<!-- other page elements -->
</html>
```
