helmut: Source in W3C-konformem mp3-Player austauschen

SELF-Forum

Source in W3C-konformem mp3-Player austauschen

helmut
– Informationen zu den Bewertungsregeln

Hallo Experten,
ich möchte den unten zitierten mp3-Player in eine Site einbinden.

Kann man die Quelle (src=example.mp3) per Auswahlliste (select name="Titel")aus einem Formular (name="Formular") heraus austauschen? Wie sieht die Variable dazu aus? Ist das so ein Monster mit "." und "children"?
MfG, helmut

----------------------------------------------------------------
<!-- Suchkette: "Musik W3C-konform" -->
<object name="mp3player "type="application/x-shockwave-flash" data="emff_wooden.swf?src=example.mp3&amp;autostart=yes" width="120" height="60">
 <param name="movie" value="emff_wooden.swf?src=example.mp3&amp;autostart=yes">
 <param name="quality" value="high">
 <param name="bgcolor" value="#ff8000">
</object>
----------------------------------------------------------------

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Source in W3C-konformem mp3-Player austauschen

    Frank123
    – Informationen zu den Bewertungsregeln

    Das Austauschen ist generell möglich. Wenn man das allerdings im IE probiert wird man schnell feststellen das der nicht so einfach mit macht.

    Grundsätzlich erstmal ID's vergeben (die sind eindeutig).

    <div><object id="playerObj" name="mp3player" "type="application/x-shockwave-flash" data="emff_wooden.swf?src=example.mp3&amp;autostart=yes" width="120" height="60">  
 <param name="movie" value="emff_wooden.swf?src=example.mp3&amp;autostart=yes">  
 <param name="quality" value="high">  
 <param name="bgcolor" value="#ff8000">  
</object></div>

    Um jetzt den das Ding mit neuen Parameter zu starten muss folgendes gemacht werden:

      
function changeMP3(mp3name)  
{  
	var pO = document.getElementById("playerObj");  
	var newpO = '<object id="playerObj" name="mp3player" "type="application/x-shockwave-flash"';  
	newpO += 'data="emff_wooden.swf?src=' + mp3name + '&amp;autostart=yes" width="120" height="60">';  
	newpO += '<param id="playerParamMovie" name="movie" value="emff_wooden.swf?src=' + mp3name;  
	newpO += '&amp;autostart=yes">';  
	newpO += '<param name="quality" value="high">';  
	newpO += '<param name="bgcolor" value="#ff8000">';  
	newpO += '</object>';  
  
	pO.parentNode.innerHTML = newpO;  
}

    Das ist die einzige Lösung die ich gefunden habe. Wichtig ist, dass das OBJECT alleine in dem DIV-Tag steht, da der Rest sonst überschrieben wird.

    Gruß

    Frank

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Source in W3C-konformem mp3-Player austauschen

      helmut
      – Informationen zu den Bewertungsregeln

      ... Das ist die einzige Lösung die ich gefunden habe. Wichtig ist, dass das OBJECT alleine in dem DIV-Tag steht, da der Rest sonst überschrieben wird.

      Gruß

      Frank

      Vielen Dank, Frank!
      Ich werde das probieren und melde mich dann nochmal. Kann aber dauern.
      MfG, helmut

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Source in W3C-konformem mp3-Player austauschen

        helmut
        – Informationen zu den Bewertungsregeln

        ... Das ist die einzige Lösung die ich gefunden habe. Wichtig ist, dass das OBJECT alleine in dem DIV-Tag steht, da der Rest sonst überschrieben wird.

        Gruß Frank

        Hallo Frank,
        es funktioniert! Hier ist der Code:

        --------------------------------------------------------------------
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                              "http://www.w3.org/TR/html4/loose.dtd">
        <html><head><title>Musikbox</title>
        <!--
        W3C-konformer mp3-Player
        Quellen:
        Frank123 [http://forum.de.selfhtml.org/?t=191825&m=1279440&readmode=nested#m1279440]
                 [http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=onchange]
        -->
        <script type="text/javascript">
        function changeMP3(mp3name)
        {
                var pO = document.getElementById("playerObj");
                var newpO = '<object id="playerObj" name="mp3player" type="application/x-shockwave-flash"';
                newpO += 'data="emff_silk.swf?src=' + mp3name + '&amp;autostart=yes" width="120" height="60">';
                newpO += '<param id="playerParamMovie" name="movie" value="emff_silk.swf?src=' + mp3name;
                newpO += '&amp;autostart=yes">';
                newpO += '<param name="quality" value="high">';
                newpO += '<param name="bgcolor" value="#ffffff">';
                newpO += '</object>';
                pO.parentNode.innerHTML = newpO;
        }
        </script>
        </head>
        <body>

        <div>
        <object id="playerObj" name="mp3player" type="application/x-shockwave-flash" data="emff_silk.swf?src=""&amp;autostart=yes" width="120" height="60">
        <!-- Anfangs-src ist Stille (src="") -->
         <param name="movie" value="emff_silk.swf?src=""&amp;autostart=yes">
         <param name="quality" value="high">
         <param name="bgcolor" value="#ffffff">
        </object>
        </div>

        <h1>Musikbox</h1>
        <form action="select.htm">
                <p>Bitte Titel wählen:</p>
                <select name="Titel" size="10"
                onchange="changeMP3(this.form.Titel.options[this.form.Titel.selectedIndex].value)">
                <option value="./vivaldi_cello.mp3">Vivaldi</option>
                <option value="./hotel_california.mp3">Hotel of California</option>
                <option value="./mathilda.mp3">Mathilda</option>
                <option value="">Stille</option>
                </select>
        </form></body></html>
        ------------------------------------------------------------------------

        Wenn ich etwas zu umständlich gemacht habe, bitte ungebremst kritisieren! Ich bin html-JS-PHP-Novize.

        MfG, helmut

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Source in W3C-konformem mp3-Player austauschen

          Frank123
          – Informationen zu den Bewertungsregeln

          Das sollte es auch! Hab vor zwei oder drei Wochen auch an dem Problem gesessen. Bestimmt 3 Stunden. Aber irgendwann gings und das scheint zu mindest in allen gängigen Versionen des IE und FF zu funktionieren.

          Das einzige was du hier weglassen kannst ist die Form um die Auswahlbos (SELECT). Die ist nur wichtig, wenn du Daten an den Server senden willst. Das ist hier aber ja nicht der Fall.

          Ich hab mich übrigens nur mit dem XHTML-Standart beschäfftig und validiere auch bloß da nach. Deswegen enthält das OBJECT-Tag auch kein EMBED-Tag. Wenn du allerdings kompatibel zu alten Browsern sein willst müsstest du das noch einfügen.

          Gruß

          Frank

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Source in W3C-konformem mp3-Player austauschen

            helmut
            – Informationen zu den Bewertungsregeln

            Das einzige was du hier weglassen kannst ist die Form um die Auswahlbos (SELECT). Die ist nur wichtig, wenn du Daten an den Server senden willst. Das ist hier aber ja nicht der Fall.

            Hallo Frank,
            guter Tipp! Weglassen ist immer gut. Apropos Weglassen: Eigentlich müsste es doch genügen, nur die Objektteile

            data="emff_silk.swf?src=' + mp3name + '&amp;autostart=yes"
            und
            <param id="playerParamMovie" name="movie" value="emff_silk.swf?src=' + mp3name;&amp;autostart=yes">

            auszutauschen. Ich werde das mal versuchen.
            MfG, helmut

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Source in W3C-konformem mp3-Player austauschen

              Frank123
              – Informationen zu den Bewertungsregeln

              Im FireFox funktioniert das auch (zu mindest bei 3.5). Bei dem Internet Explorer geht es nicht. Da muss der komplette Rumpf ausgetauscht werden. ich hab ne ganze Weile probiert bis der IE das endlich geschlugt hat.

              Eigene Meinung: "Schade das immer noch soviele diesen krüppeligen Browser benutzen. Aber naja kann man ja nichts dran machen."

              Gruß

              Frank

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Source in W3C-konformem mp3-Player austauschen

                helmut
                – Informationen zu den Bewertungsregeln

                ...Bei dem Internet Explorer geht es nicht. Da muss der komplette Rumpf ausgetauscht werden. ich hab ne ganze Weile probiert bis der IE das endlich geschlugt hat. ...

                Gruß

                Frank

                Der IE hat mir auch schon einigen Kummer gemacht. Vielleicht sollte ich auf Grund Deiner Erfahrungen dann doch vom Versuch, nur "src" auszutauschen, die Finger lassen.

                MfG, helmut

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Source in W3C-konformem mp3-Player austauschen

                  helmut
                  – Informationen zu den Bewertungsregeln

                  Der IE hat mir auch schon einigen Kummer gemacht. Vielleicht sollte ich auf Grund Deiner Erfahrungen dann doch vom Versuch, nur "src" auszutauschen, die Finger lassen.

                  MfG, helmut

                  Hallo Frank,
                  ich konnte doch die Finger nicht davon lassen. Die function ist jetzt kürzer:
                  -----------------------------------------------------------
                  function changeMP3(mp3name)
                  {
                  var quelle='emff_silk.swf?src='+mp3name+'&autostart=yes';
                  document.getElementById("playerObj").data=quelle;
                  document.getElementById("playerParamMovie").value=quelle;
                  }
                  -----------------------------------------------------------

                  Das funktioniert auch.

                  MfG, helmut

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. Source in W3C-konformem mp3-Player austauschen

                    helmut
                    – Informationen zu den Bewertungsregeln

                    Ich bemerke gerade, dass es noch kürzer geht:
                    -----------------------------------------------------------
                    function changeMP3(mp3name) {document.getElementById("playerObj").data='emff_silk.swf?src='+mp3name+'&autostart=yes';}
                    -----------------------------------------------------------
                    Der value-Austausch ist überflüssig, warum auch immer.

                    MfG, helmut

                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln