# Breakroom Video Player

{% embed url="<https://youtu.be/yBSL8K4a5gU?feature=shared>" %}

## Overview

The Breakroom Video Player allows users to access live or pre-recorded video content on demand. Object Owners and users with appropriate [World-](https://docs.breakroom.tech/opening-the-doors/creating-and-managing-user-accounts/world-level-user-permissions) or [Region-level](https://docs.breakroom.tech/opening-the-doors/creating-and-managing-user-accounts/region-level-user-permissions) permissions can also configure playback options and add a splash screen that will be displayed when the video player is not in use.

In your Inventory, you'll see the Breakroom Video Player represented by this icon: <img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2Fq2YUQfizihHQjer9okIK%2FToolkit_Video_Player.png?alt=media&#x26;token=a29d55af-a2a3-4e20-b22b-97a0fd6ecf26" alt="" data-size="line">

For help installing the Breakroom Video Player, please review our information on using the [Region Editor](https://docs.breakroom.tech/creating-custom-experiences/using-the-region-editor).

{% hint style="warning" %}
In order for this Toolkit object to work, you must have the Breakroom conference core components installed in the same Region. If you have uploaded a custom Region, you will need to [install these components manually](https://docs.breakroom.tech/advanced-tutorials/uploading-your-own-region/installing-the-conference-system-components) prior to setting up this object.
{% endhint %}

## Breakroom Video Player user controls

<div data-with-frame="true"><figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FsT4qZqp5LamgwlYkqjSi%2FToolkit_Video_002.png?alt=media&#x26;token=7fdebed4-93ab-4b48-b61b-24d2bad57f18" alt="" width="563"><figcaption><p>Pictured: The Breakroom Video Player control bar.</p></figcaption></figure></div>

Users can control any Breakroom Video Player using the buttons located in the bottom control bar. Videos are displayed on a per-user basis, not streamed openly to the Region as a whole.

<table><thead><tr><th width="189.0909423828125">Control bar button</th><th>Function</th></tr></thead><tbody><tr><td>Play</td><td>Plays the video for the user who clicks it.</td></tr><tr><td>Pause</td><td>Pauses the video for the user who clicks it.</td></tr><tr><td>Stop</td><td>Stops the video for the user who clicks it.</td></tr><tr><td>Zoom In / Zoom Out</td><td>Allows the user to focus on and away from the screen.</td></tr><tr><td>Settings</td><td>Only available to Object Owners and users with appropriate permissions.</td></tr></tbody></table>

## Setting up the Breakroom Video Player

<div data-with-frame="true"><figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FfsPFXeKdQ3jIpKUkF5r2%2FToolkit_Video_003.png?alt=media&#x26;token=3304f19a-118d-4e45-9fa7-5639bb7d3404" alt="" width="563"><figcaption><p>Highlighted: The location of the Breakroom Video Player gear icon.</p></figcaption></figure></div>

The Breakroom Video Player control panel is only accessible to the Object Owner and users with appropriate [World-](https://docs.breakroom.tech/opening-the-doors/creating-and-managing-user-accounts/world-level-user-permissions) or [Region-level](https://docs.breakroom.tech/opening-the-doors/creating-and-managing-user-accounts/region-level-user-permissions) permissions. To access it, click on the **gear icon** in the bottom control bar.

### Adding a splash screen image

<div data-with-frame="true"><figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FOieCGMjDLIeJAtuarAeE%2FToolkit_Video_004.png?alt=media&#x26;token=05d10c7f-93e6-42a6-b3dc-371d6dc99e23" alt="" width="371"><figcaption><p>Pictured: The Breakroom Video Player settings.</p></figcaption></figure></div>

Splash screen image settings are the very first thing you'll see in the Breakroom Video Player control panel. You can either choose an image from your [Media Library](https://docs.breakroom.tech/creating-custom-experiences/managing-your-media-library) or upload a new splash image from your computer.

To set a splash screen for your video player, follow these steps:

1. Locate the Breakroom Video Player object you want to edit.
2. Click on the **gear icon** to open the Breakroom Video Player control panel.
   1. To choose an image you've already uploaded to Breakroom, click the **Image Library button**. This will open the image picker. Click on the **image** you want to use.
   2. To upload a new image from your computer, or click the **Upload New Image button**. This will open a standard file picker on your computer. Locate the image you want to use, click on it, and then click the **Open button**.
3. Your selected image will display in the preview window. When you're satisfied, click the **Save and Close button**.

### Entering a video URL

<div data-with-frame="true"><figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2F8lsOpufSJ3fVCxRwaYkx%2FToolkit_Video_005.png?alt=media&#x26;token=a45fdcf7-dc98-4dbb-b151-e7d7653a2952" alt="" width="348"><figcaption><p>Pictured: The video URL and video settings in the Breakroom Video Player control panel.</p></figcaption></figure></div>

To enter a video URL, follow these steps:

1. Locate the Breakroom Video Player object you want to edit.
2. Click on the **gear icon** to open the Breakroom Video Player control panel.
3. Paste your video URL into the **Video URL field**.
4. Click the **Save and Close button**.

{% hint style="info" icon="camera-movie" %}
**Tips for Best Performance**

For best performance, we recommend hosting your video as an MP4 file on a cloud server (such as [Amazon AWS](https://aws.amazon.com/free)) or uploading it to your [Breakroom Media Library](https://docs.breakroom.tech/creating-custom-experiences/managing-your-media-library). The Breakroom Video Player supports many common video formats, such as MP4 and HLS.

Breakroom does not currently support videos hosted on Vimeo. Due to formatting, DRM, and monetization issues, we do not recommend hosting videos on YouTube.

If you're having trouble getting a particular video to work, you may still be able to play it using the [Breakroom Web Browser](https://docs.breakroom.tech/creating-custom-experiences/exploring-the-breakroom-toolkit/breakroom-web-browser). Please note that playing a video on the web browser object offers a different experience, and that Breakroom cannot track video analytics through the Web Browser object.
{% endhint %}

### Video playback options

The Breakroom Video Player control panel also allows you to customize the way videos are played. You can loop a video, mute a video until users interact with the player, and more.

To edit the video playback options, follow these steps:

1. Locate the Breakroom Video Player object you want to edit.
2. Click on the **gear icon** to open the Breakroom Video Player control panel.
3. Click the **ON or OFF button** located next to each video playback option.
4. Click the **Save and Close button**.

<table><thead><tr><th width="195">Video playback setting</th><th>Function</th></tr></thead><tbody><tr><td>Auto Play</td><td>If set to ON, video will begin playing automatically when users enter the video player <a href="#editing-the-breakroom-video-player-collider-zone">collider zone</a>, and will stop when they exit the zone.</td></tr><tr><td>Loop Video</td><td>If set to ON, video will replay continuously.</td></tr><tr><td>Silent Mode</td><td>If set to ON, video will play with muted audio until a viewer clicks the <a href="#breakroom-video-player-user-controls"><strong>Zoom In button</strong></a>.</td></tr><tr><td>Post FX</td><td>If set to ON, will turn off various graphics settings within the video player <a href="#editing-the-breakroom-video-player-collider-zone">collider zone</a> that could distort the video or on-screen text.</td></tr><tr><td>Pops Out</td><td>If set to ON, video player screen will "pop out" to user screen when users enter the video player <a href="#editing-the-breakroom-video-player-collider-zone">collider zone</a>. The offset and scale of this pop-out screen can be customized by entering values into the associated fields.</td></tr></tbody></table>

## Editing the Breakroom Video Player collider zone

<div data-with-frame="true"><figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FCdCIiok5REWM5kIbI3Vp%2FToolkit_Video_006.png?alt=media&#x26;token=86d0ebf6-8eae-415d-a0b0-59baaeb32d72" alt=""><figcaption><p>Pictured: The Region Editor, with a Breakroom Video Player object selected. The transparent green box indicates the size and location of the collider zone. In the Objects window, you can see that the collider zone object is nested within the Breakroom Video Player object.</p></figcaption></figure></div>

Several advanced features and video playback options are triggered when an avatar enters the Breakroom Video Player collider zone. The size and position of this collider zone can be customized using the Region Editor.

The instructions provided below presume an advanced working knowledge of Breakroom. Please consult our documentation if you need help [installing](https://docs.breakroom.tech/creating-custom-experiences/using-the-region-editor) and [positioning](https://docs.breakroom.tech/creating-custom-experiences/using-the-region-editor/editing-and-moving-objects) virtual objects or editing the [RoomFurniture component](https://docs.breakroom.tech/running-your-event/customizing-the-conference-system-components/the-roomfurniture-component).

To edit the Breakroom Video Player collider zone, follow these steps:

1. Open the Region Editor by clicking the **Edit Region button** in the [top toolbar](https://docs.breakroom.tech/getting-started/ui-tour#the-top-toolbar).
2. Locate the Breakroom Video Player object you want to edit. Click on it to highlight it in the **Objects window**.
3. In the Objects window, click the **> arrow** to the left of the Breakroom Video Player object to expand it. Then click on the **Collider component.**
4. Using the [Region Editor tools](https://docs.breakroom.tech/creating-custom-experiences/using-the-region-editor/editing-and-moving-objects) or the [Transform component](https://docs.breakroom.tech/using-the-region-editor/editing-and-moving-objects#editing-the-transform-component), move, rotate, and resize the collider to meet your specifications.
5. When you are satisfied, click the **Save button** to store your changes.