JS array to postgres

Question

FreePuppy 0 Newbie Poster

12 Years Ago

What is up!?

I am completely stuck and trying to do something I'm not to certain I can do. After reading on web I have seen 2 options... non i cant get work... Before I get ahead of myself let me explain what is going on.

I have a JS web app that will allow me to edit video into segments. I want to save those cuts in postgres but I heard js is not safe to insert into database.

What should I do to get an array in JS to store in postgres?

<html>
<head>
<title>HTML5 Video</title>

</head>

<script language="javascript" type="text/javascript">

// Global variable to hold player's reference.
var my_video;
var loop = 0; // loop for playing segment

// Global variables for timer.
var _Timer;
var _Count;

// Global variable to hold state of a player
var getState = 'stopped';

// Global variable to hold an array of every cut
var cut = new Array();

// Constant for maximum recording time (in seconds).
var MAX_TIME = 360;

// Event: the state of the player changed.
function my_video_stateChanged(idPlayer, state){
	// Update button text.
	updateText();
}

// Event: the timer count.
function Timer_Count(){
	// Decrement total count and check if we have reached the maximum time.
	if (document.getElementById("my_video").paused == false){
		_Count--;
	}
	if( _Count == 0 ){
		// Stop the recording.
		stop();
		return;
	}
	// Update button text.
	updateText();

	// Let's continue the timer.
	_Timer = setTimeout("Timer_Count()", 1000);
}

// Called when user clicks the link.
function action(){
	// Check player's state and call appropriate action.
	if ((getState != 'recording') && (getState != 'looping')) {
		if (document.getElementById("my_video").paused == false) {
			record();
		}
	} else if (getState == 'recording'){
		stop();
		var i=0;

		document.getElementById("log").innerHTML = "";
		for (i=0;i<cut.length;i++){
			if (i % 2 == 0){
				//console.log('Begin:' + cut[i]);
			}else{
				//console.log('End:' + cut[i]);
				document.getElementById("log").innerHTML += '<span id="cut' + i + '"><input onclick="loopIt(' + cut[(i-1)] + ', ' + cut[i] + ', ' + i + ');" type="button" value="' + 'Segment ' + (Math.floor(i/2)+1) + ': ' + cut[i-1] + ', ' + cut[i] + '"></span><br>';
			}

		}
	}
}

// Segment button clicked
function loopIt(startTime, endTime, index){
	var span = document.getElementById('cut' + index);
	var spanContent = span.innerHTML;
	var label = ' Looping. Click again or on different segment to stop looping.'
	if ((getState != 'recording') && (getState != 'looping')) { // create video loop if video is not recording
		playAt(startTime);

		span.innerHTML = spanContent + label;

		var duration = ((endTime - startTime) * 1000) / document.getElementById('my_video').playbackRate;
		loop = setInterval("playAt(" + startTime + ")", duration);
		getState = 'looping';
		document.getElementById('loopingSegment').value = index;
	}
	else if (spanContent.substr(spanContent.length - label.length, label.length) != label) { // stop/kill video loop
		pauseLoop();

		playAt(startTime);

		span.innerHTML = spanContent + label;

		var duration = ((endTime - startTime) * 1000) / document.getElementById('my_video').playbackRate;
		loop = setInterval("playAt(" + startTime + ")", duration);
		getState = 'looping';
		document.getElementById('loopingSegment').value = index;
	} else {
		pauseLoop();
	}
}

// Stop looping when you click the same segment button twice or different segment button
function pauseLoop() {
	if (getState == 'looping') {
		var span = document.getElementById('cut' + document.getElementById('loopingSegment').value);
		var spanContent = span.innerHTML;
		var label = ' Looping. Click again or on different segment to stop looping.'

		span.innerHTML = spanContent.substr(0, spanContent.length - label.length);
		clearInterval(loop);
		document.getElementById("my_video").pause();
		getState = 'stopped';
	}
}

function playAt(time) {
	document.getElementById("my_video").currentTime = time;
	if (document.getElementById("my_video").paused == true) {
		document.getElementById("my_video").play();
	}
}

function changeRate(multiplier) {
	if (getState != 'looping') {
		document.getElementById('my_video').playbackRate = multiplier;
	}
	else {
		clearInterval(loop);
		//alert("playAt(" + cut[(document.getElementById('loopingSegment').value-1)] + ")" +(cut[document.getElementById('loopingSegment').value]-cut[(document.getElementById('loopingSegment').value-1)])/multiplier);
		loop = setInterval("playAt(" + cut[(document.getElementById('loopingSegment').value-1)] + ")", ((cut[document.getElementById('loopingSegment').value]-cut[(document.getElementById('loopingSegment').value-1)])*1000)/multiplier);
		document.getElementById('my_video').playbackRate = multiplier;
	}
}


// Start recording the video.
function record(){
	// Make sure the user is not already recording.
	if(getState == 'recording'){
		return;
	}
	getState = 'recording';
	cut[cut.length] = document.getElementById("my_video").currentTime.toFixed(3);
	// Prepare timer object.
	_Count = MAX_TIME;
	Timer_Count();
}

// Stop recording the video.
function stop(){
	if (document.getElementById("my_video").paused == false) {
		// Stop timer.
		clearTimeout(_Timer);
		cut[cut.length] = document.getElementById("my_video").currentTime.toFixed(3);
		var actionButton = document.getElementById("actionButton");
		actionButton.value = "Begin Cut";
		getState = 'stopped';
	}
}

// Update text on the link.
function updateText(){
	var actionButton = document.getElementById("actionButton");
	// Check player's state.
	if(getState == "recording"){
		// Update link text to display the total time left.
		actionButton.value = "End Cut (" + _Count + ")";
	}else{
		actionButton.value = "Begin Cut";
	}
}
</script>

<body>
	<!-- <video> tag for Video -->
	<video id="my_video" autobuffer width=800 height=500 controls poster=welcome.jpg>

		<source src="1.mp4?mode=record" type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"' />


		<!-- <object> tag for Flash -->
		<!-- Using mode parameter with value record to enable the recording mode on the player's startup -->
		<object width="800" height="500" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf">
			<param name="movie" value="flowplayer-3.2.1.swf?mode=record" />
			<param name="allowfullscreen" value="true" />
			<param name="allowScriptAccess" value="always" />

			<embed name="my_video" id="my_video" src="VIDEO01.swf?mode=record" width="800" height="500" allowScriptAccess="always" pluginspage="http://www.adobe.com/go/getflashplayer"></embed>
		</object>
	</video>

	<p>
		<button onclick="pauseLoop(); document.getElementById('my_video').play(); getState = 'playing';">
			Play</button>
		<button onclick="document.getElementById('my_video').pause(); pauseLoop();">
			Pause</button>
		<input type="button" value="Begin Cut" id="actionButton" onclick="action();">
	</p>

	<p>
		<button onclick="document.getElementById('my_video').currentTime = 0">
			Back to Beginning</button>
		<button onclick="document.getElementById('my_video').currentTime += 5">
			Skip 5 Seconds</button>
	</p>

	<!-- works in Chrome, doesn't work in firefox -->
	<p>
		<button onclick="changeRate(1.0);">
			1x Speed</button>
		<button onclick="changeRate(2.0);">
			2x Speed</button>
		<button onclick="changeRate(4.0);">
			4x Speed</button>
		<button onclick="changeRate(10.0);">
			10x Speed</button>
		<input type="hidden" id="loopingSegment"></input>

	</p>

	<div id="log" name="log">
	</div>
</body>
</html>

This is variable that needs to be stored var cut = new Array(); Also my next question is... Lets say I have ajax with a video list. A video gets selected and the path for video gets placed in js video edit.... Can I simply just put php tags from the database select and have them placed in the js to play video....

Example "select Video"

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<?php //testOUT.php
$dbhost  = 'localhost';    // connect info
$dbname  = 'its';
$dbuser  = 'rti';
$dbpass  = 'Asdf1234';
$appname = "ITS Video"; // app name

//Connect to database
$pg=pg_connect("host=$dbhost user=$dbuser
			   password=$dbpass dbname=$dbname")
or die("ERROR: Can't connect to database");
	
echo <<<_ECH
<html>
<head>
<script type="text/javascript">
function showUser(str)
{
if (str=="")
{
document.getElementById("specLOC").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("specLOC").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","queryIn.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select name="video_name" onchange="showUser(this.value)">
<option value="0">Select a business</option>
_ECH;
$query = pg_query("SELECT  video_name FROM videos ORDER BY video_name ASC") or die(mysql_error());
if($query)
{
while($row = pg_fetch_assoc($query))
{
$option = $row['video_name'];
echo "<option value=\"$option\">$option</option>";
}
}
echo <<<ECH
</select>
</form>
<br />
<div id="specLOC"><b>Video Edit Service will be deployed here</b></div>

</body>
</html>
ECH;
?>

The page that handles request.....

<!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">
<?php //queryIn.php
$dbhost  = 'localhost';    // connect info
$dbname  = '********';
$dbuser  = '******';
$dbpass  = '****';
$appname = "*******"; // app name

//Connect to database
$pg=pg_connect("host=$dbhost user=$dbuser
			   password=$dbpass dbname=$dbname")
or die("ERROR: Can't connect to database");

$q=$_GET["q"];
$query = pg_query("SELECT video_path FROM videos WHERE video_name='".$q."'") or die(pg_last_error());
$day = pg_fetch_array($query);
?>
<html>
<head>
<table id="week2" border="0">
<tr>
<th> News</th>
</tr>
<tr>
	<script language="javascript" type="text/javascript">

// Global variable to hold player's reference.
var my_video;
var loop = 0; // loop for playing segment

// Global variables for timer.
var _Timer;
var _Count;

// Global variable to hold state of a player
var getState = 'stopped';

// Global variable to hold an array of every cut
var cut = new Array();

// Constant for maximum recording time (in seconds).
var MAX_TIME = 360;

// Event: the state of the player changed.
function my_video_stateChanged(idPlayer, state){
	// Update button text.
	updateText();
}

// Event: the timer count.
function Timer_Count(){
	// Decrement total count and check if we have reached the maximum time.
	if (document.getElementById("my_video").paused == false){
		_Count--;
	}
	if( _Count == 0 ){
		// Stop the recording.
		stop();
		return;
	}
	// Update button text.
	updateText();

	// Let's continue the timer.
	_Timer = setTimeout("Timer_Count()", 1000);
}

// Called when user clicks the link.
function action(){
	// Check player's state and call appropriate action.
	if ((getState != 'recording') && (getState != 'looping')) {
		if (document.getElementById("my_video").paused == false) {
			record();
		}
	} else if (getState == 'recording'){
		stop();
		var i=0;

		document.getElementById("log").innerHTML = "";
		for (i=0;i<cut.length;i++){
			if (i % 2 == 0){
				//console.log('Begin:' + cut[i]);
			}else{
				//console.log('End:' + cut[i]);
				document.getElementById("log").innerHTML += '<span id="cut' + i + '"><input onclick="loopIt(' + cut[(i-1)] + ', ' + cut[i] + ', ' + i + ');" type="button" value="' + 'Segment ' + (Math.floor(i/2)+1) + ': ' + cut[i-1] + ', ' + cut[i] + '"></span><br>';
			}

		}
	}
}

// Segment button clicked
function loopIt(startTime, endTime, index){
	var span = document.getElementById('cut' + index);
	var spanContent = span.innerHTML;
	var label = ' Looping. Click again or on different segment to stop looping.'
	if ((getState != 'recording') && (getState != 'looping')) { // create video loop if video is not recording
		playAt(startTime);

		span.innerHTML = spanContent + label;

		var duration = ((endTime - startTime) * 1000) / document.getElementById('my_video').playbackRate;
		loop = setInterval("playAt(" + startTime + ")", duration);
		getState = 'looping';
		document.getElementById('loopingSegment').value = index;
	}
	else if (spanContent.substr(spanContent.length - label.length, label.length) != label) { // stop/kill video loop
		pauseLoop();

		playAt(startTime);

		span.innerHTML = spanContent + label;

		var duration = ((endTime - startTime) * 1000) / document.getElementById('my_video').playbackRate;
		loop = setInterval("playAt(" + startTime + ")", duration);
		getState = 'looping';
		document.getElementById('loopingSegment').value = index;
	} else {
		pauseLoop();
	}
}

// Stop looping when you click the same segment button twice or different segment button
function pauseLoop() {
	if (getState == 'looping') {
		var span = document.getElementById('cut' + document.getElementById('loopingSegment').value);
		var spanContent = span.innerHTML;
		var label = ' Looping. Click again or on different segment to stop looping.'

		span.innerHTML = spanContent.substr(0, spanContent.length - label.length);
		clearInterval(loop);
		document.getElementById("my_video").pause();
		getState = 'stopped';
	}
}

function playAt(time) {
	document.getElementById("my_video").currentTime = time;
	if (document.getElementById("my_video").paused == true) {
		document.getElementById("my_video").play();
	}
}

function changeRate(multiplier) {
	if (getState != 'looping') {
		document.getElementById('my_video').playbackRate = multiplier;
	}
	else {
		clearInterval(loop);
		//alert("playAt(" + cut[(document.getElementById('loopingSegment').value-1)] + ")" +(cut[document.getElementById('loopingSegment').value]-cut[(document.getElementById('loopingSegment').value-1)])/multiplier);
		loop = setInterval("playAt(" + cut[(document.getElementById('loopingSegment').value-1)] + ")", ((cut[document.getElementById('loopingSegment').value]-cut[(document.getElementById('loopingSegment').value-1)])*1000)/multiplier);
		document.getElementById('my_video').playbackRate = multiplier;
	}
}


// Start recording the video.
function record(){
	// Make sure the user is not already recording.
	if(getState == 'recording'){
		return;
	}
	getState = 'recording';
	cut[cut.length] = document.getElementById("my_video").currentTime.toFixed(3);
	// Prepare timer object.
	_Count = MAX_TIME;
	Timer_Count();
}

// Stop recording the video.
function stop(){
	if (document.getElementById("my_video").paused == false) {
		// Stop timer.
		clearTimeout(_Timer);
		cut[cut.length] = document.getElementById("my_video").currentTime.toFixed(3);
		var actionButton = document.getElementById("actionButton");

		actionButton.value = "Begin Cut";
		getState = 'stopped';
	}
}

// Update text on the link.
function updateText(){
	var actionButton = document.getElementById("actionButton");
	// Check player's state.
	if(getState == "recording"){
		// Update link text to display the total time left.
		actionButton.value = "End Cut (" + _Count + ")";
	}else{
		actionButton.value = "Begin Cut";
	}
}
</script>

<body>
	<!-- <video> tag for Video -->
	<video id="my_video" autobuffer width=800 height=500 controls poster=welcome.jpg>
	  	<source src="VIDEO01.ogv?mode=record" type='video/ogg; codecs="theora,vorbis"' />
		<source src="2011-03-19 00-10-00~00-14-59.mp4?mode=record" type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"' />

		<source src="VIDEO01.Webm?mode=record" type='video/Webm; codecs="vp8,vorbis"' />

		<!-- <object> tag for Flash -->
		<!-- Using mode parameter with value record to enable the recording mode on the player's startup -->
		<object width="800" height="500" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf">
			<param name="movie" value="flowplayer-3.2.1.swf?mode=record" />
			<param name="allowfullscreen" value="true" />
			<param name="allowScriptAccess" value="always" />

			<embed name="my_video" id="my_video" src="VIDEO01.swf?mode=record" width="800" height="500" allowScriptAccess="always" pluginspage="http://www.adobe.com/go/getflashplayer"></embed>
		</object>
	</video>


	<p>
		<button onclick="pauseLoop(); document.getElementById('my_video').play(); getState = 'playing';">
			Play</button>
		<button onclick="document.getElementById('my_video').pause(); pauseLoop();">
			Pause</button>
		<input type="button" value="Begin Cut" id="actionButton" onclick="action();">
	</p>

	<p>

		<button onclick="document.getElementById('my_video').currentTime = 0">
			Back to Beginning</button>
		<button onclick="document.getElementById('my_video').currentTime += 5">
			Skip 5 Seconds</button>
	</p>

	<!-- works in Chrome, doesn't work in firefox -->
	<p>
		<button onclick="changeRate(1.0);">

			1x Speed</button>
		<button onclick="changeRate(2.0);">
			2x Speed</button>
		<button onclick="changeRate(4.0);">
			4x Speed</button>
		<button onclick="changeRate(10.0);">
			10x Speed</button>

		<input type="hidden" id="loopingSegment"></input>

	</p>

	<div id="log" name="log">
	</div>
<td> <?php echo $day["video_path"]; ?> </td>
</tr>
</table>
<br/>
</head>
</html>

Lets say I want php echo $day["video_path"] to be played in js...... That is 2nd thing I am trying to achieve.... I can get the ajax to work but it wont play my video from the path I set... It is almost as if the php wont read inside the js...

Any suggestions I'd appreciate!

javascript

2 Contributors
1 Reply
184 Views
17 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by Taywin

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Taywin 312 Posting Virtuoso · Answer 1 · 2011-10-05T06:58:56+00:00

>_< Too much code & script... Tired from reading after work :(

Anyway, I want to clarify about JS is not safe to save to the database. If you are taking any content from a user and save it directly into your database, regardless it is from Javascript or from anything that comes from the client, it is not safe! The only way to deal with safety from user input is to check before you save in your database.

You could try to sanitize and save but it is not a recommended way to deal with external input. A recommended way is to use the "white list" approach - reject if the input does not follow your white list rules. For example, an input with any value of &####; will not be accepted regardless it is a valid number. The reason is that a user should not try to encode the input string unless there is a purpose which is usually not good. I have seen many websites that allow me to search their database by entering a query. I usually try a very simple character which is very common used in database - a percentage symbol. Most of them do NOT sanitize but accept it and use it in the query... That's what I'm talking about...