Trovo Embedded Player and Chats

1. Applying with your domain

Starting from March 8th 2022, only whitelisted domains will be able to use Trovo embedding. Please send your domain along with your website and a brief introduction of the usage to developer@trovo.live. Applications will be replied in one week.

Please note, Trovo may revoke embed usage for domains that violates Trovo Terms and Agreement.

2. 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://player.trovo.live/embed/player?streamername=<streamer_username>

URL sample with params:

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

Iframe format:

<iframe
    src="https://player.trovo.live/embed/player?streamername=< streamer_username >"
    height="<height>"
    width="<width>"
    frameborder="<frameborder>"
    allowfullscreen="<allowfullscreen>">
</iframe>

Sample iframe

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

Iframe attributes

Attribute name	Description
src	The source url indicating the content and the controls of the player. Sample "https://player.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.

3. 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>

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.

4. 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://player.trovo.live/chat/<streamer_username>

Iframe format:

<iframe
    src="https://player.trovo.live/chat/<streamer_username>"
    height="<height>"
    width="<width>">
</iframe>