1 <?xml version="1.0" encoding="UTF-8"?>
  2 <page>
  3    <config>
  4       <!--Nothing to do here for this example-->
  5    </config>
  6    
  7    <videoAnchor>
  8       <!--Could have called this on page load in ToolBook; but this saves action execution space;
  9           NOTE: 2000ms delay is just for sake of demonstration-->
 10       <pgStyleObject>
 11          {  "theStyle"  : "visibility",
 12             "propVal"   : "hidden",
 13             "delay"     : 2000 }
 14       </pgStyleObject>
 15    </videoAnchor>
 16       
 17    <make id="video_player" type="span" level="0" dims="videoAnchor" autoAlign="true" class="" replace="false">
 18       <!--Make objects accept inline styles like this; or use class in stylesheet-->
 19       <style>
 20          {  "background-color"   : "transparent",
 21             "font-size"          : "12pt",
 22             "borderRadius"       : "16px",
 23             "box-shadow"         : "4px 4px 6px 4px #4F4649",
 24             "text-align"         : "center",
 25             "visibility"         : "hidden" }
 26       </style>
 27       
 28       <!--User event captured on top level element; could have used ToolBook "videoAnchor"
 29           and put all our actions on it; but this is much more flexible once you get used
 30           used to using this technology-->
 31       <function name="myUser" event="user" params="evt">
 32          <![CDATA[
 33             if (typeof evt.myValue == 'string') {
 34 
 35                /* CLIFTON: Normal user event when a video is playing
 36                            Sends [value] of user event to "Result" field
 37                ***/
 38                
 39                var txt = "<span style='color:rgb(90,160,0);'>Video User Event Value:</span>&nbsp;&nbsp;";
 40                tbfunction_pgTBObjSet( 'Result', 'htmlText', txt + evt.myValue, 0, false, true);
 41                tbfunction_pgTBObjSet( 'Result', 'htmlText', txt + 'waiting . . .', 3500, false, true); //Clear "Result" field after 3500ms
 42 
 43             } else {
 44                
 45                /* CLIFTON: This branch executes initially when this XML file has finished loading.
 46                            Loads video with some time markers and styles the player colors.
 47                            Clicking fullscreen icon in the control bar will go TRUE FULL-SCREEN
 48                ***/
 49                
 50                tbfunction_htmlVideoLoader('video_player', true, false, 50, 'continuous', false, '2000,4400,6000', '', 'browser', '../media/toxic_man.mp4');
 51                tbfunction_htmlVideoStyles('black', 'white', 'yellow', 'rgb(200,40,40)', '', true); //Set some video player styles
 52                
 53                //Make this element visible because it is initially hidden until the video has loaded
 54                tbfunction_pgStyleObject(this.id, "visibility", "visible", 500); //Note: visible after 500ms delay!
 55                
 56             }
 57          ]]>
 58       </function>
 59       
 60    </make>
 61    
 62    <Result>
 63       <!--Must style via pgStyleObject function tag like this for ToolBook objects-->
 64       <pgStyleObject>
 65             {  "theStyle"  : "border, borderRadius, height, padding, color",
 66                "propVal"   : "2px solid #4A7AFF, 14px, auto, 8px, #B85C09" }
 67       </pgStyleObject>
 68    </Result>
 69 
 70 </page>
 71