# Video

Video feature helps not only to enable pre-recorded web videos, but also live streams to improve the user engagement. To get started prepare a GameObject with a VideoView and GuidComponent.

<figure><img src="https://4213294372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo4sRWPX77c58Cw1FjKCI%2Fuploads%2FayxWpFnVyskoxK0Wcuih%2FCapture.PNG?alt=media&#x26;token=283191c3-5fc4-4b9d-9c65-18b1ba8380ae" alt=""><figcaption></figcaption></figure>

Then, create an empty GameObject under it and name it "Thumbnail Image View".

<figure><img src="https://4213294372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo4sRWPX77c58Cw1FjKCI%2Fuploads%2F9sEFOvfne3sa6b6Etpnj%2FCapture.PNG?alt=media&#x26;token=2355d782-bb63-4082-ac0c-b16bc284b6c8" alt=""><figcaption></figcaption></figure>

&#x20;Attatch an ImageView, GuidComponent, and a NetworkImage.&#x20;

<figure><img src="https://4213294372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo4sRWPX77c58Cw1FjKCI%2Fuploads%2FmGWpZZZrocZiAfzEcA6n%2FCapture.PNG?alt=media&#x26;token=c583c3c4-e9ae-4403-bf45-a6396dc659e4" alt=""><figcaption></figcaption></figure>

The value (string) is the url of the video.

Assign this object into VideoView's Image View property field.&#x20;

<figure><img src="https://4213294372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo4sRWPX77c58Cw1FjKCI%2Fuploads%2FNZHgTazadt9NDVbpKCyo%2FCapture.PNG?alt=media&#x26;token=29d9bdb5-ef96-4170-9d30-a951da8deba3" alt=""><figcaption></figcaption></figure>

Here the Video feature has a bit more than other features in terms of variables. For this reason, a table below is provided to explain the important variables:

<table><thead><tr><th width="225">Variable Name</th><th>Description</th></tr></thead><tbody><tr><td>Value</td><td>It can be any mp4 or m3u8 source. Others are supported, but we are not aware of performance and compatibility of this. The m3u8 sources are usually live stream sources</td></tr><tr><td>Thumbnail Behavior</td><td>Currently only 4 behaviors are supported: None, Download, Custom, and Generate.<br><br><strong>None:</strong> On start the mesh renderer where a video is supposed to be will have the initial texture, then after watching a video it turn black<br><br><strong>Download:</strong> Video player on start and on stop will try to fetch a jpg image at the same path with the name and just different extension to use it as thumbnail. For example, if video path is https://cdn.holofair.net/demo.mp4 then it will try to download https://cdn.holofair.net/demo.jpg. It also means you will be required to prepare or upload jpg image with the video.<br><br><strong>Custom:</strong> The video player on start and on stop will make use of Image feature, which customization must be configured like described in the page about <a href="image">Images</a>.<br><br><strong>Generate:</strong></td></tr><tr><td>Is Full Screen On Play</td><td>Whether the video should open full screen whenever user tries to watch it.</td></tr><tr><td>Loading Visual (optional)</td><td>Assign a gameObject that will represent that video is loading</td></tr><tr><td>ImageModel (optional)</td><td>Assign here an Image feature gameObject that will be responsible for assigning a thumbnail whenever video is not watched by a user</td></tr></tbody></table>

VideoView has a few function that you'll need:

<table><thead><tr><th width="200">Function</th><th>Functionality</th></tr></thead><tbody><tr><td>Play</td><td>Starts playing the video.</td></tr><tr><td>Stop</td><td>Stops the video.</td></tr><tr><td>Toggle</td><td>Toggles between Play state and Stop state.</td></tr><tr><td>SetFullScreen</td><td>Enable or disable fullscreen view of the video. (Should be called while the video is playing)</td></tr><tr><td>RefreshThumbnail</td><td>Reapplies the thumbnail to the MeshRenderer the video was being played on. (This is automatically called after the video stops)</td></tr></tbody></table>

<figure><img src="https://4213294372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo4sRWPX77c58Cw1FjKCI%2Fuploads%2FobncCouip4hJvFqnEGmj%2F2023-02-20%2010-45-17_Trim.gif?alt=media&#x26;token=8ccea63e-a7bd-4ca9-bfbc-08be97a192bd" alt=""><figcaption><p>Watching a video in HoloFair</p></figcaption></figure>