Advanced player Configuration

You can configure your player by passing ina data attributes on your <player> tag. The id and app-id attributes are required.

Instance ID
Asset(s)
Aspect Ratio
Width
Height
Auto Start
Show Controls
Show Captions
Display Name
Display Dscription
Mute
Repeat
Poster
Sharing Link
Embed Code
Share Prompt
Stretch Type
Download Button

Instance ID

A unique identifier for this room (in case you have more than one on the page) The default value is "myPlayer"
HTML
Vanilla JS
React JS
<player id='myPlayer' data-app-id='[YOUR_APP_UUID]'></player>

Asset(s)

HTML
Vanilla JS
React JS
<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-assets='["v-1234","v-5678"]'></player>

Aspect Ratio

To create a responsively sized player, select an aspect ratio and set the width to a percentage. The default value is "automatic" Acceptable values are 'automatic', '4:3', '16:9'
HTML
Vanilla JS
React JS
<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-aspectratio='16:9'></player>

Width

Width of the player as integer or percentage (if left blank the player will be sized to the selected video(s).) To create a responsive player please also choose an aspect ratio and leave the height param blank.
HTML
Vanilla JS
React JS
<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-width='600'></player>

Height

Height of the player as integer (if left blank the player will be sized to the video(s) selected for playback)
HTML
Vanilla JS
React JS
<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-height='400'></player>

Auto Start

Automatically start playinhg the media on load (not supported by all devices)
HTML
Vanilla JS
React JS
<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-autostart='true'></player>

Show Controls

Display playback controls to the user The default value is "true"
HTML
Vanilla JS
React JS
<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-controls='true'></player>

Show Captions

Display captions if a cvaptions outpout exists The default value is "true"
HTML
Vanilla JS
React JS
<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-showcaptions='true'></player>

Display Name

Show the asset name in the player The default value is "true"
HTML
Vanilla JS
React JS
<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-displaytitle='true'></player>

Display Dscription

Show the asset description in the player The default value is "true"
HTML
Vanilla JS
React JS
<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-displaydescription='true'></player>

Mute

Start the player with the sound muted
HTML
Vanilla JS
React JS
<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-mute='true'></player>

Repeat

Automatically loop the media
HTML
Vanilla JS
React JS
<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-repeat='true'></player>

Poster

URL to an image to use as the player's poster (if left blank the CameraTag generated thumbnail will be used)
HTML
Vanilla JS
React JS
<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-image='https://www.myimage.com/someimage.jpg'></player>

Embed Code

An URL to be used when this media is shared from the right click menu. By default the CameraTag Player.
HTML
Vanilla JS
React JS
<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-sharing-embed='https://www.mysite.com/'></player>

Share Prompt

Language used in the share menu The default value is "Share Asset"
HTML
Vanilla JS
React JS
<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-sharing-heading='Billy Rides a Bike'></player>

Stretch Type

Determines how meida are fit to the player. The default value is "uniform" Acceptable values are 'uniform', 'exactfit', 'fill', 'none'
HTML
Vanilla JS
React JS
<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-stretching='fill'></player>

Download Button

Show a download button in the player
HTML
Vanilla JS
React JS
<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-download='true'></player>