Embed player with iframe

1. Overview

Bradmax player gives possibility for integration with iframe element. In that case player is hosted by Bradmax. Developer has to put only short HTML code on an own page with some parameters.

Such integration is easier, also after player configuration update (colors / skins ) such change is instantly visible on user page (only page reload / reopen) is needed. Main disadvantage of this solution are limited features and less possibilities of deeper integration with the player.

2. Query params

Iframe HTML code has general structure

        <iframe src="https://bradmax.com/client/embed-player/<YOUR_PLAYER_ID>?mediaUrl=<MEDIA_URL>&<OTHER_PARAMS>"
            width="600" height="400" frameBorder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Where YOUR_PLAYER_ID is unique player identifier, which you can get by clicking “get embed code” button on “Players list” in Bradmax client panel ( https://bradmax.com/client/panel/admin/player/list ). Only required parameter is mediaUrl - URL to some video file or stream. Other parameters are optional like image, title, duration, etc.

All query parameters should be “url encoded” (https://en.wikipedia.org/wiki/Percent-encoding).


FieldDescription
mediaUrlURL to media file or video stream.
mediaUrl2Fallback URL for media. If first is not supported by user device, this will be checked.
mediaUrl3Another fallback URL for media. If first and second are not supported by user device, this will be checked.
idMedia asset id - for statistics video identification.
titleMedia asset title. Will be presented on player.
durationMedia duration in seconds.
splashImgUrlURL to image presented on player before starting video playback.
a.vmap(Ads support required) URL to VMAP file defining, what ads should be preseted by player.
liveValues ("1", “0”). If "1", then player will threat video as live stream transmission without duration defined.
liveEndDateDate time as ISO 8601 string (https://en.wikipedia.org/wiki/ISO_8601). Examples: “2020-06-10T20:00:00Z” (2020-06-10 20:00:00 UTC time zone), “2020-06-12T18:00:00+08:00” (2020-06-12 18:00:00 GMT+8 time zone). If defined, then player is able to detect end of live stream transmission. Without it player will be assume end of transmission and end splash screen will be presented.
liveThankYouImageUrlLink to custom end splash image, which should be shown after end of live stream transmission. If not defined then default start splash will be shown after end of transmission.
liveWaitingForTransmissionImageUrlLink to custom waiting for transmission image, which should be shown when player is waiting for live stream transmission start.
liveLowLatencyModeIndicates if lowLatencyMode should be enabled. By default it is disabled. When lowLatencyMode:true then latency optimization is used at the expense of quality (stream is in lower quality and can buffer more frequently, but with much lower latency). This mode is working only for HLS and MPEG-DASH streams.
iosInlineValues ("1", “0”). If "1", then it indicates that video should be inlined for iPhone devices.
tVideo start playback position. Value in seconds. Default value is “0.0” - beginging of video.
autoplayValues ("1", “0”). If "1", then player will try to autoplay video. Video playback can be blocked by user device - waiting for user action / click.
muteValues ("1", “0”). If "1", then video will be by default muted. Commonly used with autoplay=1.

3. Examples

3.1 Basic

Basic example of player with defined:


<html>
    <body>
        <iframe src="https://bradmax.com/client/embed-player/d9decbf0d308f4bb91825c3f3a2beb7b0aaee2f6_8493?mediaUrl=https%3A%2F%2Fbradmax.com%2Fstatic%2Fvideo%2Ftears_of_steel.mp4&title=Tears%20of%20steel&duration=734.09&splashImgUrl=https%3A%2F%2Fbradmax.com%2Fstatic%2Fimages%2Fstartsplash.jpg"
            width="600" height="400" frameBorder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </body>
</html>

3.2 Autoplay and mute

Params:

<html>
    <body>
        <iframe src="https://bradmax.com/client/embed-player/d9decbf0d308f4bb91825c3f3a2beb7b0aaee2f6_8493?mediaUrl=https%3A%2F%2Fbradmax.com%2Fstatic%2Fvideo%2Ftears_of_steel.mp4&autoplay=1&mute=1"
            width="600" height="400" frameBorder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </body>
</html>

3.3 Live stream

Params:

<html>
    <body>
        <iframe src="https://bradmax.com/client/embed-player/d9decbf0d308f4bb91825c3f3a2beb7b0aaee2f6_8493?mediaUrl=https%3A%2F%2Fbradmax.com%2Fstream%2Flive.m3u8&live=1&liveEndDate=2020-06-10T20%3A00%3A00Z&liveThankYouImageUrl=https%3A%2F%2Fbradmax.com%2Fstatic%2Fimages%2Fthankyou_endsplash.jpg&liveWaitingForTransmissionImageUrl=https%3A%2F%2Fbradmax.com%2Fstatic%2Fimages%2Fwaiting_for_transmission.jpg"
            width="600" height="400" frameBorder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </body>
</html>
Jump to