✅
Demo to preview the settings
Real use case in the template
Wavestream Audio & Video Template for Bubble
Wavestream Audio & Video Template page on Bubble. Use this template to speed up your app development. Bubble lets you build web apps without any code.
https://bubble.io/template/wavestream-audio--video-1728564123133x672081967682682900
Introduction
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 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.
- 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.
Set up workflow on the page.
- 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.
Plugin Elements’ Properties
The plugin contains the following elements:
Audio/Video playerMUX Video UploaderWistia Video PlayerVisualizerAudio RecorderVideo RecorderPlugin Data/Action Calls (API Calls only)
MUX Api calls
- 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.
- views is the total (non-unique) number of views happening
- viewers is the total unique number of views happening
Fields:
Title | Description | Type |
token | Token from action "Generate a JSON Web Token” | text |
Returns:
- 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.
Fields:
Title | Description | Type |
name | Name of the transcription | text |
language | text | |
tmp_url | 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.
Fields:
Title | Description | Type |
format | (required) Specify the export format see chart below | text |
show_timestamps | 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’s id 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. |
Plugin Actions
- Generate a JSON Web Token - token for API call MUX to see how many people are watching.
my Id | The ID for which counts will be returned | String |
my Id Type | 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 |
Workflow example
Getting Started
Audio-Video Player
- Create 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.
- Do steps from 1 to 3 from Getting Started Audi/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.
Video Recorder
Follow this link to get instructions: Video Recorder.
Audio Recorder
- Create an Audio Recorder on the page.
- Ready, click “preview” to test. The icon is red when recording. Colour 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 playlist. The table contains the following fields: File, Format, Name, Poster and Sprite Thumbnails. Also every table contains Unique ID filed that Bubble create automatically. Playlist require fill a at 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 playlist by doing every step from previous guide.
- Create Repeating group
- Type of content: choose Text.
- Data source: choose a state PL List of src from 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 playlist, create inside the group image, text fields. Use current cell’s index to take information from Audio/Video player states.
- Create buttons Play and Remove inside the Group.
- For Play button add action Playlist set current item.
- In Index field past dynamic data: Current cell’s index.
- For Remove button add action Playlist remove item.
- In Indexes field past dynamic data: Current cell’s index.
- To add posibility add new media tracks to the playlist:
- Create a new Repeating group, create image and text with name of media.
- Create Add button inside cell and add action Playlist add item.
- Setup the action as in the example on the right.
- Ready, example of final result:
Individual playlist for each User.
- Create playlist by doing every step from previous 2 guides.
- Add a new Playlist ids as a list of text filed for user in the database
- Add a new workflow with event Playlist change, add an action Make changes to 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 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 table that you search in the a step).
- Manually add some media’s 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 Audio/Video Player on the page.
- Add a new workflow with an event Video that has left the viewport area, 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 add 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 color of a ad’s close button in the Audio/Video Player.
- Ready, click “preview” to test.
Changelogs
Update 08.11.24 - Version 1.14.0
- Bug fixes.
Update 17.07.24 - Version 1.13.0
- Minor update (Marketing update).
Update 10.06.24 - Version 1.12.0
- Updated demo/service links.
Update 06.06.24 - Version 1.11.0
- Minor update.
Update 05.06.24 - Version 1.10.0
- Dynamic field for filename, bitrate, format, audio channel.
Update 03.04.24 - Version 1.9.0
- updated description.
Update 26.01.24 - Version 1.8.0
- Added "Permission denied by user" state for "Audio Recorder" element.
Update 24.01.24 - Version 1.7.0
- updated description.
Update 27.12.23 - Version 1.6.0
- updated description.
Update 04.12.23 - Version 1.5.0
- updated the icon.
Update 04.12.23 - Version 1.4.0
- minor fixies.
Update 04.12.23 - Version 1.3.0
- updated description.
Update 15.11.23 - Version 1.2.0
- Minor fixes.
Update 18.10.23 - Version 1.1.0
- updated description.
Update 17.10.23 - Version 1.0.0
- Initial Release.