# Trovo Embedded Player and Chats

# 1. Embed live stream with non-interactive frame

You may embed the Trovo player using the <iframe> tag.

Set the src to be the URL which defines the live stream channel to play and with parameters to control settings.

URL structure

https://trovo.live/embed/player?streamername=<streamer_username>
1

URL sample with params:

https://trovo.live/embed/player?streamername=Rezumay&muted=0&fullscreen=1&hidecontrol=0&autoplay=1&hidefollow=0&hidesub=0&sdist=test
1

Iframe format:

<iframe
    src="https://trovo.live/embed/player?streamername=< streamer_username >"
    height="<height>"
    width="<width>"
    frameborder="<frameborder>"
    allowfullscreen="<allowfullscreen>">
</iframe>
1
2
3
4
5
6
7

Sample iframe

<iframe type="text/html" width="720" height="405" src="https://trovo.live/embed/player?streamername=Rezumay&autoplay=1" frameborder="0" allowfullscreen>
1

Iframe attributes

Attribute name Description
src The source url indicating the content and the controls of the player. Sample "https://trovo.live/embed/player?streamername=..."
width Width of the player, in pixels.
height Height of the player, in pixels.
allowfullscreen Indicates whether the player can go full screen. Default value: true.
frameborder Width of the frameborder. Recommended value: 0.

url attributes

Attribute name Description
streamername required Username of the channel’s streamer. This indicates which live stream channel you want the player to show. You may find the username from streamers channel’s url. For example, in the channel “https://trovo.live/Yung (opens new window)”, “Yung” is the streamername.
muted optional If set to 1, the player will be on mute by default. Default value is 0, which is not muted.
fullscreen optional If set to 1, the player will show the full screen button. Otherwise, hide the full screen button. Default value is 1.
hidecontrol optional If set to 1, the player will hide the control bar. Default value is 0, which shows the control bar.
autoplay optional If set to 1, the player will autoplay by default. Otherwise, users need to click start to play the stream. Default value is 1.
hidefollow optional If set to 1, the player will hide the follow button. Default value is 0, which shows the follow button.
hidesub optional If set to 1, the player will hide all subscription related features, including subscription, live playback and 1080p+ resolution. Default value is 0, which shows these features.
sdist optional This string is used to identify where the player is embedded. Trovo staff will assign you this string, for cases this needs to be set.

# 2. Embed player with interactive frame

Load the player

<div id="player"></div>
<script src="https://cdn.trovo.live/embed/iframeApi.js"></script>
<script>
        const player = new Trovo.TrovoPlayer('player', {
                   width: <width>,
                   height: <height>,
                   streamername: <streamername>,
                   enablejsapi: true,
                   origin: <url_of_current_page>,
                   sdist: <sdist>,
                   events: {
                           onReady() {
                                   // do something
                           },                 
                                onStateChange (state) {                        
                                           // state:onReady/ended/pause/playing
                                }
                   }
           })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Player options properties

Name Type Description
width int Width of the player, in pixels. Default: 640
height int Height of the player, in pixels. Default: 360
enablejsapi boolean Enable control through js api. Must set to true if using jsapi. Default: false
origin string Restrict the origin of the control through jsapi. Please set it to be the url of the current page
streamername string Username of the channel’s streamer. This indicates which live stream channel you want the player to show. You may find the username from streamers channel’s url. For example, in the channel “https://trovo.live/Yung (opens new window)”, “Yung” is the streamername.
events object Identifies the events that the player fires and the functions the player calls when events get fired.
sdist string (optional) This string is used to identify where the player is embedded. Trovo staff will assign you this string, for cases this needs to be set.

Playback controls JavaScript API

Name Description
play():void Begins playing the live stream.
pause():void Pauses the player of the live stream.
setQuality(quality:String):void Set the image quality of the current player. Quality: 360P / 480P / 720P / 1080P.
getPlayerState():String Returns the state of the current player. Values includes:IDLE/PLAYING/PAUSED/STOP/
getCurrentTime():Number Get the current time.
getDuration():Number Get the duration in ms of from the start of the frame.

Volume controls JavaScript API

Name Description
mute():void Mute the player.
unmute():void Unmute the player.
isMuted():Boolean isMuted():Boolean

Events JavaScript API

Name Description
onReady Fires when the player finishes loading.
onStateChange Fires when the player changes state.

Element JavaScript API

Name Description
destroy():Void Destroy the object.
getIframe():Dom Get the dom element of the iframe.

# 3. Embed chats

Embed chat boxes using <iframe> tag. Simply create an iframe and set the src to be the chat url.

Note: It is the same chat box as when you click on the popout chat in the chat box.

Chat box URL structure

https://trovo.live/chat/<streamer_username>
1

Iframe format:

<iframe
    src="https://trovo.live/chat/<streamer_username>"
    height="<height>"
    width="<width>">
</iframe>
1
2
3
4
5