Adding Videos to Your Site
Last updated
Was this helpful?
Last updated
Was this helpful?
Use Backstage's Video module to embed a video or live stream anywhere on your Site's design and template pages. It currently supports the following video formats:
HTML5 video
encoded video streams (HLS, DASH)
You can also use configure the Video module for a number of settings, including autoplay and CBLS (cloud based live streaming).
A Video module can be added to a Site or Template design from your Layout Editor. In the navigation bar on the left, you can drag and drop a Video module onto your page from the Media Types category of your Modules tab.
The Video module lets you stream two types of video sources:
Video On Demand (VOD) - For video files.
Streaming - For live video being delivered via streaming server.
Select which type of video source you are adding from the Video Type dropdown. The Layout Editor will show the necessary properties you will need to define based on selected Video Type:
Video On Demand (VOD) requires a Progressive Streaming link. Paste in a URL to any .MP4, .WebM, or .Ogg video file hosted in your Backstage Asset Library or from a third-party file host into the Progressive.
Streaming requires adaptive bitrate streaming links. Paste in the appropriate URLs into HLS and DASH.
You can also set a preview image to display on the video player until the video starts by pasting in the URL of your intended image into Poster URL.
Click Save Changes and the Video module will update with your new preview image and video source.
Once you add a Video Module onto your page, you’ll can also customize your video player to change its look, colors, and player controls. Click the Video module to pull up the Settings panel.
The following properties can be set to format your player:
Seekbar Line Color -Allows for setting the color of the video's seekbar line background (applied to both timeline and volume seekbars).
Accent Color - Allows for setting the accent colors on the video player controls buttons, including the progress of the seekbar and volume level.
Markers or chapters can be added to your playback timeline to let your viewers to navigate to a specific section of the video. In the Video module settings, find the Timeline Markers section:
Press the Add Item button to add your first marker. The Settings panel will update with properties to set up your marker:
Set the Time* (in seconds) in the video when you want your marker to appear in the timeline, and the Duration* (in seconds) that you want the marker to cover.
You can also set a custom image for the marker's preview thumbnail by adding an Image Url.
Once you're done creating your marker(s), click Save Changes to update the Video module.
If you want your video to automatically start playing when the module loads, you can turn on Autoplay in your Video module settings.
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.
Heads up!
CBLS is only supported for Video on Demand (VOD) sources, and has no affect on live video.
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.
To enable CBLS, scroll down the Video module settings and find the Advanced Options:
Turn on Use CBLS, and the Settings panel will update to show CBLS Start Time.
Then, click the calendar icon in CBLS Start Time to set your start date & time for the CBLS playback.
Once you have set a start time, click Save Changes to update your Video module.
