Beginner needs help getting script to work in Safari 1.0.2

[Kim Forbes]

Hi,

I realize my first problem is that I'm using browser detection and not
feature detection. Maybe someone can help me understand feature
detection.
This script works in every browser that I need it too, except Safari
1.0.2

Here is the script. Please tell me if there is any more information I
can give you.
<script language=javascript type="text/javascript">
function hideDiv() {
if (document.getElementById) {
document.getElementById('hideshow').style.visibility = 'hidden';
}
else {
if (document.layers) {
document.hideshow.visibility = 'hidden';
}
else { document.all.hideshow.style.visibility = 'hidden';
}
}
}
function showDiv() {
if (document.getElementById) {
document.getElementById('hideshow').style.visibility = 'visible';
}
else {
if (document.layers) { document.hideshow.visibility = 'visible';
}
else { document.all.hideshow.style.visibility = 'visible';
}
}
}</script>

<script LANGUAGE=JavaScript>var movieName = "movie";

function thisMovie(movieName) {
if (navigator.appName.indexOf ("Microsoft") !=-1) {
return window[movieName]
} else {
return document[movieName]
}
}
function rewind() {
thisMovie(movieName).Rewind();
thisMovie(movieName).StopPlay();
hideDiv();
}

function play(){
showDiv();
thisMovie(movieName).Play();
}</script>


Thanks
Kim

 

[Lee]

Kim Forbes said:

Here is the script. Please tell me if there is any more information I
can give you.

Could you format it with some indentation to make it readable?

 

[kaeli]

Hi,

I realize my first problem is that I'm using browser detection and not
feature detection. Maybe someone can help me understand feature
detection.

You ARE using feature detection for some of it.

This script works in every browser that I need it too, except Safari
1.0.2

What happens (or doesn't happen) in Safari?

Here is the script. Please tell me if there is any more information I
can give you.
<script language=javascript type="text/javascript">
function hideDiv() {
if (document.getElementById) {
document.getElementById('hideshow').style.visibility = 'hidden';

Don't assume that a browser that supports getElementById also supports style.
Check for that, too.

}
else {
if (document.layers) {
document.hideshow.visibility = 'hidden';
}
else { document.all.hideshow.style.visibility = 'hidden';
}

Don't assume. Your last 'else' assumes that if a browser doesn't have the
first two, it has the third. Bad assumption.
Make it an else if document.all, then have a last else that basically shows a
friendly error or something that the browser isn't supported.

<script LANGUAGE=JavaScript>var movieName = "movie";

Type attribute here like above would be great.

function thisMovie(movieName) {
if (navigator.appName.indexOf ("Microsoft") !=-1) {
return window[movieName]
} else {
return document[movieName]
}

You could just test for window[movieName] (that doesn't look right to me, but
I'm not familiar with media) and document[movieName] instead of using
navigator.

That's all I have, sorry.
--
--
~kaeli~
Punctuation, capitalization, and grammar are your friends,
and will help people think that you aren't such an ignorant
moron, after all.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

 

[Fred Oz]

Hi,

I realize my first problem is that I'm using browser detection and not
feature detection. Maybe someone can help me understand feature
detection.
This script works in every browser that I need it too, except Safari
1.0.2

I don't understand why you want to control the playing of the video
yourself. Safari will load the video into a Quicktime plugin which
already has controls for play, pause, stop, rewind, fastforward,
volume, etc.

Placing a second set of controls will likely only confuse the user -
what's the point? The general form for putting a Quicktime movie (.mov)
file into a browser window is (please excuse wrapping):

<OBJECT
CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
WIDTH="240" HEIGHT="152"
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0">
<PARAM NAME="controller" VALUE="TRUE">
<PARAM NAME="type" VALUE="video/quicktime">
<PARAM NAME="autoplay" VALUE="false">
<PARAM NAME="target" VALUE="myself">
<PARAM NAME="src" VALUE="somePath/myMovie.mov">
<PARAM NAME="pluginspage"
VALUE="http://www.apple.com/quicktime/download/indext.html">
<EMBED WIDTH="240" HEIGHT="152"
CONTROLLER="TRUE" TARGET="myself"
SRC="somePath/myMovie.mov"
type="video/quicktime"
BGCOLOR="#000000" BORDER="0"
PLUGINSPAGE="http://www.apple.com/quicktime/download/indext.html"></EMBED>
</OBJECT>


Fred.

 

[Fred Oz]

This really got me thinking, so here is a page that lets you
load/unload a Quicktime movie. I thinks it's cool because the video is
not hosted on my server but on Apple's!

I tried just showing/hiding the div, and whilst that works the first
time, when you hide it then show it again, the video doesn't play. I
have commented out the bits that display the video in a new window, you
can use that instead if you want.

This is not robust, www ready code but a proof of concept effort - I'm
happy for suggestions on how to detect if the user has the Quicktime
plugin installed - or should I just let the browser handle it?

Hope it works for everyone out there, please be careful of wrapping...

Fred.

<html><head><title> Safari Video</title>
<script type="text/javascript">

function loadVid(vidDiv) {

// var vidWin = window.open('',
// 'VideoWindow','resizable=1,width=400,height=400')

var a = [
// '<html><head><title> Video Window</title>',
// '</head><body>',
'<OBJECT id="aMovie" ',
'CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" ',
' WIDTH="240" HEIGHT="152" ',
'
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0"> ',
' <PARAM NAME="controller" VALUE="TRUE"> ',
' <PARAM NAME="type" VALUE="video/quicktime"> ',
' <PARAM NAME="autoplay" VALUE="true"> ',
' <PARAM NAME="target" VALUE="myself"> ',
' <PARAM NAME="src" ',
' VALUE="file:///Users/rogreen/Desktop/farscape_240.mov"> ',
' <PARAM NAME="pluginspage" ',
' VALUE="http://www.apple.com/quicktime/download/indext.html">',
' <EMBED WIDTH="240" HEIGHT="152" ',
' CONTROLLER="TRUE" TARGET="myself" ',
'
SRC="http://movies.apple.com/movies/independent/farscape/farscape_240.mov"
',
' type="video/quicktime" ',
' BGCOLOR="#003366" BORDER="0" ',
' PLUGINSPAGE="http://www.apple.com/quicktime/download/indext.html">',
'</EMBED> ',
'</OBJECT> ',
// '</body></html>',
];
// alert(a.join(" "));

document.getElementById(vidDiv).innerHTML = a.join(" ");
document.getElementById(vidDiv).style.display = '';

// vidWin.document.write(a.join(""))
// vidWin.document.close()

}

function unLoadVid(vidDiv) {
document.getElementById(vidDiv).style.display = 'none';
document.getElementById(vidDiv).innerHTML = "";
}
</script>

</head><body>

<div style="border: thin solid red; width: 240; height: 30;">
<form action="">
<input type="button" value="Video load"
onclick="loadVid('theMovie');">&nbsp;
<input type="button" value="Video unload"
onclick="unLoadVid('theMovie');">
</form>
</div>
<div id="theMovie"
style="border: thin solid red; width: 240; height: 152; display: none;">
</div>

</body></html>

 

[Kim Forbes]

Thanks everyone for answering my post. I have had a incredibly busy
week, and I'm just checking my messages now. I am going to look them
over in detail ASAP, but let me just clarify what I was trying to do:
I wanted a Flash movie to play "inline" from a HTML help topic I was
writing. For example, if I was showing people how to use Widget x, I
wanted to give the user an option of viewing the procedure from the
topic, but not force the movie to play upon loading the topic. I hope
that makes sense?

Kim

This really got me thinking, so here is a page that lets you
load/unload a Quicktime movie. I thinks it's cool because the video is
not hosted on my server but on Apple's!

I tried just showing/hiding the div, and whilst that works the first
time, when you hide it then show it again, the video doesn't play. I
have commented out the bits that display the video in a new window, you
can use that instead if you want.

This is not robust, www ready code but a proof of concept effort - I'm
happy for suggestions on how to detect if the user has the Quicktime
plugin installed - or should I just let the browser handle it?

Hope it works for everyone out there, please be careful of wrapping...

Fred.

<html><head><title> Safari Video</title>
<script type="text/javascript">

function loadVid(vidDiv) {

// var vidWin = window.open('',
// 'VideoWindow','resizable=1,width=400,height=400')

var a = [
// '<html><head><title> Video Window</title>',
// '</head><body>',
'<OBJECT id="aMovie" ',
'CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" ',
' WIDTH="240" HEIGHT="152" ',
'
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0"> ',
' <PARAM NAME="controller" VALUE="TRUE"> ',
' <PARAM NAME="type" VALUE="video/quicktime"> ',
' <PARAM NAME="autoplay" VALUE="true"> ',
' <PARAM NAME="target" VALUE="myself"> ',
' <PARAM NAME="src" ',
' VALUE="file:///Users/rogreen/Desktop/farscape_240.mov"> ',
' <PARAM NAME="pluginspage" ',
' VALUE="http://www.apple.com/quicktime/download/indext.html">',
' <EMBED WIDTH="240" HEIGHT="152" ',
' CONTROLLER="TRUE" TARGET="myself" ',
'
SRC="http://movies.apple.com/movies/independent/farscape/farscape_240.mov"
',
' type="video/quicktime" ',
' BGCOLOR="#003366" BORDER="0" ',
' PLUGINSPAGE="http://www.apple.com/quicktime/download/indext.html">',
'</EMBED> ',
'</OBJECT> ',
// '</body></html>',
];
// alert(a.join(" "));

document.getElementById(vidDiv).innerHTML = a.join(" ");
document.getElementById(vidDiv).style.display = '';

// vidWin.document.write(a.join(""))
// vidWin.document.close()

}

function unLoadVid(vidDiv) {
document.getElementById(vidDiv).style.display = 'none';
document.getElementById(vidDiv).innerHTML = "";
}
</script>

</head><body>

<div style="border: thin solid red; width: 240; height: 30;">
<form action="">
<input type="button" value="Video load"
onclick="loadVid('theMovie');">&nbsp;
<input type="button" value="Video unload"
onclick="unLoadVid('theMovie');">
</form>
</div>
<div id="theMovie"
style="border: thin solid red; width: 240; height: 152; display: none;">
</div>

</body></html>