Kann mir jemand so etwas in JavaScript erstellen??

[Paaranoid]

also ich versuche schon 2 tage das bild wie es hier ist zu programmieren...
ich hab kein plan von html´s oder javascript... stöber mich nur so durch Foren... :shock:

Würde gerne sowas mache wie hier...
MoTrip TV
wenn man unten auf die Bilder klickt, kommt oben im TV das Youtube Video...


Kann mir jemand helfen???
kann jemand von euch sowas??

 

[Sempervivum]

Ich habe mal jemand unterstützt, so etwas mit Fernsehsendern zu machen. Bei den Buttons wurde dabei über das onclick-Event das innerHTML eines divs mit dem Code für das Einbetten vorbesetzt. Würde bei Youtube-Videos wahrscheinlich auch funktionieren.
Viel Erfolg und viele Grüße - Ulrich

 

[struppi]

also ich versuche schon 2 tage das bild wie es hier ist zu programmieren...
ich hab kein plan von html´s oder javascript... stöber mich nur so durch Foren... :shock:

Würde gerne sowas mache wie hier...
MoTrip TV
wenn man unten auf die Bilder klickt, kommt oben im TV das Youtube Video...

Stöber doch einfach im Quelltext der Seite. Die ist relativ übersichtlich und es läßt sich leicht erkennen was da gemacht wird.

 

[Gelöschtes Mitglied 3007]

Dreckig und schnell geht es so.

<div id="video"></div>
<a href="#" onclick=" document.getElementById('video').innerHTML = '<embed>hier dein video code und so weiter...</embed>'; ">Video 1</a>
<a href="#" onclick=" document.getElementById('video').innerHTML = '<embed>hier dein video code und so weiter...</embed>'; ">Video 2</a>

 

[NetAktiv]

Das kann ein wenig unübersichtlich werden (hast ja gesagt, schnell und dreckig), fast genauso schnell ist, wenn man die Videos 1,..,n in divs mit id=template_x (x=1..n) legt zum Testen und dann bei diese divs mit display:none versteckt. Der onclick-Code wird dann zu

document.getElementById('video').innerHTML = document.getElementById('template_x').innerHTML

und wenn man diese Zeile noch als funktion showVideo(x) definiert wird das total übersichtlich.

 

[Gelöschtes Mitglied 3007]

Das ist aber schlecht bei Videos die schon ohne betätigen des Play buttons anfangen zu spielen.

Ich habe hier mal einen beispiel Code von youtube. Mit diesem wäre die folgende lösung die einfachste und eleganteste.

Youtube-Code:

<iframe width="560" height="345" src="http://www.youtube.com/embed/qudaNuBA4AQ" frameborder="0" allowfullscreen></iframe>

daraus machen wir jetzt

<script type="text/javascript">
    function setVideo(id) {
        document.getElementById('video').src = 'http://www.youtube.com/embed/'+ id;
    }
</script>

<iframe id="video" width="560" height="345" src="http://www.youtube.com/embed/qudaNuBA4AQ"  frameborder="0" allowfullscreen></iframe>

<a href="#" onclick="setVideo('qudaNuBA4AQ');">Video 1</a>
<a href="#" onclick="setVideo('qudaNuBA4AQ');">Video 2</a>
<a href="#" onclick="setVideo('qudaNuBA4AQ');">Video 3</a>

funktioniert aber nur mit youtube videos...