OnClick Video im selben Fenster abspielen

[SmarrvK]

Hallo zusammen,

habe da ein kleines Problem mit der Einbindung bzw. Abspielung von Videos. Ich habe mir eine kleine Seite gebastelt ( bzw. bin noch dabei ). Diese habe ich nach sehr konstruktiver Kritik teils auf CSS umgebaut. Wollte zusätzlich noch ein paar Videos einbauen, da steckt nun mein Problem. Aber am besten schaut ihr erstmal hier:

Sven & Susi in Around the World

Habe auf der Rechten Seite den Bilderstreifen, wenn man nun mit der Maus über ein Bild fährt, wird das Bild bzw. der Text in der Mitte geändert, so weit so gut. Jetzt wollte ich ein Video einfügen, das bei OnClick in der Mitte (wo normalerweise die Bilder sind) abgespielt wird. Habe zwar das abspielen schon hinbekommen, auch das sich der Text ändern, weis bloß nicht wie ich Ihm klarmachen soll das er es in der Mitte abspielt.

Hoffe ich konnte mein Problem einigermaßen rüberbringen :-)

Danke schon mal vorab.

SmarrvK

P.S. Wenn möglich nicht gleich drauflos prügeln und mit Fachberifffen um sich schmeißen :-) Bin ein echter Laie, der für jede Kritik & Hilfe dankbar ist.

 

[Imbericle]

in der regel bindet man videos so ein, dass das äußerste Element Objekt ist

[B]<object width="425" height="344"> 
[/B]hier stehen alle anderen Angaben[B]
</object>[/B]

definnier das teil einfach in css als klasse

.Videos
{
    [B]position: center center;[/B]
    width:425px;
    height:344px;
}

<object class="Videos"><object>

MfG

 

[SmarrvK]

Danke für die schnelle Antwort.
Kann ich nicht einfach meinen bestehenden Code so ab ändern das es funzt?

<script type="text/javascript">
function playVid(obj,url)
{
obj.parentNode.innerHTML = '<embed src="'+url+'" width="352" height="288"> </embed>';
}
</script>

<IMG SRC="http://sksznzl.sk.funpic.de/Home/Bilder/play.jpg" WIDTH=80 HEIGHT=60 style="cursorointer;" onclick="playVid(this,'http://sksznzl.sk.funpic.de/Home/Irland/Bilder/Film.wmv'); document.getElementById('Textbox').firstChild.data='Dudelsack Session'">

Das Bild in der mitte trägt den Namen "Bild_oben", und genau dort würde ich das Video gerne einsetzen.

Danke vorab

 

[Imbericle]

dann mach es doch genau so wie ich es dir gesagt habe, definiere grad im css bereich das element objekt, und du kannst deinen code so stehen lassen


MfG

 

[SmarrvK]

Hallo Imbericle,

habe jetzt mal deine Variante probiert, aber wahrscheinlich bin ich einfach zu doof das zu verstehen, hab von CSS NULL Ahnung. Anbei nochmal mein Code
vielleicht kannst du nochmal drüberschaun oder direkt auf der Seite und mir meinen Fehler erklären.

Habe die CSS Klasse in meinen <Style> bereich eingefügt. Der HTML code sieht dann bei mir wie folgt aus:

          <TR HEIGHT=65px>
            <TD WIDTH=15px ALIGN="RIGHT" VALIGN="CENTER" BGCOLOR="#000000">
             <IMG SRC="http://XYZ.de/Home/Bilder/film_links.jpg">
            </TD>
                <TD ALIGN="MIDDLE" VALIGN="CENTER" BGCOLOR="#000000" BORDER="0">
                 <object class="Videos">
                  <IMG SRC="http://XYZ.de/Home/Bilder/play.jpg" WIDTH=80 HEIGHT=60 style="cursor:pointer;" onclick="playVid(this,'http://XYZ.de/Home/Irland/Bilder/Film.wmv'); document.getElementById('Textbox').firstChild.data='Dudelsack Session'">
                 </object>

                </TD>
            <TD WIDTH=15px ALIGN="LEFT" VALIGN="CENTER" BGCOLOR="#000000">
             <IMG SRC="http://XYZ.de/Home/Bilder/film_rechts.jpg">
            </TD>
          </TR>

Danke vorab

Smarrvk

 

[Imbericle]

Nun denn...

1. Tabellen benutzt man nicht mehr, die sind absolut tabu, zur Seitenunterteilung benutzt man divs.

2. Den Code den ich dir gepostet habe, ist der der nachgeladen / sichtbar gemacht werden soll, wenn man auf das kleine Bild für das Video klickt.
Der gesamte code für das Video ist bsw.

<object>

                     <param
                            name="movie"
                            value="http://www.youtube.com/v/5M_ysKTYnF4&hl=de&fs=1&">
                     </param>

                     <param
                            name="allowFullScreen"
                            value="true">
                     </param>


                     <param
                            name="allowscriptaccess"
                            value="always">
                     </param>



                     <embed
                             src="http://www.youtube.com/v/5M_ysKTYnF4&hl=de&fs=1&"
                             type="application/x-shockwave-flash"
                             allowscriptaccess="always"
                             allowfullscreen="true"
                             width="560"
                             height="340">
                     </embed>
</object>

Wenn du den Gesamten Code deiner Seite reinstellst, kann ich dir auch sagen an welcher stelle er rein muss...


MfG

 

[SmarrvK]

Hallo Imbericle,

erstmal danke für die Antwort. Habe meien Seitenaufbau eigentlich mit CSS gestaltet, nur innerhalb der einzelnen Felder habe ich dann mit Tabellen gearbeitet. Sollte man Tabellen wirklich nicht mehr benutzen ? Kann ich die <divs> auch mit Breite und anpassen?

Kann den kompletten Code posten, ist aber nach meiner ansicht echt Lange. Besteht eine andere Möglichkeit dir den Code zukommen zu lassen ?

Falls nein stelle ich ihn ein.

Gruss & DANKE

 

[Imbericle]

habe mir den quellcode gerade angesehen. wenn ich das richtig sehe, solltest du grad die funtkion abändern in dem du ans <embed> noch ne Klasse namens video dran hängst und die im css definierst.
im codebeispiel habe ich die eigenschaften width und height auch noch der klasse zugeschrieben...

.Videos
{
    
    width: 352px;
    height:288px;
}

function playVid(obj,url) 
obj.parentNode.innerHTML = "<embed source='url' class='Videos'> </embed>";
}

gewöhn dir an, alles in Css zu verfassen, dass macht es dir leichter und übersichtlicher
^^

MfG

 

[SmarrvK]

Hi,

also langsam fange ich an zu Verzweifeln :cry:. Entweder bin ich zu doof, oder es will einfach nicht.
Habe den CSS Code und Script bei mir eingefügt, bzw. geändert. Den von mir erstelten HTML Code ( vom 22.08.09 ) habe ich belassen. Funktioniert aber immernoch nicht. Vergesse ich irgend etwas oder mache ich was komplett Falsch, echt keinen Schimmer ????

Mein Muster: http://sksznzl.sk.funpic.de/Home/Irland/galery_test_movie.html

Komme auch nochmal auf CSS zurück. Ist es schlimm wenn ich mit Tabellen arbeite, komme damit ziemlich gut zurecht ( eines der wenigen Punkte von HTML wo ich einigermaßen durchblicke :-).

Gruss und DANKE