Configuration

When initialising the 3Q video player via a constructor, it is possible to include multiple configuration attributes. While playoutId and container (and in case of token protection key and timestamp) are mandatory, all other options are optional.

<script>
const player = new js3q({
    playoutId: '5c3b0910-8850-11e7-9273-002590c750be',
    container: 'player',
    autoplay: true
});
</script>

Parameters

If the player is protected, you need to generate and configure key and timestamp, as described in Basic Usage.

General

Parameter	Type	Default	Description
playoutId	String	-	Video or Live-stream
container	String	-	The container where the player is placed.
key	String	-	Needed if player is protected
timestamp	Timestamp	-	Needed if player is protected.
autoplay	Boolean	false
allowmutedautoplay	Boolean	false	If autoplay is true and autoplay is not working, the player tries to autoplay the video muted.
chromecast	Boolean	false	Enables Remote playback
enabledTextTracks	Boolean	true	Enables subtitles if available
resumeAt	Integer	0	Resumes playback at given time.
initialQuality	Integer	360	The initial qualitiy level. Choose between 1080, 720, 480, 360, 240 and 144. The higher the value, the longer the video needs to cache before it can begin playing. If you choose a low value, the the video will start playing faster, but begin with a lower initial quality level. After the first few seconds playback quality will adapt automatically to the user's available bandwidth.
playbackRate	Number	1	Value of playback rate. Values 0-1 play slower than real time. Values greater than 1 play faster than real time
playbackRateMenu	Boolean	false	Show playbackRate menu
loop	Boolean	false
muted	Boolean	false
seo	Boolean	false	JSON-LD Data placement
preventNativeFullScreenOnIOS	Boolean	false	Prevent the player from switching to native mode on iOS
preview	Boolean	false	Limits the duration of the Video
previewtime	Number	30	Sets the duration of the preview
pictureInPicture	Boolean	false	Enables Picture in Picture
fullscreenOnOrientationChange	Boolean	false	Mobile only. Automatically switch to fullscreen, when the device gets rotated horizontally
sticky	Boolean	false	Sticks the player to the screen while Scrolling. Disables PictureInPicture Option.
stickyPosition	String	top-right	['top-left','top-right','bottom-left','bottom-right']
suppressFullscreen	Boolean	false	Hide the Fullscreen button and disable all ways to switch to fullscreen
polls	Boolean	true	Activate/Deaktivate live polls

Layout / Dimensions

Parameter	Type	Default	Description
layout	String	responsive	[responsive|default|fixed]
width	String	-	[px|100%]
height	String	-	[px|100%]
tintColor	String	#009cd1
controlsPriority	array	['fullscreen', 'captions', 'settings', 'skip', 'volume', 'playpause', 'playlist', 'cast', 'time', 'chapters']	Priority of Controls in order to keep on smaller screens
cornerShape	String	squared	Border radius of elements within the player
playerShape	string	squared	Border radius of the player

Tracking / Analytics

Parameter	Type	Default	Description
tracking	Boolean	true	Video Engagemenent Tracking
trackingCookie	Boolean	true	Save the Tracking ID in the Cookies
trackingApi	String	v2	v1 (Reporting) | v2 (Analytics)
userToken	String	Custom String to identify the User
ga	Boolean	false	Google Analytics Tracking
gacallback	String	ga

Language and locales

Parameter	Type	Default	Description
locale	String	navigator.language	Player control navigation language. Available values: "de", "en", "es", "fr, "it", "nl"
defaultAudioLanguage	String	navigator.language
defaultCC	String	-	If available (e.g. "ger"), the set subtitle will be displayed without user interaction.
CCSize	Number	-	Default Size of Caoptions in px

Labels

Parameter	Type	Description
labels	Object	The language strings, that will be overwritten. See full example

Controls

Parameter	Type	Default	Description
controls	Boolean	true
controlBarAutoHide	Boolean	true

Advertising

See chapter Ad Integration.

Sharing

Parameter	Type	Default	Description
embedCodeMenu	Boolean	false	Enable Embed-Code for Sharing
sharing	Boolean	false
shareItems	Array	['']	Available Items: 'mail', 'facebook', 'twitter', 'threads', 'bluesky', 'reddit', 'whatsapp', 'linkedin', 'xing', 'messenger', 'telegram', 'mastodon'