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!