> For the complete documentation index, see [llms.txt](https://outreal-xr.gitbook.io/holofair-sdk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://outreal-xr.gitbook.io/holofair-sdk/development/features/video.md).

# Video

Enable web video or livestreams with custom thumbnail for your users

Video feature helps not only to enable pre-recorded web videos, but also live streams to improve the user engagement. As well as the other features it comes with Edit capabilites, to make the world more recycle for more than a single purpose or make your content more dynamic. To get started prepare a gameObject with following components:&#x20;

<figure><img src="https://2540630353-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fk4EogWusoxJQBt7VlQ6B%2Fuploads%2FSocQT7nGwqGau2tFaZJH%2FVideoOverviewExample.JPG?alt=media&amp;token=7b2893b9-d286-4264-bbea-0fe6bf013d50" alt=""><figcaption><p>Overview</p></figcaption></figure>

And here is a closer look to the VideoModel and BasicVideoView:

<figure><img src="https://2540630353-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fk4EogWusoxJQBt7VlQ6B%2Fuploads%2FbTrqCzoZJBpVnrMC7AQO%2FVideoCloseExample.JPG?alt=media&amp;token=a4997169-2036-47b0-a564-d7d17608219f" 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:

| Variable Name             | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Value                     | 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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| Thumbnail Behavior        | <p>Currently only 3 behaviors are supported: None, Download and Custom.<br><br>None: 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>Download: 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>Custom: 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="/holofair-sdk/development/features/image.md">Images</a>.</p> |
| Is Full Screen On Play    | Whether the video should open full screen whenever user tries to watch it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| Loading Visual (optional) | Assign a gameObject that will represent that video is loading                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| ImageModel (optional)     | Assign here an Image feature gameObject that will be responsible for assigning a thumbnail whenever video is not watched by a user                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |

Apart from that, make sure to add **ON THE SAME GAMEOBJECT** NetworkImageMeshRenderer component and configure it according to how you want a video to be displayed on a MeshRenderer:

<figure><img src="https://2540630353-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fk4EogWusoxJQBt7VlQ6B%2Fuploads%2FD1UparTjPg86S4eO9mKQ%2FVideoMeshRendererRequired.JPG?alt=media&amp;token=be98d667-75ef-4dd5-b667-d3c920af5b26" alt=""><figcaption><p>It doesn't need to be assigned anywhere, because HoloFair does GameObject.GetComponent&#x3C;NetworkImageMeshRenderer>() whenever user starts watching a video</p></figcaption></figure>

Now, how to actually allow user to watch a video? To achieve that, you need a trigger that does BasicVideoView\.TogglePlay(). In this example, 2 triggers are used to allow user to start watching the video in 2 different ways: click on the collider or enter a trigger. See the images below:

<figure><img src="https://2540630353-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fk4EogWusoxJQBt7VlQ6B%2Fuploads%2FI0oQrFzGeueaTEj1NeVq%2FVideoPlayOnClick.JPG?alt=media&amp;token=b9cc8a60-7496-46ce-9438-b1c21969c282" alt=""><figcaption><p>Toggle Play on Click</p></figcaption></figure>

<figure><img src="https://2540630353-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fk4EogWusoxJQBt7VlQ6B%2Fuploads%2Fh9sjSb5Lf6IBuxjjAC4C%2FVideoPlayOnTrigger.JPG?alt=media&amp;token=dbe4932e-b5a3-4a2a-a323-8c4ae34a5d6a" alt=""><figcaption><p>Toggle Play on Trigger Enter</p></figcaption></figure>

Don't forget to Edit button to make sure you can replace the video in real-time:

<figure><img src="https://2540630353-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fk4EogWusoxJQBt7VlQ6B%2Fuploads%2F0WEwttAHxe2rpTGjyWmd%2FVideoEditOnClick.JPG?alt=media&amp;token=7a84c651-ae38-49c6-be16-8bfc6877330e" alt=""><figcaption></figcaption></figure>

See the video below to see how it works in HoloFair:

{% embed url="<https://youtu.be/U6OQuLiY4ZE>" %}
