Mit buttons verschiedene Videos in einem player starten

[Conkuist]

Wenn auf einen der buttons geklickt wird soll für jeden button ein anderes video gestartet
Die buttons sollen später durch bilder ersetzt werden
Habe leider nichts gefunden das es mir ermöglicht das so umzusetzen
wie ich mir das vorgestellt habe

<video controls src=video.mp4></video>
<button>VIDEO 1</button>
<button>VIDEO 2</button>
<button>VIDEO 2</button>

 

[Tronjer]

Wie nichts gefunden? Keine Code-Snippets zum copy & pasten?

Dann musst du es eben selber schreiben. Suchstrings für Google wären: "Was sind Eventlistener?", "Wie erzeuge ich dynamisch HTML-Elemente?", "Value für src-Attribut im Videotag verändern" - und dazu immer das Wort JavaScript.

 

[Conkuist]

Wie man an meiner Fragestellung erkennt habe ich noch nicht so umfassende kenntnisse
und da könnte man auch ein bisschen freundlicher sein
eine genauere erklärung wäre hilfreich gewesen

 

[Xeno]

Wie man an meiner Fragestellung erkennt habe ich noch nicht so umfassende kenntnisse
und da könnte man auch ein bisschen freundlicher sein
eine genauere erklärung wäre hilfreich gewesen

Ächz, ich mache sonst nicht Meta-Diskussionen (Diskussion über die Diskussion), aber hier liegt die keineswegs unfreundliche Antwort, die Dir ja offenbar nicht passt, an Dir. Du kannst doch nicht erwarten, dass Dir hier die Moderatoren JavaScript beibringen, oder?! Recherchiere zuerst wie geraten und frag dann richtig (konkret). Wenn Du null Ahnung von JavaScript hast, was ich übrigens gut verstehe, musst Du es entweder lernen oder Dir Deine Idee von jemandem (nein, nicht von den Moderatoren hier) programmieren lassen, in der Regel gegen Geld. Sorry, irgendwie funktioniert die Welt so. JavaScript ist eine richtige Programmiersprache, bei HTML und CSS kann man eher noch absolute Anfängerfragen inhaltlich beantworten, geht bei JS nicht so.

Lg Xeno

 

[Conkuist]

Ist Java Script den unbedingt notwendig

 

[threadi]

Für das was Du willst gäbe es mehrere Möglichkeiten. Neben JavaScript fällt mir spontan auch noch Flash ein. Wobei man es auch mit purem HTML machen könnte indem Du für jedes Video eine HTML-Datei erstellst und die "Buttons" einfach nur diese Video-HTML-Dateien verlinken.

Tipp: Links kann man per CSS auch wie "Buttons" gestalten.

 

[Conkuist]

Naja so wies aussieht komm ich wohl nicht um javascript herum
Wie würde es den mit flash funktionieren

Noch ne Frage zum Schluss kann mir jemand sagen wie die javascript funktionen heißen die ich für meine seite brauche

 

[Sempervivum]

Hallo Conkuist,
meinst Du so etwas:
Zeitraffer-Videos von Orchideen
Ist mit PHP realisiert.
Wenn es dich interessiert, kann ich den Code posten.

 

[Conkuist]

Wie funktioniert das ganze
habe bemerkt das hinter dem php beim klicken auf ein bild ?Idx=0 oder ?Idx=1 erscheint

 

[Sempervivum]

Ja, über diesen Parameter wird gesteuert, welches Video geladen wird:

<?php
$movies = array
(
array ('http://www.ulrichbangert.de/orchid/phalaenopsis/2013-03_Phal_I-Hsin_Salmon_640x480', '640', '480', 'Phalaenopsis I-Hsin Salmon'),
array ('http://www.ulrichbangert.de/orchid/pleione/2013-03_Pleione_Ueli_Wackernagel_Pearl_640x480', '640', '480', 'Pleione Ueli Wackernagel'),
);
if (isset($_GET["Idx"]))
{
  $idx = $_GET["Idx"];
  echo '<p class="Bildueberschrift">' . $movies[$idx][3] . '</p>';
  echo '<div style="width:' . $movies[$idx][1] . 'px; margin: 0 auto;">';
  echo '<video id="_video_" class="video-js vjs-default-skin" controls width="' . $movies[$idx][1] . '" height="' . $movies[$idx][2] . '" poster="' . $movies[$idx][0] . '_Poster.jpg" autoplay preload="auto" data-setup="{}">';
  echo '<source type="video/mp4" src="' . $movies[$idx][0] . '.mp4">';
  echo '<source type="video/ogg" src="' . $movies[$idx][0] . '.ogv">';
  echo '</video>';
  echo '</div>';
}
?>

Geladen wird die Seite so:

      <a href="zeitraffer.php?Idx=0" title="Phalaenopsis I-Hsin Salmon">
        <img id="bild0" src="http://www.html.de/karussell3/photos/2013-03-20_Phal_I_Hsin_Salmon_c.jpg"></a>
      <a href="zeitraffer.php?Idx=1" title="Pleione Ueli Wackernagel">
        <img id="bild1" src="http://www.html.de/karussell3/photos/2013-03-25_Pleione_Ueli_Wackernagel_Pearl_c.jpg"></a>

Es wird der video.js-Player verwendet (HTML5).