# Video
## Overview
The **Video Player module** supports video playback for a number of web compatible formats including:
* HTML5 video
* encoded video streams
* watermarked/forensic supported video playback
The module itself supports a number of settings out of the box, including autoplay, CBLS (cloud based live streaming), and customization options to look and feel of the player.
### CBLS
**CBLS (Cloud Based Live Streaming)** is a Backstage technology for simulating live content. CBLS will play out a video file at a set time to all viewers. This service results in higher quality video, and minimal sub second drift between users typically seen with traditional live streaming.
## **Video Properties**
**Autoplay**\
\&#xNAN;*Checkbox, default `disabled`*\
If enabled, the video will attempt to autoplay when the module loads.
{% hint style="warning" %}
[Browser limitations](https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide) may block autoplay when a user first visits your page. A play button will appear if autoplay is blocked, requiring the user to click to begin playback. For a workaround, see Force Autoplay.
{% endhint %}
#### **Muted**
*Checkbox, default `disabled`*
If enabed, the video will always start muted. Useful for background or accent videos.
**Loop**\
\&#xNAN;*Checkbox, default `disabled`*\
If enabled, a rounded effect will be applied to the corners of the video player module.
**Show video playback controls**\
\&#xNAN;*Checkbox, default `enabled`*\
If enabled, allows guests to use the defined video player's controls.
**Video Type**\
\&#xNAN;*Dropdown, default `Video On Demand (VOD)`*\
Sets the type of video to be streamed on the video player. Options include:
* Video On Demand (VOD)
* Streaming
**Style attribute**\
\&#xNAN;*String, css style property input*\
Can apply additional CSS to customize the switch.
## **For Bitmovin**
Source configuration supports setting the source value of the player with various attributes.
**Poster URL**\
\&#xNAN;*String, url*\
A preview image can be set to be displayed until the video starts. This property accepts a url to an image.
#### For *Video On Demand (VOD)* video sources, additional attributes consist of:
**Progressive**\
\&#xNAN;*String, url*
#### For *Streaming* video sources, additional attributes consist of:
**HLS**\
\&#xNAN;*String, url*
**DASH**\
\&#xNAN;*String, url*
**Is DRM protected**\
\&#xNAN;*Checkbox, default `disabled`*\
If enabled, the video player will attempt to load a video source with a `drmToken`. This is specifically used as a workaround for instances where we load a DRM-protected video without a DRM token.
## Style Properties
**Seekbar Line Color** \
\&#xNAN;*String - Valid color string (`white`) or hex code (`#FFFFF`)*
Allows for setting the color of the video's seekbar line background (applied to both timeline and volume seekbars).
**Accent Color** \
\&#xNAN;*String - Valid color string (`white`) or hex code (`#FFFFF`)*
Allows for setting the accent colors on the video player controls buttons, including the **progress** of the seekbar and volume level.
## **Advanced Options**
**Has Watermark**\
\&#xNAN;*Boolean - `true` / false*
If true, allows for watermark position and the visibility of a watermark on a video, false otherwise.
**Use CBLS**\
\&#xNAN;*Checkbox, default `disabled`*\
If checked, the video asset will play back using CBLS, starting at the same time for all viewers. This property has no affect if the source if a live video.
**CBLS Start Time**\
\&#xNAN;*Date & time*\
Specifies the start date & time of the CBLS playback. Has no affect on live video sources. This attribute only appears within the **Layout Editor** if **Use CBLS** is enabled.
**Force Autoplay**\
\&#xNAN;*Checkbox, default `disabled`*\
If checked, the video will attempt to autoplay. If the browser blocks autoplay, the video player will mute, and the video will automatically play with muted audio.
{% hint style="info" %}
This is a workaround for a [browser limitations](https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide).
{% endhint %}
#### Enable Advanced Analytics
*Checkbox, default `enabled`*
When enabled, sends anonymized video playback data for internal Quality of Experience monitoring via Bitmovin Analytics.
## Timeline Markers
Markers or chapters can be added to your playback timeline to allow viewers to navigate to a specific section of the video.
**Time** (required)\
\&#xNAN;*Number*\
Denotes the time in the video (in seconds). Example: *60*
**Duration**\
\&#xNAN;*Number*\
Denotes the duration (in seconds) that the marker covers, starting from the specified **time** value onwards. Example: *100*
**Image Url**\
\&#xNAN;*String, url*\
Can be used to set a custom image for the marker. If not specified, it falls back on the preview thumbnail.
## Custom Styles
**Style attributes**\
\&#xNAN;*String, css style input*
You may want to add custom styles to the video player for advanced functionality, such as creating a fullscreen background video.
Here's an example of CSS used in the customStyles block to create a full screen background video from a 16:9 video source. If using a different ratio video (such as 4:3), simply replace the ratio values in the calc width/height for .bitmovinplayer-container
```
position:fixed;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:100vw;
height:100vh;
.bmpui-ui-controlbar {
pointer-events:none;
opacity:0;
}
.bitmovinplayer-container {
position: absolute;
padding-top: 0;
overflow: hidden;
height: calc(100vw * 9/16);
width: calc(100vh * 16/9);
left: 50%;
transform: translate(-50%, 0px);
min-height: 100vh;
min-width: 100vw;
}
```
## Nodes
#### Started
**Type:** Broadcaster
Triggers when the video starts playback. Will trigger if the user pauses the video, then resumes playback.
#### Ended
**Type:** Broadcaster
Triggers when the playback of the video reaches the end of the file. For a VOD video this is the end of the duration. For a live video, this is when the broadcaster device (such OBS, VMix, or a similar hardware encoder) is stopped for more than 60 seconds.
#### Metadata
**Type:** Broadcaster
**Data:** The data in the metadata.
Triggers when the playback of the video encounters a metadata frame. These may be added at author time, or be inserted into a live stream.
**Technical Information**
Metadata must be in ID3 format, with binary data encoded in the PRIV frame.
#### setCbls
**Type:** Listener
When pressurized, sets \`Use CBLS\` flag.
#### setStartTime
**Type:** Listener
When pressurized, sets the \`CBLS Start Time\` of the video. \`If Use CBLS is not checked, will have no effect.\`
#### toggleControls
**Type:** Listener
When pressurized, toggles the visibility of the video controls (scrub bar, play / pause, fullscreen, etc).
#### animationState
**Type:** Listener
When pressurized, sets the active animation state of the module.
***
##