dynamisch Film einbetten
roebert
- javascript
Hallo!
ich muss eine Auswahlliste erstellen, wo man sich einen Film auswaehlen kann, der dann auf der Seite direkt abgespielt wird.
Ich habe einfach mal drauflosgelegt wie ich es mir dachte ... funktioniert auch im firefox ... aber nicht im IE, der leider auch keine Fehlermeldung ausgibt. habe hier nochmal eine test.htm erstellt, die auch immernoch im mozilla funzt
<!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>
<!-- 08.02.2006 18:23:34 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="de" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="/test/css/shared.css" />
<link rel="stylesheet" type="text/css" href="/test/css/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="/test/css/content.css" />
<script language="JavaScript" type="text/javascript">
<!--
function show_movie(host, movie)
{
if (movie != "none")
{
var output = "<OBJECT>\n" +
"<PARAM NAME='AutoStart' VALUE='True'>\n" +
"<PARAM NAME='FileName' VALUE='" + host + movie + "'>\n" +
"<PARAM NAME='ShowControls' VALUE='true'>\n" +
"<PARAM NAME='ShowStatusBar' VALUE='false'>\n" +
"<EMBED type='application/x-mplayer2'\n" +
"\tpluginspage='http://www.microsoft.com/Windows/MediaPlayer/'\n" +
"\tSRC='" + host + movie + "'\n" +
"\tname='MediaPlayer1'\n" +
"\twidth='300'\n" +
"\theight='300'\n" +
"\tautostart='1'\n" +
"\tshowstatusbar='1'\n" +
"\tshowcontrols='1'>\n" +
"</EMBED>\n" +
"</OBJECT>\n";
}
else if (movie == "none")
{
var output = "Wählen Sie in der Auswahlliste überhalb einen Film aus";
}
document.getElementById("movie").innerHTML = output;
}
-->
</script>
<style type="text/css">
<!--
select.movies {
color: #000;
background-color: #97d1ec;
margin: 0px;
padding: 0px;
border-color: #004385;
font-size: 11px;
}
div.movie {
background-color: #fff;
margin: 10px 0px 5px 0px;
border: 1px solid #97D1EC;
text-align: center;
}
div.movie object {
z-index: 999;
}
-->
</style>
</head>
<body>
<form name="movies">
<select name="movies" class="movies" onchange="show_movie('http://host.firmennetz.de:8080', this.options[this.selectedIndex].value)">
<option value="none">Bitte Film auswählen</option>
<option value="/dokumente/film1.wmv">film1</option>
<option value="/dokumente/film2.wmv">film2</option>
<option value="/dokumente/film3.wmv">film3</option>
</select>
</form>
<div class="movie" id="movie">
Wählen Sie in der Auswahlliste überhalb einen Film aus
</div>
</body>
</html>
Sieht jmd eine Fehlerquelle, die das Abspielen des Filmes verhindert?
ich habe eben noch einen Link auf die Seite eingebaut der mir den innerHTML-Bereich ausgibt
function show_innerhtml(elt)
{
temp = document.getElementById(elt).innerHTML;
alert(temp);
}
<a href="#" onclick="show_innerhtml();">show innerHTML</a>
im mozilla zeigt er mir die Inhalte ordentlich an, der IE zeigt nix wenn ich einen Film anwaehle - springe ich wieder auf option[0] so zeigt er wenigstens den hinweis wieder an ... aber das Embed-Object will einfach nicht in den div rein ...
Hallo!
Warum es so ist, weiß ich nicht. Aber wenn du vor <OBJECT> irgendein Zeichen hinzufügst, oder nach </OBJECT>, dann funktionierts bei mir im IE auch.
Warum? Keine Ahnung!
zb:
var output = " <OBJECT>\n" +
...........
"</OBJECT>\n";
mfg
frafu
danke danke danke!!!
das ist praxis ... es funktioniert halt - obwohl keiner weiß warum
es scheint als ob der IE beim 'innerHTML-insert' den Object-Tag samt Params wegschneidet ... die alert-ausgabe zeigt dies eindeutig an ...
<!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>
<!-- 08.02.2006 18:23:34 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="de" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="/test/css/shared.css" />
<link rel="stylesheet" type="text/css" href="/test/css/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="/test/css/content.css" />
<script language="JavaScript" type="text/javascript">
<!--
function show_movie(host, movie)
{
if (movie != "none")
{
var output = " <OBJECT>\n" +
"<PARAM NAME='AutoStart' VALUE='True'>\n" +
"<PARAM NAME='FileName' VALUE='" + host + movie + "'>\n" +
"<PARAM NAME='ShowControls' VALUE='true'>\n" +
"<PARAM NAME='ShowStatusBar' VALUE='false'>\n" +
"<EMBED type='application/x-mplayer2'\n" +
"\tpluginspage='http://www.microsoft.com/Windows/MediaPlayer/'\n" +
"\tSRC='" + host + movie + "'\n" +
"\tname='MediaPlayer1'\n" +
"\twidth='300'\n" +
"\theight='300'\n" +
"\tautostart='1'\n" +
"\tshowstatusbar='1'\n" +
"\tshowcontrols='1'>\n" +
"</EMBED>\n" +
"</OBJECT> \n";
}
else if (movie == "none")
{
var output = "Wählen Sie in der Auswahlliste überhalb einen Film aus";
}
document.getElementById("movie").innerHTML = " ";
document.getElementById("movie").innerHTML = output;
}
function show_innerhtml(elt)
{
temp = document.getElementById(elt).innerHTML;
alert(temp);
}
-->
</script>
<style type="text/css">
<!--
select.movies {
color: #000;
background-color: #97d1ec;
margin: 0px;
padding: 0px;
border-color: #004385;
font-size: 11px;
}
div.movie {
background-color: #fff;
margin: 10px 0px 5px 0px;
border: 1px solid #97D1EC;
text-align: center;
}
div.movie object {
z-index: 999;
}
-->
</style>
</head>
<body>
<form name="movies">
<select name="movies" class="movies" onchange="show_movie('http://host.firmennetz.de:8080', this.options[this.selectedIndex].value)">
<option value="none">Bitte Film auswählen</option>
<option value="/dokumente/film1.wmv">film1</option>
<option value="/dokumente/film2.wmv">film2</option>
<option value="/dokumente/film3.wmv">film3</option>
</select>
</form>
<div class="movie" id="movie">
Wählen Sie in der Auswahlliste überhalb einen Film aus
</div>
<hr>
<a href="#" onclick="show_innerhtml('movie');">show innerHTML</a>
</body>
</html>