Jump to content

Synchronized scrolling of a txt blob with video playback


SerenityNetworks

Recommended Posts

UPDATE: Please skip to Post #11 (where I've re-started the post with, "UPDATE: Restarting question/post here...")

 

 

Is it (reasonably) possible to autoscroll a text (txt) blob during the playback of a video on a page, and if so then how? What I'm wanting to accomplish is very similar to what SoundHound does with audio files and lyrics; while the audio file plays the synchronized lyrics scroll by in a frame.

 

For example,

  • I have a video 10 minutes long that I will play on a web page.
  • I have a txt file with short lines of data.
    • I can manipulate the txt file however needed to make this process work.
    • Each line of text has a time stamp (and I can place the time stamp wherever in the line I want or need it placed).
    • The times (timestamped lines) are not in even time intervals (but I can make the intervals even by placing in filler lines if needed).
    • Most likely I'll have one line of text for every second (and I can even force it to be one line/row per second if it makes it easier).
    • The text lines vary in length (but if really needed I could make them the same length, so it might be possible to scroll by byte range).

    [*]On my page:

    • I will have the video playing.
    • Below the video I will have the txt blob displaying in a scrolling field.

    [*]I would like the text blob to scroll automatically in synchornization with the video.

    • If the user speeds up or slows down the video or jumps to a new place (forward or back) in the video, the blob needs to remain in sync.
    • When the video is paused then the blob needs to stop scrolling.

Is this something reasonably do-able? If so, can someone point me to or provide an example? (I'm a noob at this, but trainable.)

 

Thanks in advance,

Andrew

Edited by SerenityNetworks
Link to comment
Share on other sites

It would take some work to get it to actually scroll smoothly with the speed of the video, but it shouldn't be that difficult to show the right line for the time in the video. Putting the text in a JSON structure where each element would have a timestamp plus the text to show would make it easier. You would basically need to have a function that runs on a timer (using setTimeout or setInterval), probably multiple times per second, which gets the current time of the video and just looks up the correct line to display in the JSON structure. It would be easy to just show that text on the page, it would take more work to get things to scroll by in sync with the video.

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

JSON is the notation used to define objects and arrays in Javascript.http://en.wikipedia.org/wiki/JSONhttp://json.orgIf your text file is a JSON structure then you can load it into Javascript and use JSON.parse to turn it into an array. Then you don't have to mess around with trying to parse the text yourself. It could be an array of objects like this:

[  {    "time":060033.410,    "text":"VEHL CL=2/2 PY=2 $=0 IX=2 FX=0 RX=0 s=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 s=70 T=1-184152 S=2 H=5 I=0000 B=0 PT=AVI EM=28 ES=0003000C"  },...]
You can name the properties whatever you want to call them. That way the text is in a format that Javascript immediately understands and you don't have to mess around with breaking it up into lines, finding the timestamp, etc. Instead of just a single text property, you could also add multiple properties to hold the different pieces of information you have, e.g.:
{  "type":"VEHL",  "CL":"2/2",  "PY":2,...}
It just depends on how you want to use the data. You can structure the JSON to give Javascript as much flexibility as you want with the data.
Link to comment
Share on other sites

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"},]
Link to comment
Share on other sites

Do you not understand the idea behind the approach that he is suggesting or are you just absolutely unable to get hold of how you would go about it?Where exactly are you encountering a problem, at what step of his suggested approach?

 

What have you tried and what isnt working or what do you not understand?

Link to comment
Share on other sites

The JSON isn't valid, you left out quotes at the start of the text. Other than that, show the code you're using to try and load and read that. It's most common to send an ajax request to get the contents of the file, then you can use JSON.parse to turn it into an array in Javascript.

Link to comment
Share on other sites

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"]
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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"}]
Edited by SerenityNetworks
Link to comment
Share on other sites

There's some information about scrolling a textarea here:http://stackoverflow.com/questions/9625179/how-to-set-the-scrolltop-value-for-a-textareaAlthough that might not be the best option, I'm not sure if you'll be able to guarantee things like the font height, text area size, etc. Browsers may render it a little differently.That stackoverflow question shows using scrollIntoView. That will probably be the best option. You can output your lines of text each inside its own element, like a span with a particular ID (you could use the timestamp in the ID). All of the text elements would go inside a container element like a div where you set the overflow property to show scrollbars when the contents of the div are larger than the div. Then you can just call scrollIntoView for each line and the browser will scroll the container element until that line is in view.

Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

One option would be to save it in a global variable, or another option would be to get the value from the innerHTML of the element where you display it. A third option would be to just calculate it again when you need it.

Link to comment
Share on other sites

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

Edited by SerenityNetworks
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 year later...

Never mind. I figured it out. The solution was very easy. I was just tired.

Hi there, I hope you are well. I came across your thread as I have been trying to do exactly the same thing. I am a newbie and would be grateful if you can give me some help or guidance? possibly an example file? I can do basic HTML but I dont know about JASON.

Kind Regards

Annie

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...