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> "; 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