Video

A video module in layout editor (left) and the video player with controls enabled in guests' view (right)

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 Checkbox, default disabled If enabled, the video will attempt to autoplay when the module loads.

Browser limitations 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.

Muted

Checkbox, default disabled

If enabed, the video will always start muted. Useful for background or accent videos.

Loop Checkbox, default disabled If enabled, a rounded effect will be applied to the corners of the video player module.

Show video playback controls Checkbox, default enabled If enabled, allows guests to use the defined video player's controls.

Control buttons available on the video player

Video Type 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 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 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 String, url

For Streaming video sources, additional attributes consist of:

HLS String, url

DASH String, url

Is DRM protected 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 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 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 Boolean - true / false

If true, allows for watermark position and the visibility of a watermark on a video, false otherwise.

Video player with watermark enabled to show "Prepared for firstName lastName"

Use CBLS 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 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 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.

This is a workaround for a browser limitations.

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) Number Denotes the time in the video (in seconds). Example: 60

Duration Number Denotes the duration (in seconds) that the marker covers, starting from the specified time value onwards. Example: 100

Image Url 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 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.

---