...

View Full Version : javascript not working when made into a .JS file rather than embeeded



URBY
07-15-2009, 10:39 AM
hi first post :O
hey i need to put this Javascript in an External .Js file tried what i read so far and it didnt work pls halp me to put it in validly in an external .JS file

the code is an embeded Vlc player/streamer it works in html but i need it to be in an external .js file which i then call to the HTML


<script language="javascript">
<!--
function init() {
inputTracker = new Bs_Slider();
inputTracker.attachOnChange(onInputTrackerChange);
inputTracker.attachOnSlideStart(onInputTrackerScrollStart);
inputTracker.attachOnSlideEnd(onInputTrackerScrollEnd);
inputTracker.width = 530;
inputTracker.height = 15;
inputTracker.minVal = 0.0;
inputTracker.maxVal = -1.0;
inputTracker.valueDefault = 0.0;
inputTracker.valueInterval = 1 / 530;
inputTracker.setDisabled(true);
inputTracker.imgDir = '/blueshoes-4.5/javascript/components/slider/img/';
inputTracker.setBackgroundImage('aluminumalloyvolcanic/horizontal_background.gif', 'repeat');
inputTracker.setArrowIconLeft('aluminumalloyvolcanic/horizontal_backgroundLeft.gif', 2, 19);
inputTracker.setArrowIconRight('aluminumalloyvolcanic/horizontal_backgroundRight.gif', 2, 19);
inputTracker.setSliderIcon('aluminumalloyvolcanic/horizontal_knob.gif', 15, 19);
inputTracker.useInputField = 0;
inputTracker.draw('inputTrackerDiv');

if (navigator.appName.indexOf("Microsoft Internet") == -1) {
onVLCPluginReady()
}
else if (document.readyState == 'complete') {
onVLCPluginReady();
}
else {
/* Explorer loads plugins asynchronously */
document.onreadystatechange = function() {
if (document.readyState == 'complete') {
onVLCPluginReady();
}
}
}
}

function getVLC(name) {
if (window.document[name]) {
return window.document[name];
}
if (navigator.appName.indexOf("Microsoft Internet") == -1) {
if (document.embeds && document.embeds[name])
return document.embeds[name];
}
else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
{
return document.getElementById(name);
}
}
function onVLCPluginReady() {
updateVolume(0);
};

//--></SCRIPT>


<BODY onLoad="init();">
<TABLE>
<TR><TD colspan="2">
MRL:
<INPUT size="90" id="targetTextField" value="udp://@239.255.12.45:1234">
<INPUT type=submit value="Go" onClick="doGo(document.getElementById('targetTextField').value);">
</TD></TR>
<TR><TD align="center" colspan="2">
<!--
Insert VideoLAN.VLCPlugin.2
-->
<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab#Version=0,9,9,0"
width="720"
height="540"
id="vlc"
events="True">
<param name="MRL" value="udp://@239.255.12.45:1234" />
<param name="ShowDisplay" value="True" />
<param name="AutoLoop" value="False" />
<param name="AutoPlay" value="True" />
<param name="Volume" value="50" />
<param name="StartTime" value="0" />

<EMBED pluginspage="http://www.videolan.org"
type="application/x-vlc-plugin"
progid="VideoLAN.VLCPlugin.2"
width="720"
height="540"
name="vlc">
</EMBED>
</OBJECT>
</TD></TR>
<TR><TD colspan="2">
<TABLE><TR>
<TD valign="top" width="550">
<!--
Insert Slider widget
-->
<DIV id="inputTrackerDiv"></DIV>
</TD><TD width="15%">
<DIV id="info" style="text-align:center">-:--:--/-:--:--</DIV>
</TD>
</TR></TABLE>
</TD></TR>
<TR><TD>
<INPUT type=button id="PlayOrPause" value=" Play " disabled onClick='doPlayOrPause();'>

<INPUT type=button id="Stop" value="Stop" enabled onClick='doStop();'>
&nbsp;
<INPUT type=button value=" << " onClick='doPlaySlower();'>
<INPUT type=button value=" >> " onClick='doPlayFaster();'>
<INPUT type=button value=" <-> " onClick='getVLC("vlc").video.toggleFullscreen();'>
AR:
<SELECT readonly onChange='doChangeAspectRatio(this.value)'>
<OPTION value="default">Default</OPTION>
<OPTION value="1:1">1:1</OPTION>
<OPTION value="4:3">4:3</OPTION>
<OPTION value="16:9">16:9</OPTION>
<OPTION value="221:100">221:100</OPTION>

<OPTION value="5:4">5:4</OPTION>
</SELECT>
&nbsp;&nbsp;
<INPUT type=button value="Version" onClick='alert(getVLC("vlc").VersionInfo);'>
</TD><TD align="right">
<SPAN style="text-align:center">Volume:</SPAN>
<INPUT type=button value=" - " onClick='updateVolume(-10)'>
<SPAN id="volumeTextField" style="text-align: center">--</SPAN>
<INPUT type=button value=" + " onClick='updateVolume(+10)'>
<INPUT type=button value="Mute" onClick='getVLC("vlc").audio.toggleMute();'>
</TD>
</TR>
</TABLE>
<SCRIPT type="text/ecmascript">
<!--

var prevState = 0;
var monitorTimerId = 0;
var inputTrackerScrolling = false;
var inputTrackerIgnoreChange = false;

function updateVolume(deltaVol) {
var vlc = getVLC("vlc");
vlc.audio.volume += deltaVol;
document.getElementById("volumeTextField").innerHTML = vlc.audio.volume + "%";
};
function formatTime(timeVal) {
var timeHour = Math.round(timeVal / 1000);
var timeSec = timeHour % 60;
if (timeSec < 10)
timeSec = '0' + timeSec;
timeHour = (timeHour - timeSec) / 60;
var timeMin = timeHour % 60;
if (timeMin < 10)
timeMin = '0' + timeMin;
timeHour = (timeHour - timeMin) / 60;
if (timeHour > 0)
return timeHour + ":" + timeMin + ":" + timeSec;
else
return timeMin + ":" + timeSec;
};
function monitor() {
var vlc = getVLC("vlc");
if (vlc.log.messages.count > 0) {
// there is one or more messages in the log
var iter = vlc.log.messages.iterator();
while (iter.hasNext) {
var msg = iter.next();
var msgtype = msg.type.toString();
if ((msg.severity == 1) && (msgtype == "input")) {
alert(msg.message);
}
}
// clear the log once finished to avoid clogging
vlc.log.messages.clear();
}
var newState = vlc.input.state;
if (prevState != newState) {
if (newState == 0) {
// current media has stopped
onStop();
}
else if (newState == 1) {
// current media is openning/connecting
onOpen();
}
else if (newState == 2) {
// current media is buffering data
onBuffer();
}
else if (newState == 3) {
// current media is now playing
onPlay();
}
else if (vlc.input.state == 4) {
// current media is now paused
onPause();
}
prevState = newState;
}
else if (newState == 3) {
// current media is playing
onPlaying();
}
if (!monitorTimerId) {
monitorTimerId = setInterval("monitor()", 1000);
}
};

/* actions */

var aspectRatio = "default";

function doChangeAspectRatio(arValue) {
var vlc = getVLC("vlc");
if (vlc.input.state && vlc.input.hasVout) {
vlc.video.aspectRatio = arValue;
}
aspectRatio = arValue;
};
function doGo(targetURL) {
var vlc = getVLC("vlc");
var options = new Array(":aspect-ratio=" + aspectRatio);
vlc.playlist.items.clear();
while (vlc.playlist.items.count > 0) {
// clear() may return before the playlist has actually been cleared
// just wait for it to finish its job
}
var itemId = vlc.playlist.add(targetURL, null, options);
if (itemId != -1) {
// clear the message log and enable error logging
vlc.log.verbosity = 1;
vlc.log.messages.clear();
// play MRL
vlc.playlist.playItem(itemId);
if (monitorTimerId == 0) {
monitor();
}
}
else {
// disable log
vlc.log.verbosity = -1;
alert("cannot play at the moment !");
}
};
function doPlayOrPause() {
var vlc = getVLC("vlc");
if (vlc.playlist.isPlaying) {
vlc.playlist.togglePause();
}
else if (vlc.playlist.items.count > 0) {
// clear the message log and enable error logging
vlc.log.verbosity = 1;
vlc.log.messages.clear();
vlc.playlist.play();
monitor();
}
else {
// disable log
vlc.log.verbosity = -1;
alert('nothing to play !');
}
};
function doStop() {
getVLC("vlc").playlist.stop();
if (monitorTimerId != 0) {
clearInterval(monitorTimerId);
monitorTimerId = 0;
}
onStop();
};
function doPlaySlower() {
var vlc = getVLC("vlc");
vlc.input.rate = vlc.input.rate / 2;
};
function doPlayFaster() {
var vlc = getVLC("vlc");
vlc.input.rate = vlc.input.rate * 2;
};

/* events */

function onOpen() {
document.getElementById("info").innerHTML = "Opening...";
document.getElementById("PlayOrPause").disabled = true;
document.getElementById("Stop").disabled = false;
};
function onBuffer() {
document.getElementById("info").innerHTML = "Buffering...";
document.getElementById("PlayOrPause").disabled = true;
document.getElementById("Stop").disabled = false;
};
function onPlay() {
document.getElementById("PlayOrPause").value = "Pause";
document.getElementById("PlayOrPause").disabled = false;
document.getElementById("Stop").disabled = false;
onPlaying();
};
var liveFeedText = new Array("Live", "((Live))", "(( Live ))", "(( Live ))");
var liveFeedRoll = 0;
function onPlaying() {
if (!inputTrackerScrolling) {
var vlc = getVLC("vlc");
var info = document.getElementById("info");
var mediaLen = vlc.input.length;
inputTrackerIgnoreChange = true;
if (mediaLen > 0) {
// seekable media
if (inputTracker.maxVal != 1.0) {
document.getElementById("PlayOrPause").disabled = false;
inputTracker.setDisabled(false);
inputTracker.maxVal = 1.0;
}
inputTracker.setValue(vlc.input.position);
info.innerHTML = formatTime(vlc.input.time) + "/" + formatTime(mediaLen);
}
else {
// non-seekable "live" media
if (inputTracker.maxVal != 0.0) {
document.getElementById("PlayOrPause").disabled = true;
inputTracker.maxVal = 0.0;
inputTracker.setValue(0.0);
inputTracker.setDisabled(true);
}
liveFeedRoll = liveFeedRoll & 3;
info.innerHTML = liveFeedText[liveFeedRoll++];
}
inputTrackerIgnoreChange = false;
}
};
function onPause() {
document.getElementById("PlayOrPause").value = " Play ";
};
function onStop() {
var vlc = getVLC("vlc");
// disable logging
vlc.log.verbosity = -1;
document.getElementById("Stop").disabled = true;
if (!inputTracker.disabled) {
inputTrackerIgnoreChange = true;
inputTracker.setValue(0.0);
inputTracker.setDisabled(true);
inputTracker.maxVal = 0.0;
inputTrackerIgnoreChange = false;
}
document.getElementById("info").innerHTML = "-:--:--/-:--:--";
document.getElementById("PlayOrPause").value = " Play ";
document.getElementById("PlayOrPause").disabled = false;
};
function onInputTrackerScrollStart() {
inputTrackerScrolling = true;
};
function onInputTrackerScrollEnd(inputTracker, value, pos) {
inputTrackerScrolling = false;
};
function onInputTrackerChange(inputTracker, value, pos) {
if (!inputTrackerIgnoreChange) {
var vlc = getVLC("vlc");
if ((vlc.input.state == 3) && (vlc.input.position != value)) {
var info = document.getElementById("info");
vlc.input.position = value;
info.innerHTML = formatTime(vlc.input.time) + "/" + formatTime(vlc.input.length);
}
}
};
//-->

</SCRIPT>

Philip M
07-15-2009, 10:49 AM
You can only have Javascript statements in a .js file, no HTML. And get rid of the <!-- and //--> HTML tags which in any case have not been necessary since IE3.



"Seize the day, put no trust in the morrow!" [Carpe diem, quam minimum credula postero.]
Horace - Roman lyric poet & satirist (65 BC - 8 BC)

URBY
07-15-2009, 10:55 AM
edited to show full code sorry bout that phil

that would look like :S do i need to create 2 js files for the code above ?
sorry im new to javascript :(

Philip M
07-15-2009, 10:58 AM
No, one file containing all the functions, but NO HTML (including <!-- and //--> tags). And no <script> or </script> tags of course.

<script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead.

URBY
07-15-2009, 11:13 AM
Ok my Html is

<script type="text/javascript" src="TV.js"></script>

<BODY onLoad="init();">

<TABLE>
<TR><TD colspan="2">
MRL:
<INPUT size="90" id="targetTextField" value="udp://@239.255.12.45:1234">
<INPUT type=submit value="Go" onClick="doGo(document.getElementById('targetTextField').value);">
</TD></TR>
<TR><TD align="center" colspan="2">
<!--
Insert VideoLAN.VLCPlugin.2
-->
<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab#Version=0,9,9,0"
width="720"
height="540"
id="vlc"
events="True">
<param name="MRL" value="udp://@239.255.12.45:1234" />
<param name="ShowDisplay" value="True" />
<param name="AutoLoop" value="False" />
<param name="AutoPlay" value="True" />
<param name="Volume" value="50" />
<param name="StartTime" value="0" />

<EMBED pluginspage="http://www.videolan.org"
type="application/x-vlc-plugin"
progid="VideoLAN.VLCPlugin.2"
width="720"
height="540"
name="vlc">
</EMBED>
</OBJECT>
</TD></TR>
<TR><TD colspan="2">
<TABLE><TR>
<TD valign="top" width="550">



<DIV id="inputTrackerDiv"></DIV>
</TD><TD width="15%">
<DIV id="info" style="text-align:center">-:--:--/-:--:--</DIV>
</TD>
</TR></TABLE>
</TD></TR>
<TR><TD>
<INPUT type=button id="PlayOrPause" value=" Play " disabled onClick='doPlayOrPause();'>

<INPUT type=button id="Stop" value="Stop" enabled onClick='doStop();'>
&nbsp;
<INPUT type=button value=" << " onClick='doPlaySlower();'>
<INPUT type=button value=" >> " onClick='doPlayFaster();'>
<INPUT type=button value=" <-> " onClick='getVLC("vlc").video.toggleFullscreen();'>
AR:
<SELECT readonly onChange='doChangeAspectRatio(this.value)'>
<OPTION value="default">Default</OPTION>
<OPTION value="1:1">1:1</OPTION>
<OPTION value="4:3">4:3</OPTION>
<OPTION value="16:9">16:9</OPTION>
<OPTION value="221:100">221:100</OPTION>

<OPTION value="5:4">5:4</OPTION>
</SELECT>
&nbsp;&nbsp;
<INPUT type=button value="Version" onClick='alert(getVLC("vlc").VersionInfo);'>
</TD><TD align="right">
<SPAN style="text-align:center">Volume:</SPAN>
<INPUT type=button value=" - " onClick='updateVolume(-10)'>
<SPAN id="volumeTextField" style="text-align: center">--</SPAN>
<INPUT type=button value=" + " onClick='updateVolume(+10)'>
<INPUT type=button value="Mute" onClick='getVLC("vlc").audio.toggleMute();'>
</TD>
</TR>
</TABLE>

and the separate JS file is



function init()
{
inputTracker = new Bs_Slider();
inputTracker.attachOnChange(onInputTrackerChange);
inputTracker.attachOnSlideStart(onInputTrackerScrollStart);
inputTracker.attachOnSlideEnd(onInputTrackerScrollEnd);
inputTracker.width = 530;
inputTracker.height = 15;
inputTracker.minVal = 0.0;
inputTracker.maxVal = -1.0;
inputTracker.valueDefault = 0.0;
inputTracker.valueInterval = 1 / 530;
inputTracker.setDisabled(true);
inputTracker.imgDir = '/blueshoes-4.5/javascript/components/slider/img/';
inputTracker.setBackgroundImage('aluminumalloyvolcanic/horizontal_background.gif', 'repeat');
inputTracker.setArrowIconLeft('aluminumalloyvolcanic/horizontal_backgroundLeft.gif', 2, 19);
inputTracker.setArrowIconRight('aluminumalloyvolcanic/horizontal_backgroundRight.gif', 2, 19);
inputTracker.setSliderIcon('aluminumalloyvolcanic/horizontal_knob.gif', 15, 19);
inputTracker.useInputField = 0;
inputTracker.draw('inputTrackerDiv');

if (navigator.appName.indexOf("Microsoft Internet") == -1)
{
onVLCPluginReady()
}
else if (document.readyState == 'complete')
{
onVLCPluginReady();
}
else
{
/* Explorer loads plugins asynchronously */
document.onreadystatechange = function()
{
if (document.readyState == 'complete')
{
onVLCPluginReady();
}
}
}
}


function getVLC(name) {
if (window.document[name]) {
return window.document[name];
}
if (navigator.appName.indexOf("Microsoft Internet") == -1) {
if (document.embeds && document.embeds[name])
return document.embeds[name];
}
else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
{
return document.getElementById(name);
}
}
function onVLCPluginReady() {
updateVolume(0);
};


var prevState = 0;
var monitorTimerId = 0;
var inputTrackerScrolling = false;
var inputTrackerIgnoreChange = false;

function updateVolume(deltaVol) {
var vlc = getVLC("vlc");
vlc.audio.volume += deltaVol;
document.getElementById("volumeTextField").innerHTML = vlc.audio.volume + "%";
};
function formatTime(timeVal) {
var timeHour = Math.round(timeVal / 1000);
var timeSec = timeHour % 60;
if (timeSec < 10)
timeSec = '0' + timeSec;
timeHour = (timeHour - timeSec) / 60;
var timeMin = timeHour % 60;
if (timeMin < 10)
timeMin = '0' + timeMin;
timeHour = (timeHour - timeMin) / 60;
if (timeHour > 0)
return timeHour + ":" + timeMin + ":" + timeSec;
else
return timeMin + ":" + timeSec;
};
function monitor() {
var vlc = getVLC("vlc");
if (vlc.log.messages.count > 0) {
// there is one or more messages in the log
var iter = vlc.log.messages.iterator();
while (iter.hasNext) {
var msg = iter.next();
var msgtype = msg.type.toString();
if ((msg.severity == 1) && (msgtype == "input")) {
alert(msg.message);
}
}
// clear the log once finished to avoid clogging
vlc.log.messages.clear();
}
var newState = vlc.input.state;
if (prevState != newState) {
if (newState == 0) {
// current media has stopped
onStop();
}
else if (newState == 1) {
// current media is openning/connecting
onOpen();
}
else if (newState == 2) {
// current media is buffering data
onBuffer();
}
else if (newState == 3) {
// current media is now playing
onPlay();
}
else if (vlc.input.state == 4) {
// current media is now paused
onPause();
}
prevState = newState;
}
else if (newState == 3) {
// current media is playing
onPlaying();
}
if (!monitorTimerId) {
monitorTimerId = setInterval("monitor()", 1000);
}
};

/* actions */

var aspectRatio = "default";

function doChangeAspectRatio(arValue) {
var vlc = getVLC("vlc");
if (vlc.input.state && vlc.input.hasVout) {
vlc.video.aspectRatio = arValue;
}
aspectRatio = arValue;
};
function doGo(targetURL) {
var vlc = getVLC("vlc");
var options = new Array(":aspect-ratio=" + aspectRatio);
vlc.playlist.items.clear();
while (vlc.playlist.items.count > 0) {
// clear() may return before the playlist has actually been cleared
// just wait for it to finish its job
}
var itemId = vlc.playlist.add(targetURL, null, options);
if (itemId != -1) {
// clear the message log and enable error logging
vlc.log.verbosity = 1;
vlc.log.messages.clear();
// play MRL
vlc.playlist.playItem(itemId);
if (monitorTimerId == 0) {
monitor();
}
}
else {
// disable log
vlc.log.verbosity = -1;
alert("cannot play at the moment !");
}
};
function doPlayOrPause() {
var vlc = getVLC("vlc");
if (vlc.playlist.isPlaying) {
vlc.playlist.togglePause();
}
else if (vlc.playlist.items.count > 0) {
// clear the message log and enable error logging
vlc.log.verbosity = 1;
vlc.log.messages.clear();
vlc.playlist.play();
monitor();
}
else {
// disable log
vlc.log.verbosity = -1;
alert('nothing to play !');
}
};
function doStop() {
getVLC("vlc").playlist.stop();
if (monitorTimerId != 0) {
clearInterval(monitorTimerId);
monitorTimerId = 0;
}
onStop();
};
function doPlaySlower() {
var vlc = getVLC("vlc");
vlc.input.rate = vlc.input.rate / 2;
};
function doPlayFaster() {
var vlc = getVLC("vlc");
vlc.input.rate = vlc.input.rate * 2;
};

/* events */

function onOpen() {
document.getElementById("info").innerHTML = "Opening...";
document.getElementById("PlayOrPause").disabled = true;
document.getElementById("Stop").disabled = false;
};
function onBuffer() {
document.getElementById("info").innerHTML = "Buffering...";
document.getElementById("PlayOrPause").disabled = true;
document.getElementById("Stop").disabled = false;
};
function onPlay() {
document.getElementById("PlayOrPause").value = "Pause";
document.getElementById("PlayOrPause").disabled = false;
document.getElementById("Stop").disabled = false;
onPlaying();
};
var liveFeedText = new Array("Live", "((Live))", "(( Live ))", "(( Live ))");
var liveFeedRoll = 0;
function onPlaying() {
if (!inputTrackerScrolling) {
var vlc = getVLC("vlc");
var info = document.getElementById("info");
var mediaLen = vlc.input.length;
inputTrackerIgnoreChange = true;
if (mediaLen > 0) {
// seekable media
if (inputTracker.maxVal != 1.0) {
document.getElementById("PlayOrPause").disabled = false;
inputTracker.setDisabled(false);
inputTracker.maxVal = 1.0;
}
inputTracker.setValue(vlc.input.position);
info.innerHTML = formatTime(vlc.input.time) + "/" + formatTime(mediaLen);
}
else {
// non-seekable "live" media
if (inputTracker.maxVal != 0.0) {
document.getElementById("PlayOrPause").disabled = true;
inputTracker.maxVal = 0.0;
inputTracker.setValue(0.0);
inputTracker.setDisabled(true);
}
liveFeedRoll = liveFeedRoll & 3;
info.innerHTML = liveFeedText[liveFeedRoll++];
}
inputTrackerIgnoreChange = false;
}
};
function onPause() {
document.getElementById("PlayOrPause").value = " Play ";
};
function onStop() {
var vlc = getVLC("vlc");
// disable logging
vlc.log.verbosity = -1;
document.getElementById("Stop").disabled = true;
if (!inputTracker.disabled) {
inputTrackerIgnoreChange = true;
inputTracker.setValue(0.0);
inputTracker.setDisabled(true);
inputTracker.maxVal = 0.0;
inputTrackerIgnoreChange = false;
}
document.getElementById("info").innerHTML = "-:--:--/-:--:--";
document.getElementById("PlayOrPause").value = " Play ";
document.getElementById("PlayOrPause").disabled = false;
};
function onInputTrackerScrollStart() {
inputTrackerScrolling = true;
};
function onInputTrackerScrollEnd(inputTracker, value, pos) {
inputTrackerScrolling = false;
};
function onInputTrackerChange(inputTracker, value, pos) {
if (!inputTrackerIgnoreChange) {
var vlc = getVLC("vlc");
if ((vlc.input.state == 3) && (vlc.input.position != value)) {
var info = document.getElementById("info");
vlc.input.position = value;
info.innerHTML = formatTime(vlc.input.time) + "/" + formatTime(vlc.input.length);
}
}
};


and it seems to work Thank you :thumbsup:great forums too

URBY
07-16-2009, 10:24 AM
one more quick question :D

Currently the Http VLC embeeded Web page Streamer/player only plays When u Click "go" button this states "go to whatever the Text area says" now the text area itself has a default address for it to go to .. now to the question

How would i get it to auto play on Page Load ? and not have to click the go button(don't say "autoplay: true" thats not working for me)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum