Displaying HTML with BrightAuthor:connected

this page covers how to integrate html pages into brightauthor\ connected presentations to add an html page to a presentation, select the html5 widget in the bottom of the content window and drag it into the content panel above html5 state docid\ akrm58nds bn6ayhwzrax describes how to use that widget html guidelines zones you can have multiple zones containing html content in a brightauthor\ connected presentation html content can be inserted into a video or image zone or an image zone z ordering html content will show at the highest z level of graphics zones, meaning that an html zone will cover all other zones that contain images and text this behavior does not extend to touch screens html content can be placed in front of or behind zones containing video content, if you drag the graphics zone(s) before or after the video zone(s) (under the zone menu in the zone properties panel) see image 1 below if the html page contains video and the enable native video playback option is enabled in the html5 state, the html page will always display over other video zones content sourcing html content can originate from a remote server, a local server, or the local storage (sd card) of the player presentations containing html content can also be downloaded onto the local storage from the brightsign network using custom fonts to use custom fonts, specify the font in your script if the font file is in the same directory as your js and css files, it will be used in brightauthor\ connected exporting an html5 presentation exporting a presentation that contains multiple html pages also exports in full all asset folders associated with those pages if your pages share common asset folders, the entire contents will be duplicated multiple times this can become problematic if your asset folders contain large content files, so you may need to prune and/or rearrange asset folders that are duplicated after export chromium video playback the html5 widget has an enable native chromium video playback option in versions 1 19 2 and later of brightauthor\ connected this feature is only available for xc5 players and is explained on html5 state docid\ akrm58nds bn6ayhwzrax partners using a custom cms can use html playback options on series 5 players docid\ wx7rhjmrg74eqxgxrwqtd for more guidance on setting this option in their cms caching and storage brightauthor\ connected allows you to configure common browser caching and storage functions on the player to enable these functions in your brightauthor\ connected presentation, select enable limit storage under admin > application preferences , allocate the space as you wish, and select apply you can allocate space for the following functions html data the amount of space dedicated to the html application cache html local storage the amount of space dedicated to javascript variables and data html indexed db the amount of space dedicated to indexeddb content using html with portrait orientation to create a digital signage canvas that is portrait oriented, simply create a portrait presentation and then insert an html5 widget integrating touchscreen content you can enable touch screen events for an html page by checking the enable mouse and touch events box when creating an html5 state disguising network latency when the brightsign player loads html content from a url, there may be a delay based on network latency you can add a preload image to sidestep this issue note that this solution is not necessary if all html assets are located on the local storage of the player set brightauthor\ connected to interactive drag and drop an image file into the main panel set the initial state box while editing the image state docid\ ac3srsjbmpi1w2gn0y3el specify the timeout for three seconds (or more if desired) in a timeout event docid\ p2iapuaxjbslp4ynaqlet set the timeout event to transition to the html5 state displaying scrollbars the scrollbar behavior will be the same as it is in the current version of chromium to display scrollbars, reference this simple css file from your html page https //archbee doc uploads s3 amazonaws com/0prk6so2dy9ldu77jb8d1/hs5xnhd9kkx90cpyxzmbd forcescrollbars css debugging webpages see debugging webpages docid 4qlk1krr1cnx7xypwxry5