Guides & Tutorials

the guides & tutorials chapter offers step by step instructions and practical examples for using the web sdk customizing theme a key feature, especially when using one of the existing event specific experiences, is to customize the experience to your requirements to achieve this, the theme can be customized either by using the exp app config docid\ xp7flcqooltm5vpicwvzh , or by overwriting the extensions custom theme property in the exp manifest { "theme" { "colors" \[ { "id" "icon/primary/default", "value" "blue" }, { "id" "button/controls/fill/tvsync", "value" "blue" }, { "id" "progressbar/progressline/fill/vod", "value" "green" }, { "id" "progressbar/track/fill/default", "value" "yellow" }, { "id" "button/navigation/primary/fill/active", "value" "yellow" }, { "id" "progressbar/track/fill/hover", "value" "#ff8800" } ], "typography" \[ { "id" "heading/01/medium", "value" { "fontstyle" "italic", "fontsize" "66px", "fontweight" "900", "lineheight" "44px", "letterspacing" " 0 02em", "texttransform" "uppercase", "color" "red", "textdecoration" "underline" } } ] } } more information about theming and customization can be found in the theming & customization docid 180sdn0l1vdgfer72vkmz chapter accessing playback data the playback data can be accessed via the event system this example shows how to access the currenttime value of the video player by listening to the player update event window\ addeventlistener('webtonative',(event) => { if(event detail type === 'player update') { console log('player information ', event detail payload) } }) / player information { currenttime 4135 110251, duration 7797, islive false } / the playback system uses this event to inform about state changes so there might be information missing you can also request the full data from playback system by sending a request event window\ addeventlistener('webtonative',(event) => { if(event detail type === 'player update') { console log('player information ', event detail payload) } }) const customevent = new customevent('nativetoweb', { detail { type 'player update request', payload {} }, }) window\ dispatchevent(customevent) / player information { currenttime 4135 110251, duration 7797, islive false, isplaying true, isbuffering false, isseeking false, volume 1, muted false, src 'https //teststream m3u8', fullscreen false } / triggering an entity (camera) change events can be used to programatically change the currently playing content entity (camera) window\ addeventlistener('webtonative',(event) => { if(event detail type === 'entity video set success') { console log('switched to entity ', event detail payload entityid) } }) const customevent = new customevent('nativetoweb', { detail { type 'entity video set', payload { entityid 'entitiy1234abc' } }, }) window\ dispatchevent(customevent) on the entity video set event the playback system switches to this entity and seeks to the same position as the previous entity was playing