roebert: dynamisch Film einbetten

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&auml;hlen Sie in der Auswahlliste &uuml;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&auml;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&auml;hlen Sie in der Auswahlliste &uuml;berhalb einen Film aus
</div>
</body>
</html>

Sieht jmd eine Fehlerquelle, die das Abspielen des Filmes verhindert?

  1. 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 ...

  2. 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 = "&nbsp;<OBJECT>\n" +
        ...........
        "</OBJECT>\n";

    mfg
      frafu

    1. danke danke danke!!!

      das ist praxis ... es funktioniert halt - obwohl keiner weiß warum

    2. 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 = "&nbsp;<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>&nbsp;\n";
       }
       else if (movie == "none")
       {
        var output = "W&auml;hlen Sie in der Auswahlliste &uuml;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&auml;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&auml;hlen Sie in der Auswahlliste &uuml;berhalb einen Film aus
      </div>
      <hr>
      <a href="#" onclick="show_innerhtml('movie');">show innerHTML</a>
      </body>
      </html>