This Video.js library-based video player plugin offers a comprehensive range of features for an immersive video playback experience. It comes with audio player and audio/video recorder feature that empowers you to deliver a rich and engaging video experience on your website while offering a wide array of customization and integration options to suit your needs.
Key features:
Play, pause, stop, and control playback speed.
URL, Vimeo, Youtube video support
Picture-in-picture mode
Wide format support (mp4, webM, HLS (HTTP Live Streaming), Ogg)
Zoom in/out
Disable Right Clicking
Disable Auto-Fullscreen (ios)
Auto Play
Looping
Audio/Video recording
Audio Player
Subtitle support
Sticky video that remains visible while scrolling
Autoplay while scrolling
Thumbnail image previews
Video mirroring (flipping) capabilities
Ad integration
Capture and save the current frame as an image
Customizable player styles
Playlist support for continuous content playback.
Background fullscreen mode
MUX integration
Wistia integration
❗
The Audio Player element is not supported by iOS devices.
Prerequisites
Most options and functionality do not require any accounts.
To use MUX API you must have an account. Create your development account at: https://www.mux.com/.
To use HappyScribe API you must have an account. Create your development account at: https://www.happyscribe.com/.
To use videos in Wistia player you don’t need an account, but if you want to store and play yours videos you must have an account. Create your development account at: https://wistia.com/.
How to setup
Setup MUX account and get token:
To start you need to create an account at:https://www.mux.com/. Open the link and push the “Sing up” button on the top right of the page.
Create an account
On the dashboard select "Settings" and choose “Access Tokens”.
On the right side of the page select “Generate new token”, after that, the settings window will open. Choose the environment, permissions and name for the new token. Then click the green button “generate token”.
You will receive an access token. Store somewhere “Token ID” and “Secret key”. They are needed to get the “Authorization” header in API calls.
The next step describe how to convert Token ID and Secret Key to Authorization header for API Calls.
Set up workflow on the page.
Create workflow: When the Page is loaded
Add action Access Token to Base64.
Fill the fields in the action.
ID: Token ID
Key: Secret Key
Run preview, after page load you will see a window with a token, copy this text, it needs to past in the bubble editor in the plugin tab.
Before you go to the next step, delete the workflow you just created.
After you get the “Authorization” header, copy that, open the plugin tab in the Bubble editor and past in front of each MUX API call:
To set MUX Environment key in the plugin’s tab: on the dashboard click “Environments” and choose the “Production” or “Development” key.
Setup Happyscribe account and get a token:
To start you need to create an account at:https://www.happyscribe.com/. Open link and push button “Sing up” on the top right of the page.
Create an account
On the dashboard select "workspace" and choose “Settings”. On the opened window choose tab “API”. There will be API key. Copy that.
Open plugin tab in the Bubble editor and past in front of each Happyscribe API calls “Bearer API_KEY”, where “API_KEY” is a key from previous step.
Setup Wistia account and get a token:
To start you need to create an account at:https://wistia.com/. Open the link and push the button “Get started” on the top right of the page. Then scroll down and click “Sign up for free"
Create an account
On the dashboard select "Account" and choose “Settings”. On opened page on the left column menu select “Api Access”, then copy “Master token password”, or create new one.
Open plugin tab in the Bubble editor and past in front of each Wistia API calls “Bearer API_KEY”, where “API_KEY” is a password from previous step.
MUX Create an asset - Action - Create a new Mux Video asset.
Fields:
Title
Description
Type
Url
The URL of the file that Mux should download and use.
text
passthrough
Arbitrary user-supplied metadata that will be included in the asset details and related webhooks. Can be used to store your own ID for a video along with the asset. Max: 255 characters.
text
mp4_support
Possible values:
"none"
"standard”
text
normalize_audio
Possible values:
"false"
"true"
Normalize the audio track loudness level. This parameter is only applicable to on-demand (not live) assets
text
master_access
Possible values:
"none"
"temporary”
text
test
Possible values:
"false"
"true"
Marks the asset as a test asset when the value is set to true. A Test asset can help evaluate the Mux Video APIs without incurring any cost. There is no limit on number of test assets created. Test asset are watermarked with the Mux logo, limited to 10 seconds, deleted after 24 hrs.
text
playback_policy
Possible values:
"public"
"signed”
text
start_time
The time offset in seconds from the beginning of the video indicating the clip's starting marker. The default value is 0 when not included. This parameter is only applicable for creating clips when input.url has mux://assets/{asset_id} format.
number
end_time
The time offset in seconds from the beginning of the video, indicating the clip's ending marker. The default value is the duration of the video when not included. This parameter is only applicable for creating clips when input.url has mux://assets/{asset_id} format.
number
Returns:
Title
Description
Type
id
Unique identifier for the Asset. Max 255 characters.
text
Test
Indicates is it a test or not. True means this live stream is a test asset. A test asset can help evaluate the Mux Video APIs without incurring any cost. There is no limit on number of test assets created. Test assets are watermarked with the Mux logo, limited to 10 seconds, and deleted after 24 hrs.
Boolean (yes/no)
Status
Possible values:
"ready"
"preparing"
"errored”
text
Playback_ids
A list of Playback ID objects.
List
Policy
Possible values:
"public"
"signed"
public playback IDs are accessible by constructing an HLS URL like https://stream.mux.com/${PLAYBACK_ID}
signed playback IDs should be used with tokens https://stream.mux.com/${PLAYBACK_ID}?token={TOKEN}. See Secure video playback for details about creating tokens.
Playback_ids field, string
Id
Unique identifier for the PlaybackID
Playback_ids field, string
MUX List assets - Data - Returns list of all assets.
Fields:
Title
Description
Type
limit
Number of items to include in the response (default: 25)
number
page
Offset by this many pages, of the size of limit (default: 1)
number
live_stream_id
Filter response to return all the assets for this live stream only
text
upload_id
Filter response to return an asset created from this direct upload only
text
Returns: a list of assets that includes: type, aspect ratio, duration, id, height, width.
MUX Retrieves an asset - Data - Retrieves the details of an asset that has previously been created.
Fields:
Title
Description
Type
ASSET_ID
The asset ID.
string
Returns: a assets that includes: type, aspect_ratio, duretion, id, height, width.
MUX Delete an asset - Action - Deletes a video asset and all its data.
Fields:
Title
Description
Type
ASSET_ID
The asset ID.
string
Returns: nothing.
MUX Update an Asset - Action - Deletes a video asset and all its data.
Fields:
Title
Description
Type
ASSET_ID
The asset ID.
string
Passthrough
Arbitrary metadata set for the Asset. Max 255 characters. In order to clear this value, the field should be included with an empty string value.
string
Returns: a Updated asset.
MUX Retrieve asset input info - Data
Fields:
Title
Description
Type
ASSET_ID
The asset ID.
string
Returns: a list of the input objects that were used to create the asset along with any settings that were applied to each input.
MUX Create a live stream - Action - Creates a new live stream. Once created, an encoder can connect to Mux via the specified stream key and begin streaming to an audience.
Fields:
Title
Description
Type
ASSET_ID
The asset ID.
string
test
Marks the live stream as a test live stream when the value is set to true.
Boolean (true/false)
audio_only
Force the live stream to only process the audio track when the value is set to true. Mux drops the video track if broadcasted.
Boolean (true/false)
Returns: a new live stream data.
MUX Clip asset - Action - Create a clip from an existing asset.
Fields:
Title
Description
Type
ASSET_ID
The asset ID.
string
start_time
Is the time offset in seconds from the beginning of the video, indicating the clip's start marker. The default value is 0 when not included.
Number
end_time
Is the time offset in seconds from the beginning of the video, indicating the clip's end marker. The default value is the duration of the video when not included.
Number
playback_policy
Possible values:
"public"
"signed”
string
Returns: a data will include an Asset ID and a Playback ID and Status.
MUX List all metric values - Data
Fields:
Title
Description
Type
timeframe[]
Timeframe window to limit results by. Must be provided as an array query string parameter
string
filters[]
Limit the results to rows that match conditions from provided key:value pairs. Must be provided as an array query string parameter.
To exclude rows that match a certain condition, prepend a ! character to the dimension.
Possible filter names are the same as returned by the List Filters endpoint.
string
Returns: List all of the values across every breakdown for a specific metric.
MUX List Insights - Data
Fields:
Title
Description
Type
METRIC_ID
Full list see in api documentation.
string
measurement
Measurement for the provided metric. If omitted, the default for the metric will be used.
string
order_direction
Sort order.
string
timeframe[]
Timeframe window to limit results by. Must be provided as an array query string parameter
string
Returns: a list of insights for a metric. These are the worst performing values across all breakdowns sorted by how much they negatively impact a specific metric.
MUX get video views - Data
Fields:
Title
Description
Type
timeframe[]
Timeframe window to limit results by. Must be provided as an array query string parameter
string
limit
Number of items to include in the response (default: 25)
number
page
Offset by this many pages, of the size of limit (default: 1)
number
viewer_id
Viewer ID to filter results by. This value may be provided by the integration, or may be created by Mux.
string
error_id
Filter video views by the provided error ID (as returned in the error_type_id field in the list video views endpoint). If you provide any as the error ID, this will filter the results to those with any error.
number
order_direction
Sort order.
string
filters[]
Timeframe window to limit results by. Must be provided as an array query string parameter
string
Returns: a list of video views which match the filters.
MUX Update master access - Action - Allows you to add temporary access to the master (highest-quality) version of the asset in MP4 format. A URL will be created that can be used to download the master version for 24 hours. After 24 hours Master Access will revert to "none". This master version is not optimized for web and not meant to be streamed, only downloaded for purposes like archiving or editing the video offline.
Fields:
Title
Description
Type
ASSET_ID
The asset ID.
string
master_access
Possible values:
"temporary"
"none"
Add or remove access to the master version of the video.
string
Returns: a asset.
MUX Create a Playback Restriction - Action - Create a new Playback Restriction.
Fields:
Title
Description
Type
allowed_domains
List of domains allowed to play videos. Possible values are
[] Empty Array indicates deny video playback requests for all domains
["*"] A Single Wildcard * entry means allow video playback requests from any domain
["*.example.com", "foo.com"] A list of up to 10 domains or valid dns-style wildcards
string
allow_no_referrer
A boolean to determine whether to allow or deny HTTP requests without Referer HTTP request header. Playback requests coming from non-web/native applications like iOS, Android or smart TVs will not have a Referer HTTP header. Set this value to true to allow these playback requests.
Boolean (true/false)
Returns: a list of allowed domains.
MUX List Playback Restrictions - Data
Fields:
Title
Description
Type
limit
Number of items to include in the response (default: 25)
number
page
Offset by this many pages, of the size of limit (default: 1)
number
Returns: a list of all Playback Restrictions.
MUX delete playback restriction - Action - Deletes a single Playback Restriction.
Fields:
Title
Description
Type
PLAYBACK_RESTRICTION_ID
ID of the Playback Restriction.
text
Returns: nothing.
MUX Create a new direct upload URL - Action - Creates a new direct upload, through which video content can be uploaded for ingest to Mux.
Fields:
Title
Description
Type
cors_origin
If the upload URL will be used in a browser, you must specify the origin in order for the signed URL to have the correct CORS headers.
text
playback_policy
Possible values:
"public"
"signed”
text
passthrough
Arbitrary user-supplied metadata that will be included in the asset details and related webhooks. Can be used to store your own ID for a video along with the asset. Max: 255 characters.
text
mp4_support
Possible values:
"none"
"standard"
Specify what level (if any) of support for mp4 playback.
Boolean (true/false)
normalize_audio
Normalize the audio track loudness level. This parameter is only applicable to on-demand (not live) assets.
Boolean (true/false)
master_access
Specify what level (if any) of support for master access. Master access can be enabled temporarily for your asset to be downloaded.
Boolean (true/false)
test
Marks the asset as a test asset when the value is set to true.
Boolean (true/false)
timeout
(default: 3600, min: 60, max: 604800)
Max time in seconds for the signed upload URL to be valid. If a successful upload has not occurred before the timeout limit, the direct upload is marked timed_out
text
Returns: url to upload.
MUX see how many people are watching - Action - Creates a new direct upload, through which video content can be uploaded for ingest to Mux.
Fields:
Title
Description
Type
token
Token from action "Generate a JSON Web Token”
text
Returns:
views is the total (non-unique) number of views happening
viewers is the total unique number of views happening
Mux Timeline hover previews - Data - Get storyboard(sprite thumbnails).
Fields:
Title
Description
Type
PLAYBACK_ID
Playback id.
text
extension
Possible values:
"png"
"jpg"
"webp”
text
Returns: image.
Mux Timeline hover previews WebVTT - Data - Get WebVTT file.
Fields:
Title
Description
Type
PLAYBACK_ID
Playback id.
text
Returns: file.
Happyscribe API calls
Happyscribe List All Transcriptions - Data
Fields:
Title
Description
Type
organization_id
Id of the organization to get the transcriptions from
text
passthrough
Request a specific page
number
Returns: a list of transcriptions you’ve previously created. The transcriptions are returned in sorted order, with the most recent charges appearing first.
Happyscribe Create a Transcription - Action - creates a new transcription. After a transcription is created, the system will proceed to automatically transcribe it. You can watch if the transcription process has finished by retrieving a transcription.
A url where the media file is located and can be retrieved by our server.
text
is_subtitle
If set to true, happyscribe will treat this transcription as subtitles.
boolean(true/false)
service
auto(default) : Machine generated transcription/subtitles.
pro : transcription/subtitles hand-crafted by human professionals.
alignment: Align the text provided in document_url with the media from tmp_url
text
organization_id
Id of the organization to save the transcription in.
text
folder_id
Id of the folder to save the transcription in.
text (optional)
document_url
(only for alignment ) An accessible url to a plain text document that needs to be aligned with the media provided in tmp_url.
text
sharing_enabled
(default: false) If set to true, everyone with the editor url will be able to access it.
boolean(true/false)
use_vocabulary
(default: false) If set to true, happyscribe will use the vocabulary that you can set on
boolean(true/false)
Returns: id, created at, status, url.
Happyscribe Retrieve a Transcription - Data - retrieves information about a specific transcription. To retrieve the transcript you have to use the export endpoint.
Fields:
Title
Description
Type
ID
Transcription id.
text
Returns: id, created at, status, url.
Happyscribe Delete a Transcription - Action - deletes a transcription.
Fields:
Title
Description
Type
ID
Transcription id.
text
Returns: nothing
Happyscribe Create an Export - Action - creates a new export. After an export is created, the system will proceed to generate it. You can watch if the exporting process has finished by retrieving an export. The exporting process is generally very fast. Each file takes ~10s to complete. You can submit more than one file at the same time.
Include timestamps (only formats: txt, docx, pdf )
boolean(true/false)
timestamps_frequency
Include inline timecodes at a given frequency (valid values: 5s, 10s, 15s, 20s, 30s, 60s)
boolean(true/false)
show_speakers
Include speaker labels (only formats: txt, docx, pdf )
boolean(true/false)
show_comments
Include comments (only formats: txt, docx, pdf )
boolean(true/false)
show_highlights
Include highlights (only formats: docx, pdf )
boolean(true/false)
show_highlights_only
Include only highlights (only formats: docx, pdf )
boolean(true/false)
transcription_id
Transcription id.
text
Export formats
Value
Description
txt
Text Document (.txt)
docx
Word Document (.docx)
pdf
PDF Document (.pdf)
srt
Subtitles (SubRip .srt)
vtt
Subtitles (WebVTT .vtt)
stl
Subtitles (EBU-STL .stl)
avid
Avid Markers (.txt)
html
Interactive Transcript (.html)
premiere
Premiere Pro (Beta) (.xml)
maxqda
Maxqda (.txt)
json
JSON (.json)
fcp
Final Cut Pro (.fcp)
Returns: export’sid and status.
Happyscribe Retrieve an Export- Action - retrieves information about a specific export. To download it you can use the returned download_link.
Fields:
Title
Description
Type
ID
Export’s id.
text
Returns: download link and status.
Wistia API calls
Wistia get media list - Data
Fields:
Title
Description
Type
page
Specifies which page of the results you want to see. Defaults to 1 (not 0).
number
per_page
The number of results you want to get back per request. The maximum value of this parameter is 100, which is also the default.
number
project_id
An integer specifying the project from which you would like to get results.
text
name
Find a media or medias whose name exactly matches this parameter.
text
type
A string specifying which type of media you would like to get. Values can be Video, Audio, Image, PdfDocument, MicrosoftOfficeDocument, Swf, or UnknownType.
text
hashed_id
Find the media by hashed_id.
text
archived
A boolean to filter by archived status: true will return only archived medias in the response, while false will return only active (ie. non-archived) medias.
text
Returns: a list of all the media in your account.
Wistia get projects list- Data
Fields:
Title
Description
Type
page
Specifies which page of the results you want to see. Defaults to 1 (not 0).
number
per_page
The number of results you want to get back per request. The maximum value of this parameter is 100, which is also the default.
number
Returns: a list of Projects in your Wistia account.
Wistia get media show- Data - Get information about a specific piece of media you’ve uploaded to your account.
Fields:
Title
Description
Type
hash_id
A unique alphanumeric identifier for this media.
text
Returns: information about requested media: name, type, description, duration status.
Wistia get projects show- Data - Get details about a specific project.
Fields:
Title
Description
Type
project-hashed-id
A private hashed id, uniquely identifying the project within the system.
text
Returns: information about requested project: media list, media count, created at, name, description.
Wistia get Customizations Show- Data - Get the customizations saved for your video.
Fields:
Title
Description
Type
media-id
A unique alphanumeric identifier for this media.
text
Returns: information about color and controls.
Wistia get Engagement - Data - retrieve the data used to construct the engagement graphs at the top of the stats page for any video in Wistia.
Fields:
Title
Description
Type
media-id
A unique alphanumeric identifier for this media.
text
Returns:
Field
Description
engagement
The percentage of the video that was viewed, averaged across all viewing sessions.
engagement_data
An array which can be used as the data source for creating an engagement graph. Normally, each cell in the array represents how many times 1 second of the video has been viewed. However, for longer form content (over 1000 seconds), the array will be scaled down to 1000 items, with each item representing more than 1 second of playback.
rewatch_data
An array which can be used for creating the rewatch block on an engagement graph. Normally, each cell in the array represents how many times 1 second of the video has been viewed. However, for longer form content (over 1000 seconds), the array will be scaled down to 1000 items, with each item representing more than 1 second of playback.
Wistia get Stats - Data - retrieve some account-wide information.
Fields:
Title
Description
Type
media-id
A unique alphanumeric identifier for this media.
text
Returns:
Field
Description
load_count
The total number of times all of the videos from this account have been loaded.
play_count
The total number of times all of the videos from this account have been played.
hours_watched
The total amount of time spent watching all of the videos in this account.
video_id (Mux Data Video ID)asset_id (Mux Video Asset ID)playback_id (Mux Video Playback ID)live_stream_id (Mux Video Live Stream ID)
String
Token live time
UNIX Epoch seconds when the token expires. Use this to ensure any tokens that are distributed become invalid after a period of time.
Number
signing Key Id
Key ID returned when signing key was created
String
private Key Base64
Base64 encoded private key. It is a very long string.
String
Returns: JSON Web Token.
How to get Key ID and Key Base64
Everyone players action - do an action for every one player on the page.
Title
Description
Type
Action
Available actions:
Play
Stop
Pause
Set volume
Exit Fullscreen
Mute on
Mute off
Dropdown options
Value
For volume: 0 - 100.
Number
Generate Pre-signed URL - Generates pre-signed URL for uploading the video on the AWS or Wasabi services.
Fields:
Title
Description
Type
Bucket Name
String representing the name of the cloud storage bucket where the file will be stored.
text
File Path
The options necessary for pre-signed URL generation. Note: Use the value of "file path for AWS" state from the element.
text
Returned values:
Title
Description
Type
pre-signed upload URL
Returns the list of presigned URLs that should be used to finish the uploading process.
list of texts
Workflow example
How to set up video upload on AWS/Wasabi [Video Recorder]
Video uploading on AWS and Wasabi needs additional setup from the plugin version 1.15.0.
⚠️
To be able to save videos on the AWS or Wasabi need to set up the following settings in the plugin.
On the page are placed the following elements to record the a video: Video Recorder, Dropdown, Input, Toggle, and some Buttons.
The Video Recorder element has the following settings.
The “Start Camera” button is used to prepare the camera for recording. When it is clicked the “Start Camera” action is called.
The “Start Record” button is used to initiate the recording. When it is clicked the “Start Recording” action is called.
☝️
At this step is important to leave the “Autosave to Bubble” field empty.
The “Save Record” button is used to save the recorded video with one of available possibilities. When it is clicked the “Save Record” action is called.
☝️
For this tutorial only the “AWS” and “Wasabi” options are relevant!
The service AWS or Wasabi is defined by the Dropdown.
The file privacy is defined by the Toggle element.
In the Workflow tab, when the URL generation time event is triggered, the pre-signed URL is generated and the file is uploaded through the pre-signed URL.
👉
When the “URL generation time” event is triggered, the “file path for AWS” state contains all necessary data for generation pre-signed URL.
The pre-signed URL is generated by the Generate Pre-signed URL action.
The bucket name is defined by the Input element.
The final step of uploading should be executed through the Upload File element action.
Getting Started
Audio-Video Player
Create an Audio/Video Player on the page.
Paste the video link in the Source field.
If you use old responsive, set height in the Height old responsive field that is almost at the end of the list.
Ready, click “preview” to test.
Wistia Video Player
Create Wistia Player on the page.
Paste the Wistia video’s ID in the Wistia ID field.
Ready, click “preview” to test.
MUX Video Uploader
Firstly you need to create Upload Link by using API Call MUX Create a new direct upload URL. A result of the API Call paste in the Upload Url field in MUX Video Uploader.
Create MUX Video Uploader on the page.
Setup workflow: create event “page is loaded”, than add first action “MUX Create a new direct upload”, than add second action “set state” to save result from first action.
In the MUX Video Uploader insert dynamic data from state.
Ready, click “preview” to test.
Audio Visualizer
Audio Visualizer works in pair with Audio/Video Player.
Add ID Attribute for the Audio/Video Player, for example, audio_id_1. ID Attribute is located at the end of the setting list. If there is no field, turn on ID Attribute on the project. To do this open Settings —> General —> Check “Expose the option to set an ID attribute to HTML element”.
Create an Audio Visualizer on the page.
Paste the same ID in the first field Audio Element’s ID.
Ready, click “preview” and run the media on the Audio/Video Player.
Ready, click “preview” to test. The icon is red when recording. Color can be changed in properties.
Playlist in Audio/Video Player
A playlist is a list of video or audio files that can be played back on an Audio/Video Player.
Simple example
Create a database table for the playlist. The table contains the following fields: File, Format, Name, Poster, and Sprite Thumbnails. Als,o every table contains Unique ID field that Bubble creates automatically. A playlist requires filling in the list File field.
Create Audio/Video Player on the page. Setup filed in block “Playlist”.
Use playlist - check the field to enable playlist.
Playlist (App type) - choose a type of table.
Playlist src - choose a field that represent File.
Playlist format - choose a field that represent Format.
Playlist poster - choose a field that represent Poster(image).
Playlist name - choose a field that represent name of media.
Playlist unique id - choose a field that represent unique id.
Playlist thumbnails - choose a field that represent Sprite Thumbnails.
Playlist list- A list of Items from database. Past dynamic data: do a search for.
Ready, click “preview” to test. You will see a player with playlist and 2 new control buttons
Show the current playlist and add the possibility to change the dynamic playlist from a page.
Create a playlist by doing every step from the previous guide.
Create Repeating Group
Type of content: choose Text.
Data source: choose a statePL List of src from the Audio/Video player.
To highlight the current media track, create a Group in the first cell with following conditional:
When: Current cell’s index → is → audio/video player’s → playlist current index
Set background styles for this group.
To show information about every media track in the playlist, create inside the group image, text fields. Use the current cell’s index to take information from Audio/Video player states.
Create buttons Play and Remove inside the Group.
For the Play button add action Playlist set current item.
In the Index field past dynamic data: Current cell’s index.
For the Remove button add action Playlist remove item.
In Indexes field past dynamic data: Current cell’s index.
To add a possibility to add new media tracks to the playlist:
Create a new Repeating group, and create an image and text with the name of the media.
Create an Add button inside the cell and add action Playlist add item.
Setup the action as in the example on the right.
Ready, an example of the final result:
Individual playlist for each User.
Create a playlist by doing every step from the previous 2 guides.
Add a new Playlist ID as a list of text field for users in the database
Add a new workflow with event Playlist change, add an action Make changes to the current user.
In the Audio/Video Player in field Playlist list do a search with Advanced filter.
Do a search for videos
Choose filtered.
In the constraint field choose Advanced.
Past: Search for current user —> playlist ids —> contains —> this Video’s —> unique id (The value Video’s is a name of the table that you search in a step).
Manually add some media IDs in the user’s field.
Ready, click “preview” to test.
Floating Player
A "floating player" appears as a floating window or overlay on top of other content on a screen. It allows users to watch a video or listen to audio content while simultaneously performing other tasks on their device or within the same application.
Create an Audio/Video Player on the page.
Add a new workflow with an event Video that has left the viewport area, and add an action Set video floating.
Add a new workflow with event Video entered the viewport area, add an action Unset video floating.
Setup Floating block in the Audio/Video Player.
Use event Player Ready and action Set floating container style to change the position of the floating video
Ready, click “preview” to test.
Add advertising
Here is how to play ads before/after the video and during the video.
Use action Add ads at any time the Audio/Video Player is ready.
Create an Audio/Video Player on the page.
Add a new workflow with the event Player Ready, add an action Add ads.
This action allows to addition of 3 ads, before the video starts, after the video ends, and one ad during the video. To add more ads during the video, please use the action Add ad midroll.
Setup the action as in the example on the right.
Change the color of an ad’sclose button in the Audio/Video Player.
Ready, click “preview” to test.
Changelogs
Update 04.02.25 - Version 1.15.0
Secured plugin keys.
Added states: "file path for AWS". [Video Recorder]
