Jump to content

SerenityNetworks

Members
 View Profile  See their activity

  • Posts

    79

  • Joined

  • Last visited

 Content Type 

Everything posted by SerenityNetworks

  1. SerenityNetworks
    Whoops! Never mind. I thought I was getting it set as a global variable, but I wasn't. Just in case anyone is interested, the following works fine. var nIntervId;function playPause() { if (vvid.paused) {vvid.play(); //timerOnOff(1); startInterval(); findWord(jQuery('#findWord').val()); } else { vvid.pause(); //timerOnOff(2); stopInterval(); } } function startInterval() { nIntervId = setInterval(findWord, 500);} function stopInterval() { clearInterval(nIntervId);}
  2. SerenityNetworks
    I'm playing a video and while it is playing I'm using setInterval to search for a string every second. This is working perfectly. When I pause the video then I want the search loop to stop, but it's not stopping with the clearInterval command. What am I doing wrong here? I'm stumped. Thanks, Andrew // ------------ PLAY PAUSE ------------ function playPause() { if (vvid.paused) {vvid.play(); var vInterval = setInterval(function() { findWord(); }, 1000); findWord(jQuery('#findWord').val()); } else { vvid.pause(); clearInterval(vInterval); } }
  3. SerenityNetworks
    Never mind. I figured it out. The solution was very easy. I was just tired.
  4. SerenityNetworks
    I just spent another 4 hours on this, probably about 12 now in total. I haven't been able to figure this out on my own. I'm not a developer. I could really use someone showing me how to capture the current time of the video in a variable that I can use in the findWord function. Thank you, Andrew
  5. SerenityNetworks
    Would you mind helping me with the syntax? I've actually tried all three options and none have worked. I'm obviously making some mistake, but I don't know where. I would have thought setting a global variable would have been the easiest and most efficient, but... Thanks, Andrew
  6. SerenityNetworks
    I'm stuck on passing and using a calculated value. I'm using the function on line 361 (in code below) to provide the current playback time of the video that's running. It calculates fine and I can display it on the screen while the video is running and paused. But I can't capture the value to use in a variable. It's probably bonehead simple, but I'm not figuring it out. I'm going to add a manually entered 'offset' value to the current playback time. For example, I'll manually enter "060031" as the offset value. When the video is at timestamp "1" then the two values added will be "060032". A findWord function searches for "060032" in a textArea and highlights and scrolls to the value. Then setInterval will cause the routine to repeat and at timestamp "2" the findWord function will look for "060033", and then goes on until the video ends. This all works fine when I enter the values manually. But now I need to make it dynamic so I can use the setInterval function to have the findWord function repeatedly find values as they occur while the video is running. I need to place the value for the current playback time (calculated on line 361) in the variable on line 452 (vidTime). I'd really appreciate any help with this. I've fooled with it for hours and I'm not figuring out the solution. Thanks in advance, Andrew <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Fagan Audit Tool</title><script type="text/javascript" src="js/jquery.js"></script><style>#title { font-family:Arial, Helvetica, sans-serif; font-size:xx-large; font-weight:bold; color:black; text-align:center;}#video { margin-top: 10px; margin-bottom: 2px; background: gray; background-position: center;}#speeds { width: 40px; margin-bottom:10px; font-size: xx-large; background: #808080; background-position:center; border:medium; border-color:black; border-style:solid; font-weight: bold; font-family:Arial, Helvetica, sans-serif;}/* STYLES FOR THE JSON TABLE */table { border: 1px solid #666; width: 100%;}th { background: #f8f8f8; font-weight: bold; padding: 2px;}/* END OF STYLES FOR THE JSON TABLE *//* VIDEO STYLES */.info { background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: small;}.error { background-color: red; color: white; font-family: Arial, Helvetica, sans-serif; font-size: small;}.myStyle1 { font-family: Arial, Helvetica, sans-serif; font-size: small;}.myStyle2 { font-size: small;}/* END OF VIDEO STYLES *//* START OF SKEW STYLES */ div.transbox { width: 1px; height: 1px; } div.transbox p { position:fixed; margin-left: 1px; width: 1px; height: 1px; background-color:yellow; opacity:0.01; /* filter: alpha(opacity=40); */ /* For IE8 and earlier */ /* ms-transform: skew(20deg,10deg); *//* IE 9 */ /* webkit-transform: skew(20deg,10deg); *//* Safari */ transform: skew(0.1deg,0.1deg); /* Standard syntax */ }/* END OF SKEW STYLES */</style></head><body onkeypress="mainFunction(event)"> <div id="title" class="myStyle2">Fagan Consulting - Lane Audit Tool</div> <table cellpadding="0" cellspacing="0" align="center"> <tr align="center"> <td colspan="3"> <div style="text-align:center"> <button onclick="playPause()" class="myStyle1">Play/Pause</button> <button onclick="muteUnmute()" class="myStyle1">Mute/Unmute</button> <input type="file" accept="video/*"/> <span id="message" visible="false"></span> <br/> <button onclick="sizer(50)" class="myStyle1">Smallest</button> <button onclick="sizer(75)" class="myStyle1">Smaller</button> <button onclick="sizer(100)" class="myStyle1">Normal</button> <button onclick="sizer(150)" class="myStyle1">Larger</button> <button onclick="sizer(200)" class="myStyle1">Largest</button> <br class="myStyle1"/> <span class="myStyle1">Playback Speeds: </span> <button onclick="speed(0.10)" class="myStyle1">10%</button> <button onclick="speed(0.25)" class="myStyle1">25%</button> <button onclick="speed(0.50)" class="myStyle1">50%</button> <button onclick="speed(0.75)" class="myStyle1">75%</button> <button onclick="speed(1.00)" class="myStyle1">100%</button> <button onclick="speed(1.25)" class="myStyle1">125%</button> <button onclick="speed(1.50)" class="myStyle1">150%</button> <button onclick="speed(1.75)" class="myStyle1">175%</button> <button onclick="speed(2.00)" class="myStyle1">200%</button> <button onclick="speed(4.00)" class="myStyle1">400%</button> <br class="myStyle1"/> <span class="myStyle1">Set Time: </span> <button onclick="timeValue('txt1')">Manual</button> <input type="text" name="txt1" size="4" value="1" id="txt1"/> <button onclick="timeStart()" class="myStyle1">Start</button> <button onclick="timechange(-10)" class="myStyle1">-10</button> <button onclick="timechange(-8)" class="myStyle1">-8</button> <button onclick="timechange(-6)" class="myStyle1">-6</button> <button onclick="timechange(-4)" class="myStyle1">-4</button> <button onclick="timechange(-2)" class="myStyle1">-2</button> <button onclick="timechange(2)" class="myStyle1">+2</button> <button onclick="timechange(4)" class="myStyle1">+4</button> <button onclick="timechange(6)" class="myStyle1">+6</button> <button onclick="timechange(8)" class="myStyle1">+8</button> <button onclick="timechange(10)" class="myStyle1">+10</button> <button onclick="timeEnd()" class="myStyle1">End</button> Pause After Changes: <input type="text" name="txt2" size="4" value="2" id="txt2"/> </div> </td> </tr> <tr align="center"> <td align="center" valign="top"> <video id="video" class="myStyle1"></video> <!-- <span class="myStyle1"> </span> --> </td> <td align="left" valign="top"><!-- ================ JSON =============== --> <div> <input id="findWord" type="text" value="" name="vidTime"/> <a onclick="javascript:findWord(jQuery('#findWord').val())" href="javascript:;">Find</a> </div> <br/> <button id="xxxxx">W:</button><!--will make this to allow setting of textarea width manually--> <input type="text" id="jsonWidth" style="width: 30px"/> <button id="xxxxx">H:</button><!--will make this to allow setting of textarea height manually--> <input type="text" id="jsonHeight" style="width: 30px"/> Offset: <input type="text" name="vidOff" value="" style="width:80px"/><br/> <input type="file" id="theDataFile" single class="myStyle2"/><br/> <!-- old code for when using div instead of a textarea <div align="center" style="height:380px;border:1px solid #ccc;font:Arial, Helvetica, sans-serif;overflow:auto;"> <div id="id01" align="center"></div> </div> --> <textarea id="id01" style="border:1px solid #ccc;font:Arial, Helvetica, sans-serif;overflow:auto;" rows="24" cols="40"></textarea> </td> <td align="center" valign="top"><!-- ============== KEYPRESS LOG ============== --> <br/> <button onclick="toggleLogDisplay();" id="buttonText01">Hide the Log</button> <button onclick="toggleLogButton(event);" id="buttonText02">Start Logging Keystrokes</button> <input type="button" value="Clear the Log" onclick="javascript:eraseText();"/> <div id="toggleLog">Press ESC to start logging or use one of the buttons below.</div> <textarea id='logArea' style="height:364px;width:300px;border:1px solid #ccc;font:Arial, Helvetica, sans-serif;overflow:auto;"></textarea> </td> </tr> <tr align="center"> <td colspan="3"> <div> <span class="myStyle1">[Current Playback Speed: <span id="speed"></span>] </span> <button onclick="speed(vvid.playbackRate-0.1)" id="speeds" class="myStyle2"><img alt="slow" height="25" src="images/slow.png" width="25" /></button> <button onclick="backIt(this)" id="speeds" class="myStyle2"><img alt="slow" height="25" src="images/back.png" width="25" /></button> <button onclick="playPause()" id="speeds" class="myStyle2">II</button> <button onclick="forwardIt(this)" id="speeds" class="myStyle2"><img alt="fast" height="25" src="images/forward.png" width="25" /></button> <button onclick="speed(vvid.playbackRate+0.1)" id="speeds" class="myStyle2"><img alt="fast" height="25" src="images/fast.png" width="25" /></button> <span class="myStyle1"> [Playback position: <span id="elapsed"></span> of <span id="duration"></span>] </span> </div> </td> </tr> </table><button onclick="setInterval(function(){alert('Hello')},3000);">Try it</button> <button onclick="clearInterval(myVar)">Stop time</button><!-- BELOW IS THE AREA SET UP FOR THE SKEW --> <div class="transbox"> <p> </p><!--This is the element that is overlayed with the transparency.--> </div> <br/><br/><table style="width:300"> <tr><td colspan="2">Update values to modify lane highlight overlay.</td></tr> <tr><td>Mask Color</td><td><input type="text" id="MaskColor" value="yellow"/></td></tr> <tr><td>Left Margin</td><td><input type="text" id="MarginLeft" value="250"/></td></tr> <tr><td>Top Margin</td><td><input type="text" id="MarginTop" value="-425"/></td></tr> <tr><td>Opacity</td><td><input type="text" id="Opacity" value="0.75"/></td></tr> <tr><td>Skew</td><td><input type="text" id="Skew" value="105"/></td></tr> <tr><td>Width</td><td><input type="text" id="Width" value="15"/></td></tr> <tr><td>Height</td><td><input type="text" id="Height" value="150"/></td></tr> <tr><td colspan="2"><button onclick="myFunction01()">Change Values</button></td></tr></table><br/><br/><br/><p id="d01" style="color:white;"><font color="white"></font></p><!--Need a placeholder for the skew variables, but making it white so it doesn't show on screen.--><!-- ABOVE IS THE AREA SET UP FOR THE SKEW --><!-- ---------- JAVASCRIPT ------------ --><script type="text/javascript">// ------------ ON LOAD ------------ toggleLogDisplay();//initializes the toggle value, so next time the function will work (to hide the field) var loggingEnabled = false; // ---------- VIDEO LOADER ---------- var vvid = document.getElementById("video"); (function localFileVideoPlayerInit(win) { var URL = win.URL || win.webkitURL, displayMessage = (function displayMessageInit() { var node = document.querySelector('#message'); return function displayMessage(message, isError) { node.innerHTML = message; node.className = isError ? 'error' : 'info'; }; }()),//ORIG playSelectedFile = function playSelectedFileInit(event) { playSelectedFile = function playSelectedFileInit() { var file = this.files[0]; var type = file.type; var videoNode = document.querySelector('video'); muteUnmute(); var canPlay = videoNode.canPlayType(type); canPlay = (canPlay === '' ? 'no' : canPlay); if (canPlay === "no") { var message = 'Cannot play video (type) "' + type + '"'; } else { var message = ""; } var isError = canPlay === 'no'; displayMessage(message, isError); if (isError) { return; } var fileURL = URL.createObjectURL(file); videoNode.src = fileURL; }, inputNode = document.querySelector('input'); if (!URL) { displayMessage('Your browser is not ' + '<a href="http://caniuse.com/bloburls">supported</a>!', true); return; } inputNode.addEventListener('change', playSelectedFile, false);}(window));//---------------------------------------------------------------------------------var taRows = "24"; //IMPORTANT: make value same as rows value in the TextArea tag, until code added to make manualdocument.getElementById("id01").rows = taRows;// ---When play/pause is toggled this toggles the setInterval function that drives the search time functionfunction timerOnOff(val) { if (val === 1) { //alert("val = " + val); //var setInt = setInterval(function(){intervalTimer()},3250); //tossme(); } else { //clearInterval(setInt); //alert("val = " + val); } }function tossme(){alert("in tossme");} //for testing. timerOnOff will really trigger findWord function (below at ~ line 495) // ------------ PLAY PAUSE ------------ function playPause() { if (vvid.paused) {vvid.play(); timerOnOff(1); } else { vvid.pause(); timerOnOff(3); } }// ------------ SOUND ------------ function muteUnmute() { if (vvid.muted) vvid.muted = false; else vvid.muted = true; } // ------------ RESIZE VIDEO ------------ function sizer(val) { vvid.width = 720*val/100; } // ------------ PLAYBACK SPEED ------------ function speed(val) { vvid.playbackRate = val; } // ------------ SET TIME POSITION ------------ function timeStart() { vvid.currentTime=0; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeEnd() { vvid.currentTime=vvid.duration;}function timeValue() { var txtbox1 = document.getElementById(id="txt1"); var txt1value = txtbox1.value; vvid.currentTime=txt1value var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timechange(val) { vvid.currentTime=vvid.currentTime+val; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function backIt(x) {vvid.currentTime=vvid.currentTime-1;}function normalIt(x) {}function forwardIt(x) {vvid.currentTime=vvid.currentTime+1;}// Get the video playback position element (time value) and ending time value with id="video" var vid = document.getElementById("video"); // Assign an ontimeupdate event to the video element, and execute a function if the current playback position has changed vid.ontimeupdate = function() {myFunctionP()}; function myFunctionP() { document.getElementById("elapsed").innerHTML = (Math.round(vid.currentTime*100)/100).toFixed(2);// ???? HOW DO I USE THE 'ELAPSED' VALUE IN A VARIABLE ??? // I NEED TO USE THE TIME VALUE ON ROW 452 FOR THE vidTime VALUE document.getElementById("duration").innerHTML = (Math.round(vid.duration*100)/100).toFixed(2); document.getElementById("speed").innerHTML = (Math.round(vid.playbackRate*100)/100).toFixed(1); }/* THE CODE BELOW IS USED TO MANAGE THE SKEW VARIABLES */function setStyle(cssText) { var sheet = document.createElement('style'); sheet.type = 'text/css'; /* Optional */ window.customSheet = sheet; (document.head || document.getElementsByTagName('head')[0]).appendChild(sheet); return (setStyle = function(cssText, node) { if(!node || node.parentNode !== sheet) return sheet.appendChild(document.createTextNode(cssText)); node.nodeValue = cssText; return node; })(cssText);};function myFunction01() { var mF01 = document.getElementById("MaskColor").value; document.getElementById("d01").innerHTML = mF01; setStyle('div.transbox p{ background-color:'+mF01+'; }', setStyle('div.transbox p{}')); // Replaces the previous CSS with this one var mF02 = document.getElementById("MarginLeft").value; document.getElementById("d01").innerHTML = mF02; setStyle('div.transbox p{ margin-left:'+mF02+'px; }', setStyle('div.transbox p{}')); var mF03 = document.getElementById("MarginTop").value; document.getElementById("d01").innerHTML = mF03; setStyle('div.transbox p{ margin-top:'+mF03+'px; }', setStyle('div.transbox{} p')); var mF04 = document.getElementById("Opacity").value; document.getElementById("d01").innerHTML = mF04; setStyle('div.transbox p{ opacity:'+mF04+'; }', setStyle('div.transbox p{}')); var mF05 = document.getElementById("Skew").value; document.getElementById("d01").innerHTML = mF05; setStyle('div.transbox p{ transform:skew('+mF05+'deg,0.1deg); }', setStyle('div.transbox p{}')); var mF06 = document.getElementById("Width").value; document.getElementById("d01").innerHTML = mF06; setStyle('div.transbox p{ width:'+mF06+'px; }', setStyle('div.transbox p{}')); var mF07 = document.getElementById("Height").value; document.getElementById("d01").innerHTML = mF07; setStyle('div.transbox p{ height:'+mF07+'px; }', setStyle('div.transbox p{}'));};/* THE CODE ABOVE IS USED TO MANAGE THE SKEW VARIABLES */ /* THE CODE BELOW IS USED TO MANAGE THE JSON IMPORT */ var control = document.getElementById("theDataFile"); control.addEventListener("change", function(event) { // When the control has changed, there are new files var i = 0, files = control.files, len = files.length; for (; i < len; i++) { //alert("Filename: " + files[i].name + " | Type: " + files[i].type + " | Size: " + files[i].size + " bytes"); var url2 = files[i].name; } var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var myArr = JSON.parse(xmlhttp.responseText); myFunction(myArr); } } xmlhttp.open("GET", url2, true); xmlhttp.send(); function myFunction(arr) { var out = ""; var i; for(i = 0; i < arr.length; i++) { out += '' + arr[i].time + ' | ' + arr[i].text + ' ';// out += '<tr><td><input type="checkbox"></td><td>' + arr[i].time + '</td><td>' + arr[i].text + '</td></tr>'; } document.getElementById("id01").innerHTML = out;// document.getElementById("id01").innerHTML = '<table><tr><th>Mark</th><th>Time</th><th>Data</th></tr>' + out + '</table>'; }}, false);/* THE CODE ABOVE IS USED TO MANAGE THE JSON IMPORT */ /* THE CODE BELOW IS USED TO MANAGE THE HIGHLIGHTING THE VIDEO TIMESTAMP IN THE JSON DATA */ function findWord(search_chars) {var vidTime = 1; //THE "1" VALUE IS A PLACEHOLDER. THE CURRENT VIDEO PLAYBACK TIME IS NEEDED HERE, BUT I CAN'T FIGURE OUT HOW TO DO IT ! ! ! ! !//var vidTime = document.querySelector('[name="vidTime"]').value; //this will be the video timestamp when merged into main codevar vidOff = document.querySelector('[name="vidOff"]').value; //this will be the value to add to the video timestamp to make equal to the lane data timevar search_chars = +vidTime + +vidOff; //this adds video time to the offset. Ex: 1 + 60501 = 60502. Script will search for 60502var strM = '' + search_chars + '';var strN = '' + strM.length + '';if (strN === "5") {var search_chars = "0" + search_chars;}var search_chars = '' + search_chars + ''; //this converts number to text, as query searches by textvar posi = jQuery('#id01').val().indexOf(search_chars); // take the position of the word in the textif (posi != -1) { var target = document.getElementById("id01"); target.focus(); if (target.setSelectionRange) target.setSelectionRange(posi, posi+search_chars.length); else { var r = target.createTextRange(); r.collapse(true); r.moveEnd('character', posi+search_chars); r.moveStart('character', posi); r.select(); } var objDiv = document.getElementById("id01"); var sh = objDiv.scrollHeight; //height in pixel of the textarea var line_ht = jQuery('#id01').css('line-height').replace('px',''); //height in pixel of each row var n_lines = sh/line_ht; // total amount of lines in the textarea var char_in_line = jQuery('#id01').val().length / n_lines; // the total amount of chars in each row var height = Math.floor(posi/char_in_line); // height in number of rows of the searched word// jQuery('#my_textarea').scrollTop(height*line_ht); // puts line with selected word at top of TextArea jQuery('#id01').scrollTop((height*line_ht)-(taRows*line_ht/2)); // puts line with selected word in middle of TextArea//alert('taRows = ' + taRows + ' | char_in_line = ' + char_in_line + ' | posi = ' + posi + ' | sh = ' + sh + ' | line_ht = ' + line_ht + ' | n_lines = ' + n_lines + ' | height = ' + height);} else { alert('Characters "'+search_chars+'" not found.');//will remove this else case once setInterval is running.} }/* THE CODE ABOVE IS USED TO MANAGE THE HIGHLIGHTING THE VIDEO TIMESTAMP IN THE JSON DATA */ /* THE CODE BELOW IS USED TO MANAGE THE KEY PRESS LOGGING */ function eraseText() { document.getElementById("logArea").value = "";//function to clear the log field}function mainFunction(event) { var kp1 = event.which || event.keyCode;//returns the unicode number if (kp1 == 27){//escape key to disable loggingEnabled = !loggingEnabled; var bt3; bt3 = loggingEnabled; if (bt3 == true) {bt3 = "Disable Logging";} else {bt3 = "Enable Logging";} document.getElementById("buttonText02").innerHTML = bt3; } if (!loggingEnabled){ return; } //following lines populate the log if (kp1 == 1||kp1 == 27) {kp2 = "START";} else {var kp2 = String.fromCharCode(kp1);}//converts the unicode number to the key value var d = new Date(); var d = d.toLocaleTimeString(); document.getElementById("toggleLog").innerHTML = "Logging enabled. Last key: " + kp2 + " at " + d; document.getElementById("logArea").value += kp2 + " | " + d + " | " + "n"; }function toggleLogButton(event){//this function enables or disables the keypress logging var bt2; bt2 = loggingEnabled; loggingEnabled = !loggingEnabled; bt2 = loggingEnabled if (bt2 == true) {bt2 = "Disable Logging";} else {bt2 = "Enable Logging";} document.getElementById("buttonText02").innerHTML = bt2; mainFunction(event); }function toggleLogDisplay(event){//this function hides or shows the log TextArea var el1 = document.getElementById('logArea'); var style = el1.style.display; var bt1; el1.style.display = style == "block" ? "none" : "block"; if (style == "none"||style == "") {bt1 = "Hide the Log";} else {bt1 = "Display the Log";} document.getElementById("buttonText01").innerHTML = bt1; //event.preventDefault();//we don't want the browsers default link behavior - uncomment if using a hyperlink for a trigger instead of a button}/* THE CODE ABOVE IS USED TO MANAGE THE KEY PRESS LOGGING */ </script></body></html>
  7. SerenityNetworks
    UPDATE: I've made some progress with using jquery, as shown in the code in the page below. I think I'll be able to query for the time stamp in the json data. (That will be my next step.) But how do I cause this routine to run several times a second? Thanks, Andrew <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><script type="text/javascript" src="js/jquery.js">jQuery(document).ready(function($) { });</script><!-- <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script> --><title>Search TextArea 01</title></head><body>Sources: <a href="http://blog.blupixelit.eu/scroll-textarea-to-selected-word-using-javascript-jquery/">Here</a><br/>and <a href="http://stackoverflow.com/questions/642353/dynamically-scrolling-a-textarea">here,</a><br/>and <a href=" ">here.</a><hr/><p onclick="$(this).hide();">Test jquery: Click here to hide me.</p><hr/><p>Enter characters in field and click the Find link. Characters will be highlighted in the TextArea. (tested in FireFox):</p><div><input id="findWord" type="text" value="bottom"/><!-- <a onclick="javascript:findWord(jQuery('#findWord').val())" href="javascript:;">Find</a> --><a onclick="javascript:findWord(jQuery('#findWord').val())" href="javascript:;">Find</a></div><textarea id="my_textarea" style="line-height: 15px;" rows="3" cols="40">This is a test. This is only a test. If this had been a real event then something else would be said.And here is a new line to test.And yet another line is here at the bottom.</textarea><script type="text/javascript">function findWord(search_chars) {var posi = jQuery('#my_textarea').val().indexOf(search_chars); // take the position of the word in the textif (posi != -1) { var target = document.getElementById("my_textarea"); target.focus(); if (target.setSelectionRange) target.setSelectionRange(posi, posi+search_chars.length); else { var r = target.createTextRange(); r.collapse(true); r.moveEnd('character', posi+search_chars); r.moveStart('character', posi); r.select(); } var objDiv = document.getElementById("my_textarea"); var sh = objDiv.scrollHeight; //height in pixel of the textarea var line_ht = jQuery('#my_textarea').css('line-height').replace('px',''); //height in pixel of each row var n_lines = sh/line_ht; // total amount of lines in the textarea var char_in_line = jQuery('#my_textarea').val().length / n_lines; // the total amount of chars in each row var height = Math.floor(posi/char_in_line); // height in number of rows of the searched word jQuery('#my_textarea').scrollTop(height*line_ht); // scroll to the selected line containing the word} else { alert('Characters "'+search_chars+'" not found.');}}</script></body></html>
  8. SerenityNetworks
    UPDATE: Restarting question/post here... I have a working page now and can import a json file. Now I need to get back to scrolling the json data (shown in a textarea) with the video being played. I suppose the easiest way would be just to scroll the textarea 1 line at every n interval. But that would not keep the timestamps of the lines in sync with the video as it is sped up, slowed down, or skipped to a new frame. I can use the following function to get the portion of the video showing. function myFunctionP() {// Display the current position of the video in an element with id="elapsed"document.getElementById("elapsed").innerHTML = (Math.round(vid.currentTime*100)/100).toFixed(2);} As I create the json file, I have the opportunity to put the time field in any format I desire. I'm thinking this will allow me to query the times in the json structure and scroll to the row with the nearest time stamp. Actually, if the textarea is displaying 15 rows of data then I'd really like the time closest matching the video time to be shown in the middle of the textarea and highlighted in some fashion (highlight, font color, bold font, or similar). But I have absolutely no idea how to accomplish this task or the coding involved. Right now, I'm not even finding how to scroll a textarea, much less query the data in it and scroll to that location. Any help will be greatly appreciated. Thanks in advance, Andrew JSON FILE: [{"time":"060033.410", "text":"VEHL CL=2/2","x":"x"},{"time":"060040.840", "text":"VEHL CL=2/2","x":"x"},{"time":"060103.750", "text":"VIOL CL=3/3","x":"x"},{"time":"060115.010", "text":"VIOL CL=3/3","x":"x"},{"time":"060156.920", "text":"VIOL CL=3/3","x":"x"},{"time":"060158.440", "text":"VEHL CL=2/2","x":"x"},{"time":"060204.260", "text":"BTAG T=1-178143 S","x":"x"},{"time":"060304.000", "text":"VEHL CL=2/2","x":"x"},{"time":"060408.910", "text":"VEHL CL=2/2","x":"x"},{"time":"060438.860", "text":"VEHL CL=2/2","x":"x"}]
  9. SerenityNetworks
    Some html style issues, but no js unless I'm reading it wrong.
  10. SerenityNetworks
    Firefox. Thanks. I'll take a look at the console.
  11. SerenityNetworks
    No, I'm not checking for JS errors. How would I go about doing that?
  12. SerenityNetworks
    The following page works fine (for the functionalities finished so far). BUT when I move one input tag from the top of a table to the middle of the same table it ceases to work. I can't figure it out. For a nice layout I need to move the input tag. (See comments in code, lines 99 & 146, for where it works and where it needs to appear.) Any help on getting it to function in the proper place will be greatly appreciated. Thanks in advance, Andrew <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Video Review</title><style>#title { font-family:Arial, Helvetica, sans-serif; font-size:xx-large; font-weight:bold; color:black; text-align:center;}#video { margin-top: 10px; margin-bottom: 2px; background: gray; background-position: center;}#speeds { width: 40px; margin-bottom:10px; font-size: xx-large; background: #808080; background-position:center; border:medium; border-color:black; border-style:solid; font-weight: bold; font-family:Arial, Helvetica, sans-serif;}/* STYLES FOR THE JSON TABLE */table { border: 1px solid #666; width: 100%;}th { background: #f8f8f8; font-weight: bold; padding: 2px;}/* END OF STYLES FOR THE JSON TABLE *//* VIDEO STYLES */.info { background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: small;}.error { background-color: red; color: white; font-family: Arial, Helvetica, sans-serif; font-size: small;}.myStyle1 { font-family: Arial, Helvetica, sans-serif; font-size: small;}.myStyle2 { font-size: small;}/* END OF VIDEO STYLES *//* START OF SKEW STYLES */ div.transbox { width: 1px; height: 1px; } div.transbox p { position:fixed; margin-left: 1px; width: 1px; height: 1px; background-color:yellow; opacity:0.01; /* filter: alpha(opacity=40); */ /* For IE8 and earlier */ /* ms-transform: skew(20deg,10deg); *//* IE 9 */ /* webkit-transform: skew(20deg,10deg); *//* Safari */ transform: skew(0.1deg,0.1deg); /* Standard syntax */ }/* END OF SKEW STYLES */</style></head><body onkeypress="mainFunction(event)"> <div id="title" class="myStyle2">Fagan Consulting - Lane Audit Tool</div> <table cellpadding="0" cellspacing="0" align="center"> <tr align="center"> <td colspan="3"> <div style="text-align:center"> <!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX --> <input type="file" accept="video/*"/> <!-- INPUT WORKS FINE HERE, BUT I WANT IT APPEARING WHERE INDICATED BELOW !!! --> <span id="message" visible="false"></span> <br/> <button onclick="sizer(50)" class="myStyle1">Smallest</button> <button onclick="sizer(75)" class="myStyle1">Smaller</button> <button onclick="sizer(100)" class="myStyle1">Normal</button> <button onclick="sizer(150)" class="myStyle1">Larger</button> <button onclick="sizer(200)" class="myStyle1">Largest</button> <br class="myStyle1"/> <span class="myStyle1">Playback Speeds: </span> <button onclick="speed(0.10)" class="myStyle1">10%</button> <button onclick="speed(0.25)" class="myStyle1">25%</button> <button onclick="speed(0.50)" class="myStyle1">50%</button> <button onclick="speed(0.75)" class="myStyle1">75%</button> <button onclick="speed(1.00)" class="myStyle1">100%</button> <button onclick="speed(1.25)" class="myStyle1">125%</button> <button onclick="speed(1.50)" class="myStyle1">150%</button> <button onclick="speed(1.75)" class="myStyle1">175%</button> <button onclick="speed(2.00)" class="myStyle1">200%</button> <button onclick="speed(4.00)" class="myStyle1">400%</button> <br class="myStyle1"/> <span class="myStyle1">Set Time: </span> <button onclick="timeValue('txt1')">Manual</button> <input type="text" name="txt1" size="4" value="1" id="txt1"/> <button onclick="timeStart()" class="myStyle1">Start</button> <button onclick="timechange(-10)" class="myStyle1">-10</button> <button onclick="timechange(-8)" class="myStyle1">-8</button> <button onclick="timechange(-6)" class="myStyle1">-6</button> <button onclick="timechange(-4)" class="myStyle1">-4</button> <button onclick="timechange(-2)" class="myStyle1">-2</button> <button onclick="timechange(2)" class="myStyle1">+2</button> <button onclick="timechange(4)" class="myStyle1">+4</button> <button onclick="timechange(6)" class="myStyle1">+6</button> <button onclick="timechange(8)" class="myStyle1">+8</button> <button onclick="timechange(10)" class="myStyle1">+10</button> <button onclick="timeEnd()" class="myStyle1">End</button> Pause After Changes: <input type="text" name="txt2" size="4" value="2" id="txt2"/> </div> <br/> </td> </tr> <tr align="center"> <td align="center" valign="top"><!-- ============== VIDEO ============== --> <div> <button onclick="playPause()">Play/Pause</button> <button onclick="muteUnmute()" type="button">Mute/Unmute</button> <!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX --> <input type="file" accept="video/*"/> <!-- INPUT DOES NOT WORK WHEN PLACED HERE! WHY? THIS IS WHERE I WANT IT. ?????? --> <span id="message"></span> <br/> </div> <video id="video" controls class="myStyle1"></video><span class="myStyle1"> </span> </td> <td align="center" valign="top"><!-- ============== KEYPRESS LOG ============== --> <button onclick="toggleLogDisplay();" id="buttonText01">Hide the Log</button> <button onclick="toggleLogButton(event);" id="buttonText02">Start Logging Keystrokes</button> <input type="button" value="Clear the Log" onclick="javascript:eraseText();"/><br/> <p id="toggleLog">Press ESC to start logging or use one of the buttons below.</p> <textarea id='myTextArea' align="left" style="height:400px;width:300px;border:1px solid #ccc;font:Arial, Helvetica, sans-serif;overflow:auto;"></textarea> </td> <td align="center" valign="top"><!-- ================ JSON =============== --> <button onclick="getDataFile();" id="id04" class="myStyle2">Select Data File</button><br/><br/> <div align="center" style="height:380px;border:1px solid #ccc;font:Arial, Helvetica, sans-serif;overflow:auto;"> <div id="id01" align="center"></div> </div> </td> </tr> <tr align="center"> <td colspan="3"> <div> <span class="myStyle1">[Current Playback Speed: <span id="speed"></span>] </span> <button onclick="speed(vvid.playbackRate-0.1)" id="speeds" class="myStyle2"><img alt="slow" height="25" src="images/slow.png" width="25" /></button> <button onclick="backIt(this)" id="speeds" class="myStyle2"><img alt="slow" height="25" src="images/back.png" width="25" /></button> <button onclick="playPause()" id="speeds" class="myStyle2">II</button> <button onclick="forwardIt(this)" id="speeds" class="myStyle2"><img alt="fast" height="25" src="images/forward.png" width="25" /></button> <button onclick="speed(vvid.playbackRate+0.1)" id="speeds" class="myStyle2"><img alt="fast" height="25" src="images/fast.png" width="25" /></button> <span class="myStyle1"> [Playback position: <span id="elapsed"></span> of <span id="duration"></span>] </span> </div> </td> </tr> </table><!-- BELOW IS THE AREA SET UP FOR THE SKEW --> <div class="transbox"> <p> </p><!--This is the element that is overlayed with the transparency.--> </div> <br/><br/><table style="width: 300"> <tr><td colspan="2">Update values to modify lane highlight overlay.</td></tr> <tr><td>Mask Color</td><td><input type="text" id="MaskColor" value="yellow"/></td></tr> <tr><td>Left Margin</td><td><input type="text" id="MarginLeft" value="250"/></td></tr> <tr><td>Top Margin</td><td><input type="text" id="MarginTop" value="-425"/></td></tr> <tr><td>Opacity</td><td><input type="text" id="Opacity" value="0.75"/></td></tr> <tr><td>Skew</td><td><input type="text" id="Skew" value="105"/></td></tr> <tr><td>Width</td><td><input type="text" id="Width" value="15"/></td></tr> <tr><td>Height</td><td><input type="text" id="Height" value="150"/></td></tr> <tr><td colspan="2"><button onclick="myFunction01()">Change Values</button></td></tr></table><br/><br/><br/><p id="d01" style="color:white;"><font color="white"></font></p><!--Need a placeholder for the skew variables, but making it white so it doesn't show on screen.--><!-- ABOVE IS THE AREA SET UP FOR THE SKEW --><!-- ---------- JAVASCRIPT ------------ --><script>// ------------ ON LOAD ------------ toggleLogDisplay();//initializes the toggle value, so next time the function will work (to hide the field) //vvid.currentTime=0; //vvid.pause(); //muteUnmute();//okay outside of on-load var loggingEnabled = false;// ---------- VIDEO LOADER ---------- (function localFileVideoPlayerInit(win) { var URL = win.URL || win.webkitURL, displayMessage = (function displayMessageInit() { var node = document.querySelector('#message'); return function displayMessage(message, isError) { node.innerHTML = message; node.className = isError ? 'error' : 'info'; }; }()), playSelectedFile = function playSelectedFileInit(event) { var file = this.files[0]; var type = file.type; var videoNode = document.querySelector('video'); muteUnmute(); var canPlay = videoNode.canPlayType(type); canPlay = (canPlay === '' ? 'no' : canPlay); var message = 'Ability to play video (type) "' + type + '": ' + canPlay; var isError = canPlay === 'no'; displayMessage(message, isError); if (isError) { return; } var fileURL = URL.createObjectURL(file); videoNode.src = fileURL; }, inputNode = document.querySelector('input'); if (!URL) { displayMessage('Your browser is not ' + '<a href="http://caniuse.com/bloburls">supported</a>!', true); return; } inputNode.addEventListener('change', playSelectedFile, false);}(window));// ------------ MAIN VARIABLES ------------ var vvid = document.getElementById("video"); // ------------ PLAY PAUSE ------------ function playPause() { if (vvid.paused) vvid.play(); else vvid.pause(); } // ------------ SOUND ------------ function muteUnmute() { if (vvid.muted) vvid.muted = false; else vvid.muted = true;}// ------------ RESIZE VIDEO ------------ function sizer(val) { vvid.width = 720*val/100; } // ------------ PLAYBACK SPEED ------------ function speed(val) { vvid.playbackRate = val;} // ------------ SET TIME POSITION ------------ function timeStart() { vvid.currentTime=0; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeEnd() { vvid.currentTime=vvid.duration;}function timeValue() { var txtbox1 = document.getElementById(id="txt1"); var txt1value = txtbox1.value; vvid.currentTime=txt1value var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timechange(val) { vvid.currentTime=vvid.currentTime+val; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function backIt(x) {vvid.currentTime=vvid.currentTime-1;}function normalIt(x) {//this would do something when then mouse leaves the + or - boxes}function forwardIt(x) {vvid.currentTime=vvid.currentTime+1;}// Get the video playback position element (time value) and ending time value with id="video" var vid = document.getElementById("video"); // Assign an ontimeupdate event to the video element, and execute a function if the current playback position has changed vid.ontimeupdate = function() {myFunctionP()}; function myFunctionP() { // Display the current position of the video in an element with id="elapsed" document.getElementById("elapsed").innerHTML = (Math.round(vid.currentTime*100)/100).toFixed(2); document.getElementById("duration").innerHTML = (Math.round(vid.duration*100)/100).toFixed(2); document.getElementById("speed").innerHTML = (Math.round(vid.playbackRate*100)/100).toFixed(1); }/* THE CODE BELOW IS USED TO MANAGE THE SKEW VARIABLES */function setStyle(cssText) { var sheet = document.createElement('style'); sheet.type = 'text/css'; /* Optional */ window.customSheet = sheet; (document.head || document.getElementsByTagName('head')[0]).appendChild(sheet); return (setStyle = function(cssText, node) { if(!node || node.parentNode !== sheet) return sheet.appendChild(document.createTextNode(cssText)); node.nodeValue = cssText; return node; })(cssText);};function myFunction01() { var mF01 = document.getElementById("MaskColor").value; document.getElementById("d01").innerHTML = mF01; setStyle('div.transbox p{ background-color:'+mF01+'; }', setStyle('div.transbox p{}')); // Replaces the previous CSS with this one var mF02 = document.getElementById("MarginLeft").value; document.getElementById("d01").innerHTML = mF02; setStyle('div.transbox p{ margin-left:'+mF02+'px; }', setStyle('div.transbox p{}')); var mF03 = document.getElementById("MarginTop").value; document.getElementById("d01").innerHTML = mF03; setStyle('div.transbox p{ margin-top:'+mF03+'px; }', setStyle('div.transbox{} p')); var mF04 = document.getElementById("Opacity").value; document.getElementById("d01").innerHTML = mF04; setStyle('div.transbox p{ opacity:'+mF04+'; }', setStyle('div.transbox p{}')); var mF05 = document.getElementById("Skew").value; document.getElementById("d01").innerHTML = mF05; setStyle('div.transbox p{ transform:skew('+mF05+'deg,0.1deg); }', setStyle('div.transbox p{}')); var mF06 = document.getElementById("Width").value; document.getElementById("d01").innerHTML = mF06; setStyle('div.transbox p{ width:'+mF06+'px; }', setStyle('div.transbox p{}')); var mF07 = document.getElementById("Height").value; document.getElementById("d01").innerHTML = mF07; setStyle('div.transbox p{ height:'+mF07+'px; }', setStyle('div.transbox p{}'));};/* THE CODE ABOVE IS USED TO MANAGE THE SKEW VARIABLES */ /* THE CODE BELOW IS USED TO MANAGE THE JSON IMPORT */ var xmlhttp = new XMLHttpRequest();var url2 = "85A-28507-21.txt";function getDataFile() { alert("Right now this doesn't do anything. Once coded it will allow the user to browse and select the data file to view."); document.getElementById("id04").innerHTML = url2; }xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var myArr = JSON.parse(xmlhttp.responseText); myFunction(myArr); }}xmlhttp.open("GET", url2, true);xmlhttp.send();function myFunction(arr) { var out = ""; var i; for(i = 0; i < arr.length; i++) { out += '<tr><td><input type="checkbox"></td><td>' + arr[i].time + '</td><td>' + arr[i].text + '</td></tr>'; } document.getElementById("id01").innerHTML = '<table><tr><th>Mark</th><th>Time</th><th>Data</th></tr>' + out + '</table>';}/* THE CODE ABOVE IS USED TO MANAGE THE JSON IMPORT */ /* THE CODE BELOW IS USED TO MANAGE THE KEY PRESS LOGGING */ function eraseText() { document.getElementById("myTextArea").value = "";//function to clear the log field}function mainFunction(event) { var kp1 = event.which || event.keyCode;//returns the unicode number if (kp1 == 27){//escape key to disable loggingEnabled = !loggingEnabled; var bt3; bt3 = loggingEnabled; if (bt3 == true) {bt3 = "Disable Logging";} else {bt3 = "Enable Logging";} document.getElementById("buttonText02").innerHTML = bt3; } if (!loggingEnabled){ return; } //following lines populate the log if (kp1 == 1||kp1 == 27) {kp2 = "START";} else {var kp2 = String.fromCharCode(kp1);}//converts the unicode number to the key value var d = new Date(); var d = d.toLocaleTimeString(); document.getElementById("toggleLog").innerHTML = "Logging enabled. Last key: " + kp2 + " at " + d; document.getElementById("myTextArea").value += kp2 + " | " + d + " | " + "n"; }function toggleLogButton(event){//this function enables or disables the keypress logging var bt2; bt2 = loggingEnabled; loggingEnabled = !loggingEnabled; bt2 = loggingEnabled if (bt2 == true) {bt2 = "Disable Logging";} else {bt2 = "Enable Logging";} document.getElementById("buttonText02").innerHTML = bt2; mainFunction(event); }function toggleLogDisplay(event){//this function hides or shows the log TextArea var el1 = document.getElementById('myTextArea'); var style = el1.style.display; var bt1; el1.style.display = style == "block" ? "none" : "block"; if (style == "none"||style == "") {bt1 = "Hide the Log";} else {bt1 = "Display the Log";} document.getElementById("buttonText01").innerHTML = bt1; //event.preventDefault();//we don't want the browsers default link behavior - uncomment if using a hyperlink for a trigger instead of a button}/* THE CODE ABOVE IS USED TO MANAGE THE KEY PRESS LOGGING */ </script></body></html>
  13. SerenityNetworks
    That is phenominal. Thank you. (I don't want to say how long I looked at the TextArea line and never noted the word 'default' ) Thanks again! Andrew
  14. SerenityNetworks
    Wow! Thank you! This is great. [updated Wednesday, 3/11, morning] Normally, I'd agree about mixing formats, but for this use it is actually preferred. I've modified the code a bit to use a pipe as the delimiter and the one or two users will know to append any edits after adding another pipe (which upon import to Excel will simply make three columns instead of two. (Even if they don't, correction will be easy.) Another reason for allowing the field to be editable is to allow users to edit or completely delete log entries. (For example, the user presses "2" but should have pressed "3". I need for them to be able to pause the system, change the entry, then re-enable the logging and then continue.) I want to keep it very simple. I don't need a lot of rules protection, or error handling. Manual edits within the field are desired for my purposes. Here's where I stand now: I can get the log to appear in a TextArea. This works fine initially, but once I've clicked in the TextArea then logging will no longer appear in the TextArea (even if I later remove focus from the field). If I can get the logging to continue in the TextArea after edits are made then I have my solution! The log records uppercase letters regardless of whether caps lock is on or not. I can't see where this is happening. It's not a show-stopper, but I'd rather it just recorded the key as it was pressed. The log records a letter when a number on the numeric keypad is pressed! This IS a show-stopper. Most of the entries made will be on the numeric keypad. The log needs to record the number, not a letter. I don't see where this conversion is occurring. The code for capturing the unicode and then converting it to the character is unchanged from my initial working example. Thanks again, Andrew CURRENT CODE: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Key Events 02</title></head><body onkeyup="mainFunction(event)"><p id="toggleLog">Press ESC to start logging or use one of the buttons below.</p><button onclick="toggleLogDisplay();" id="buttonText01">Display the Log</button> <button onclick="toggleLogButton(event);" id="buttonText02">Start Logging Keystrokes</button><br/><br/><!-- Original suggestion. The log works, but it needs to be editable. --><pre id='log' style="display:none">Code | Timestamp | Notes<br/></pre><br/><br/><!-- The following lets the user add text to the log, but once the field has been selected then no further log entries are made. --><textarea id='myTextArea' align="left" style="height:200px;width:350px;border:1px solid #ccc;font:Arial, Helvetica, sans-serif;overflow:auto;"></textarea><script>var loggingEnabled = false;function mainFunction(event) { var kp = event.which || event.keyCode;//returns the unicode number if (kp == 27){//escape key to disable loggingEnabled = !loggingEnabled; var bt3; bt3 = loggingEnabled; if (bt3 == true) {bt3 = "Disable Logging";} else {bt3 = "Enable Logging";} document.getElementById("buttonText02").innerHTML = bt3; } if (!loggingEnabled){ return; } var kp = String.fromCharCode(kp);//converts the unicode number to the key value var d = new Date(); var d = d.toLocaleTimeString(); document.getElementById("toggleLog").innerHTML = "Key logging is enabled. The last key pressed was: " + kp + " at " + d; //Add to the log, since it's in a <pre> tag we can use newlines and they will be displayed as well document.getElementById("log").innerHTML += kp + " | " + d + " | " + "n"; //The following adds the log to the TextArea, but once edited then logging stops - if fixed then this is solution document.getElementById("myTextArea").defaultValue += kp + " | " + d + " | " + "n"; }function toggleLogButton(event){ var bt2; bt2 = loggingEnabled; loggingEnabled = !loggingEnabled; bt2 = loggingEnabled if (bt2 == true) {bt2 = "Disable Logging";} else {bt2 = "Enable Logging";} document.getElementById("buttonText02").innerHTML = bt2; mainFunction(event); }function toggleLogDisplay(event){ var el1 = document.getElementById('log'); var style = el1.style.display; var bt1; el1.style.display = style == "block" ? "none" : "block"; if (style == "none") {bt1 = "Hide the Log";} else {bt1 = "Display the Log";} document.getElementById("buttonText01").innerHTML = bt1; event.preventDefault();//we don't want the browsers default link behavior}</script></body></html>
  15. SerenityNetworks
    I have the page below that notes a keypress event and the time it occurred. This works fine. But I would also like to keep a log of all keypress events that occur and have the ability to turn the logging off and on. I would prefer for the log to be kept in an editable field that I can copy and paste into Excel sometime later. Would someone please show me how this is done or point me to examples for the functions needed? Please guide me where I may be wrong, but I'm thinking I need: An example showing me how to turn the logging function off and on. An example showing me how to append to the log with each keypress event that occurs while the logging is turned on. How to keep or make the log field editable. Example for use:I'm logging key presses. (I'll be observing events in a video and I will press a designated key or number when certain events occur.) I want to stop and make a note of some observation. I turn off the logging. I enter my notes in the field where the log entries are being recorded. I turn back on the logging and continue the exercise. The log would look something like: Event: s | 1:32:09 AMEvent: s | 1:32:48 AMEvent: j | 1:33:00 AMEvent: 5 | 1:33:18 AM I turned off logging, made this note, and turned logging back on.Event: r | 1:34:06 AMEvent: s | 1:34:18 AM Any help with this will be greatly appreciated. Thanks in advance, Andrew The Current Web Page Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Key Events 01</title></head><body onkeypress="myFunction(event)"><p id="demo"></p><script>function myFunction(event) { var kp = event.which || event.keyCode;//returns the unicode number var kp = String.fromCharCode(kp);//converts the unicode number to the key value var d = new Date(); var d = d.toLocaleTimeString(); document.getElementById("demo").innerHTML = "The key pressed is is: " + kp + ". The time is: " + d;}</script></body></html>
  16. SerenityNetworks
    Never mind. I finally figured it out. I still need to clean up the page an implementation, but the following successfully will import a json (txt) file into a table on my web page. I'm posting it below for others that need a simple solution. Web Page Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>JSON 8</title><style>table { border: 1px solid #666; width: 100%;}th { background: #f8f8f8; font-weight: bold; padding: 2px;}</style></head><body><br/><br/>Example from: <a href="http://www.w3schools.com/json/json_http.asp">http://www.w3schools.com/json/json_http.asp</a><br/><br/><br/><strong>This one is working. Don't touch it!</strong><br/><br/><br/><div id="id01"></div><script>var xmlhttp = new XMLHttpRequest();var url = "tdata.txt";xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var myArr = JSON.parse(xmlhttp.responseText); myFunction(myArr); }}xmlhttp.open("GET", url, true);xmlhttp.send();function myFunction(arr) { var out = ""; var i; for(i = 0; i < arr.length; i++) { out += '<tr><td>' + arr[i].id + '</td><td>' + arr[i].display + '</td><td>' + arr[i].url + '</td></tr>'; } document.getElementById("id01").innerHTML = '<table><tr><th>This</th><th>That</th><th>Another</th></tr>' + out + '</table>';}</script></body></html> JSON The table will import a json (txt) file that is in the same directory as the web page. The file is created as follows: Open Notepad Paste in the text that is in the code block below. Save the file as "tdata.txt" in the same directory as the web page. [{"id": "Whoohoo! Let us go team!","display": "Tutorial","url": "http://www.w3schools.com/json/default.asp"},{"id": "I'm still excited.","display": "JSON Tutorial","url": "http://www.w3schools.com/json/json_example.asp"},{"id": "This is great.","display": "SQL Tutorial","url": "http://www.w3schools.com/sql/default.asp"},{"id": "I finally got something working.","display": "PHP Tutorial","url": "http://www.w3schools.com/php/default.asp"},{"id": "Whew!","display": "XML Tutorial","url": "http://www.w3schools.com/xml/default.asp"}]
  17. SerenityNetworks
    Please HOLD. I have a working page that imports a json (txt) file into a table. Now I need to think this through and figure out what I need next.
  18. SerenityNetworks
    I desperately need to get some simple data from a file into a table on a web page. I've been pointed to using JSON, but I'm not getting something(s) correct with implementation. I'm not sure what I'm doing wrong and I've spent hours on the task. I'm not a developer, but I can follow instructions. Any help will be greatly appreciated. Here is what I have set up: A simple web page. The code is pasted below. A simple JSON file (new.json). It is in the same path as the web page (C:xampphtdocsxamppaudit). The file's contents are pasted below. I'm running XAMPP as my server. Only Apache is turned on. I've placed a copy of jquery-1.11.2.min.js on my web server. I've tried placing the copy at both C:xampphtdocsxampp and C:xampphtdocsxamppaudit, but I have no idea if this is correct or not. I'll be very grateful for any assistance in getting the web page to return the contents of the new.json file into a table on the web page. Thanks in advance, Andrew PS. I do have a separate and related thread going here, but I started too advanced. Right now, I just need something simple. I'll work with the details in the other thread after I get a working import. web page code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>JSON 3</title><style>table { border: 1px solid #666; width: 100%;}th { background: #f8f8f8; font-weight: bold; padding: 2px;}</style></head><body>Example from: <a href="http://jsfiddle.net/sEwM6/258/">http://jsfiddle.net/sEwM6/258/</a><br/><br/><table id="personDataTable"> <tr> <th>Id</th> <th>First Name</th> <th>Last Name</th> </tr></table><script>$.ajax({ url: 'new.json', //Change this path to your JSON file. type: "post", dataType: "json", success: function(data, textStatus, jqXHR) { drawTable(data); }});function drawTable(data) { var rows = []; for (var i = 0; i < data.length; i++) { rows.push(drawRow(data[i])); } $("#personDataTable").append(rows);}function drawRow(rowData) { var row = $("<tr />") row.append($("<td>" + rowData.id + "</td>")); row.append($("<td>" + rowData.firstName + "</td>")); row.append($("<td>" + rowData.lastName + "</td>")); return row;}</script></body></html> new.json data: {json: JSON.stringify([{id: 1,firstName: "Peter",lastName: "Jhons"},{id: 2,firstName: "David",lastName: "Bowie"}]}
  19. SerenityNetworks
    Thank you! I haven't tried it over video yet, but it looks like "skew" is going to work perfectly. Thanks again, Andrew <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Skew1</title> <style> div.transbox { width: 1px; height: 1px; opacity:0.6; } div.transbox p { margin-left: 150px; margin-top: 15px; width: 20px; height: 200px; background-color: pink; filter: alpha(opacity=40); /* For IE8 and earlier */ ms-transform: skew(20deg,10deg); /* IE 9 */ webkit-transform: skew(20deg,10deg); /* Safari */ transform: skew(20deg,10deg); /* Standard syntax */ } p { font-weight: bold } </style></head><body> <div class="transbox"> <p> </p><!--This is the element that is overlayed with the transparency.--> </div><br/><br/><p>Resources:</p>http://www.w3schools.com/css/tryit.asp?filename=trycss_transparency<br/>http://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_skew<br/>http://www.w3schools.com/css/tryit.asp?filename=trycss_image_opacity<br/>http://www.corelangs.com/css/box/overlay.html<br/><br/></body></html>
  20. SerenityNetworks
    I found the following, which seems more straightfoward than the previous example. I'm trying to use the JSON file with the contents shown in the post above. The title of the JSON file is: "jsonTEST1.json" and it is in the same directory as the html page. Right now, just getting the data into a table on the page would be a great help. Thanks, Andrew <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>JSON2</title><style>table { border: 1px solid #666; width: 100%;}th { background: #f8f8f8; font-weight: bold; padding: 2px;}</style></head><body>Resource: <a href="http://jsfiddle.net/sEwM6/258/">http://jsfiddle.net/sEwM6/258/</a><br/><br/><table id="personDataTable"> <tr> <th>Id</th> <th>Time</th> <th>Text</th> </tr></table><script>$.ajax({ url: '', //Path to your JSON file. type: "post", dataType: "json", tdata: jsonTEST1.json([]), delay: 3, success: function(data, textStatus, jqXHR) { drawTable(data); }});function drawTable(data) { var rows = []; for (var i = 0; i < data.length; i++) { rows.push(drawRow(data[i])); } $("#personDataTable").append(rows);}function drawRow(rowData) { var row = $("<tr />") row.append($("<td>" + rowData.id + "</td>")); row.append($("<td>" + rowData.time + "</td>")); row.append($("<td>" + rowData.text + "</td>")); return row;}</script></body></html>
  21. SerenityNetworks
    Hmmm. I was hoping JavaScript might be able to used to enter values CSS could use. I thought I'd heard that CSS could be used to draw transparent shapes on web pages that weren't just plain rectangles with horizontal and vertical sides. But I haven't fooled web design technology in years, so I'm really not sure. I do know I'm not going to be purchasing third party software to do the trick. I'm just looking for something standard web coding can perform.
  22. SerenityNetworks
    I've cleaned up and got the json file in compliance, I believe. But I'm totally lost on the syntax to pull it into the page. I've pasted both the code from the page and an excerpt from the json file. Thank you for the help, Andrew PAGE CODE: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Testing JSON</title></head><body><h2>Testing JSON</h2><p id="testing"></p><div id="time"></div><div id="list"></div><script>window.onload = function(){var request = new XMLHttpRequest(); request.open('GET', 'file:jsonTEST1.json', false); request.send(null); function myHandler() {if (request.status == 0) console.log(request.responseText);var check = JSON.parse('(' + request.responseText + ')');}var list = document.getElementById('testing');for (var i=0, j=list.length; i<j; i++) { var time = document.getElementById('testing').getElementsByTagName('time')[0]; var text = document.getElementById('testing').getElementsByTagName('text')[0]; }}</script></body></html> JSON FILE: "tdata":[{"time":"060033.410", "text":"VEHL CL=2/2 PY=2 $=0 IX=2 FX=0 RX=0 ss=69 T=1-138045 S=2 H=15 I=0000 B=0 PT=AVI EM=28 ES=0003000C"},{"time":"060040.840", "text":"VEHL CL=2/2 PY=2 $=0 IX=2 FX=0 RX=0 ss=70 T=1-184152 S=2 H=5 I=0000 B=0 PT=AVI EM=28 ES=0003000C"{"time":"060103.750", "text":"VIOL CL=3/3 PY=0 $=0 IX=2 FX=0 RX=0 ss=73 T=1-37258 S=3 H=3 I=0000 B=0 V#=20824@060103 PT=VIOL EM=28 ES=0003000C"{"time":"060115.010", "text":"VIOL CL=3/3 PY=0 $=0 IX=2 FX=0 RX=0 ss=75 T=0-0 S=0 H=0 I=0000 B=0 V#=20825@060115 PT=VIOL EM=28 ES=0003000C"{"time":"060156.920", "text":"VIOL CL=3/3 PY=0 $=0 IX=2 FX=0 RX=0 ss=62 T=0-0 S=0 H=0 I=0000 B=0 V#=20826@060156 PT=VIOL EM=28 ES=0003000C"{"time":"060158.440", "text":"VEHL CL=2/2 PY=2 $=0 IX=2 FX=0 RX=0 ss=70 T=1-159147 S=2 H=7 I=0000 B=0 PT=AVI EM=28 ES=0003000C"{"time":"060204.260", "text":"VEHL CL=2/2 PY=2 $=0 IX=2 FX=0 RX=0 ss=82 T=1-34081 S=2 H=7 I=0000 B=0 PT=AVI EM=28 ES=0003000C"{"time":"060304.000", "text":"VEHL CL=2/2 PY=2 $=0 IX=2 FX=0 RX=0 ss=87 T=1-12145 S=2 H=6 I=0000 B=0 PT=AVI EM=28 ES=0003000C"{"time":"060408.910", "text":"VEHL CL=2/2 PY=2 $=0 IX=2 FX=0 RX=0 ss=73 T=1-209765 S=2 H=6 I=0000 B=0 PT=AVI EM=28 ES=0003000C"{"time":"060438.860", "text":"VEHL CL=2/2 PY=2 $=0 IX=2 FX=0 RX=0 ss=78 T=1-226711 S=2 H=9 I=0000 B=0 PT=AVI EM=28 ES=0003000C"{"time":"060502.150", "text":"VEHL CL=2/2 PY=2 $=0 IX=2 FX=0 RX=0 ss=75 T=1-192902 S=2 H=7 I=0000 B=0 PT=AVI EM=28 ES=0003000C"{"time":"062955.292", "text":"VEHL CL=2/2 PY=5 $=0 IX=2 FX=0 RX=0 ss=74 T=1-139094 S=2 H=5 I=0000 B=0 PT=NR-AVI EM=28 ES=0003000C"]
  23. SerenityNetworks
    Okay, I've parsed the data to a JSON file (pasted below). But I'm having zero success in getting it to display, in any fashion, on a web page (much less coordinated with video). Any help will be appreciated. Andrew [{"time":060033.410,"text": VEHL CL=2/2 PY=2 $=0 IX=2 FX=0 RX=0 mph=69 T=1-138045 S=2 H=15 I=0000 B=0 C=[0:0:0:0:0:0] PT=AVI EM=28 ES=0003000C"},{"time":060040.840,"text": VEHL CL=2/2 PY=2 $=0 IX=2 FX=0 RX=0 mph=70 T=1-184152 S=2 H=5 I=0000 B=0 C=[0:0:0:0:0:0] PT=AVI EM=28 ES=0003000C"},{"time":060103.750,"text": VIOL CL=3/3 PY=0 $=0 IX=2 FX=0 RX=0 mph=73 T=1-37258 S=3 H=3 I=0000 B=0 V#=20824@060103 C=[0:0:0:0:0:0] PT=VIOL EM=28 ES=0003000C"},{"time":060115.010,"text": VIOL CL=3/3 PY=0 $=0 IX=2 FX=0 RX=0 mph=75 T=0-0 S=0 H=0 I=0000 B=0 V#=20825@060115 C=[0:0:0:0:0:0] PT=VIOL EM=28 ES=0003000C"},{"time":060156.920,"text": VIOL CL=3/3 PY=0 $=0 IX=2 FX=0 RX=0 mph=62 T=0-0 S=0 H=0 I=0000 B=0 V#=20826@060156 C=[0:0:0:0:0:0] PT=VIOL EM=28 ES=0003000C"},]
  24. SerenityNetworks
    I'm not sure what the solution is, so I'm not sure if I should have placed this in the CSS, JavaScript, or another sub-forum. Please let me know if this needs to be moved or reposted. I'm going to have a video playing on an HTML5 web page (using JavaScript). I'd like to overlay a portion of the video with a quadralateral parallelogram transparent color "highlight" where the user controls where the overlay appears, how much transparency there is to the overlay, and perhaps the color of the overlay. A similar function is how it is shown on TV with the football line of scrimmage and first down lines overlayed on the football field. But I simply need a four sided parallelogram on the top layer. See the attached example image. I'm hoping that after the page loads and the video displays that the user can enter four coordinates and have the transparency display on (over) the page while the video is playing. I'm not particular: I don't care if the user scrolls the page causing the video to move while the highlighted area stays in the same place. I don't care if the user wants the highlighted area to go over portions of the page not covered by the video. I don't care if the coordinates are manually entered (it doesn't have to be fancy click and drag controls or anything). I don't care if the four points of the parallelogram are entered as x-y, pixels from edges, or whatever. I just need to be able to enter the four points, the percent transparency, and the color of the parallelogram in fields, press a button, and have the overlay appear as defined. Is this possible? Can anyone provide me with a solution or example? Thank you in advance, Andrew
  25. SerenityNetworks
    Thank you 'justsomeguy', but you might was well be talking in an alien language to me when you use terms like "JSON structure". I don't know how to even start working on what you have suggested. Below is the code of the page I'm working on (although I'm cleaning it up per the help I've received on another thread). I've also attached a sample of the text file (where I padded with pipes to make each row the same length). The second element in each line is the timestamp, although I can place it wherever is needed and can put it in whatever format is needed. Do you mind getting me going on this? Thanks, Andrew WEB PAGE: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Video Viewer</title><style>#title { font-family:Arial, Helvetica, sans-serif; font-size:xx-large; font-weight:bold; color:black; text-align:center;}#video { margin-top: 10px; margin-bottom: 2px; background: gray; background-position: center;}#speeds { width: 40px; margin-bottom:10px; font-size: xx-large; background: #808080; background-position:center; border:medium; border-color:black; border-style:solid; font-weight: bold; font-family: Arial, sans-serif;}/* STYLES FOR THE TEXT BLOBS */ #byte_content { margin: 5px 5px; max-height: 300px; overflow-y: auto; overflow-x: hidden; } #byte_range { margin-top: 5px; }/* END OF STYLES FOR THE TEXT BLOBS */</style></head><body onload="pageLoad()"> <div id="title">Video Viewer</div> <table cellpadding="0" cellspacing="0" align="center"> <tr align="center"> <td> <div style="text-align:center"> <button onclick="playPause()">Play/Pause</button> <button onclick="muteUnmute()" type="button">Mute/Unmute</button> <br/> <button onclick="size50()">Smallest</button> <button onclick="size75()">Smaller</button> <button onclick="size100()">Normal</button> <button onclick="size150()">Larger</button> <button onclick="size200()">Largest</button> <br/> Playback Speeds: <button onclick="speed10()">10%</button> <button onclick="speed25()">25%</button> <button onclick="speed50()">50%</button> <button onclick="speed75()">75%</button> <button onclick="speed100()">100%</button> <button onclick="speed125()">125%</button> <button onclick="speed150()">150%</button> <button onclick="speed175()">175%</button> <button onclick="speed200()">200%</button> <button onclick="speed400()">400%</button> <br/> Set Time: <button onclick="timeStart()">Start</button> <button onclick="timeValue('txt1')">Set Time</button> <input type="text" name="txt1" size="4" value="0" id="txt1"/> <button onclick="timeback10()">-10</button> <button onclick="timeback8()">-8</button> <button onclick="timeback6()">-6</button> <button onclick="timeback4()">-4</button> <button onclick="timeback2()">-2</button> <button onclick="timeforward2()">+2</button> <button onclick="timeforward4()">+4</button> <button onclick="timeforward6()">+6</button> <button onclick="timeforward8()">+8</button> <button onclick="timeforward10()">+10</button> <button onclick="timeforwardEnd()">End</button> Pause After Changes: <input type="text" name="txt2" size="4" value="1" id="txt2"/> </div> </td> </tr> <tr align="center"> <td> <div> <video id="video"> <source src="oceans.mp4" type="video/mp4"> <!--I WANT THE PAGE USER TO BE ABLE TO CHANGE THE SRC FILE--> Your browser does not support HTML5 video. </video> </div> </td> </tr> <tr align="center"> <td> <div> [Current Playback Speed: <span id="speed"></span>] <button onclick="speedSlower()" id="speeds"><img alt="slow" height="25" src="images/slow.png" width="25" /></button> <button onclick="backIt(this)" id="speeds"><img alt="slow" height="25" src="images/back.png" width="25" /></button> <button onclick="playPause()" id="speeds">II</button> <button onclick="forwardIt(this)" id="speeds"><img alt="fast" height="25" src="images/forward.png" width="25" /></button> <button onclick="speedFaster()" id="speeds"><img alt="fast" height="25" src="images/fast.png" width="25" /></button> [Playback position: <span id="elapsed"></span> of <span id="duration"></span>] </div> </td> </tr> <tr align="center"> <td> <input type="file" id="files" name="file" /> Read bytes: <span class="readBytesButtons"> <button data-startbyte="0" data-endbyte="60">01-60</button> <button data-startbyte="61" data-endbyte="120">60-120</button> <button data-startbyte="121" data-endbyte="180">121-180</button> <button>All</button> </span> <div id="byte_range"></div> <div id="byte_content"></div> </td> </tr> </table> <!-- ---------- JAVASCRIPT ------------ --><script> // ------------ HELP SOURCES ------------ //http://www.w3schools.com/js/js_examples.asp // ------------ MAIN VARIABLES ------------ var vvid = document.getElementById("video"); // ------------ PLAY PAUSE ------------ function playPause() { if (vvid.paused) vvid.play(); else vvid.pause(); } // ------------ SOUND ------------ function muteUnmute() { if (vvid.muted) vvid.muted = false; else vvid.muted = true;}// ------------ RESIZE VIDEO ------------ function size50() { vvid.width = 360; } function size75() { vvid.width = 540; } function size100() { vvid.width = 720; } function size150() { vvid.width = 1080; } function size200() { vvid.width = 1440; } // ------------ PLAYBACK SPEED ------------ function speedSlower() { vvid.playbackRate = vvid.playbackRate-0.1;} function speed10() { vvid.playbackRate = 0.1;} function speed25() { vvid.playbackRate = 0.25;} function speed50() { vvid.playbackRate = 0.50;} function speed75() { vvid.playbackRate = 0.75;} function speed100() { vvid.playbackRate = 1;} function speed125() { vvid.playbackRate = 1.25;} function speed150() { vvid.playbackRate = 1.5;} function speed175() { vvid.playbackRate = 1.75;} function speed200() { vvid.playbackRate = 2;} function speed400() { vvid.playbackRate = 2;} function speedFaster() { vvid.playbackRate = vvid.playbackRate+0.1;} // ------------ SET TIME POSITION ------------ function pageLoad() { vvid.currentTime=0; vvid.pause(); muteUnmute();}function timeStart() { vvid.currentTime=0; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeValue(id) { var txtbox1 = document.getElementById(id="txt1"); var txt1value = txtbox1.value; vvid.currentTime=txt1value var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeback10() { vvid.currentTime=vvid.currentTime-10; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeback8() { vvid.currentTime=vvid.currentTime-8; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeback6() { vvid.currentTime=vvid.currentTime-6; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeback4() { vvid.currentTime=vvid.currentTime-4; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeback2() { vvid.currentTime=vvid.currentTime-2; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeforward2() { vvid.currentTime=vvid.currentTime+2; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeforward4() { vvid.currentTime=vvid.currentTime+4; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeforward6() { vvid.currentTime=vvid.currentTime+6; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeforward8() { vvid.currentTime=vvid.currentTime+8; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeforward10() { vvid.currentTime=vvid.currentTime+10; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeforwardEnd() { vvid.currentTime=vvid.duration;}function backIt(x) {vvid.currentTime=vvid.currentTime-1;}function normalIt(x) {//this would do something when then mouse leaves the + or - boxes}function forwardIt(x) {vvid.currentTime=vvid.currentTime+1;}// Get the video playback position element (time value) and ending time value with id="video" var vid = document.getElementById("video"); // Assign an ontimeupdate event to the video element, and execute a function if the current playback position has changed vid.ontimeupdate = function() {myFunction()}; function myFunction() { // Display the current position of the video in an element with id="elapsed" document.getElementById("elapsed").innerHTML = (Math.round(vid.currentTime*100)/100).toFixed(2); document.getElementById("duration").innerHTML = (Math.round(vid.duration*100)/100).toFixed(2); document.getElementById("speed").innerHTML = (Math.round(vid.playbackRate*100)/100).toFixed(1); } // --------- SCRIPTS FOR THE TEXT BLOBS ----------- function readBlob(opt_startByte, opt_stopByte) { var files = document.getElementById('files').files; if (!files.length) { alert('Please select a file!'); return; } var file = files[0]; var start = parseInt(opt_startByte) || 0; var stop = parseInt(opt_stopByte) || file.size - 1; var reader = new FileReader(); // If we use onloadend, we need to check the readyState. reader.onloadend = function(evt) { if (evt.target.readyState == FileReader.DONE) { // DONE == 2 document.getElementById('byte_content').textContent = evt.target.result; document.getElementById('byte_range').textContent = ['Read bytes: ', start + 1, ' - ', stop + 1, ' of ', file.size, ' byte file'].join(''); } }; var blob = file.slice(start, stop + 1); reader.readAsBinaryString(blob); } document.querySelector('.readBytesButtons').addEventListener('click', function(evt) { if (evt.target.tagName.toLowerCase() == 'button') { var startByte = evt.target.getAttribute('data-startbyte'); var endByte = evt.target.getAttribute('data-endbyte'); readBlob(startByte, endByte); } }, false);// --------- END OF SCRIPTS FOR THE TEXT BLOBS --- </script> </body> </html> data_example.txt
×
×
  • Create New...