Video wechseln

[Conkuist]

Ich habe versucht mit JavaScript und kleinen vorschaubildern das Video zu Wechseln leider ohne Erfolg

<script type="text/javascript">
    function changeVideo(a) {
        document.getElementById("video").src=a;
    }
</script>
    <video id="video" src="video1.mp4">
    <img src='bild2'  onclick='changeVideo("video2.mp4");'>
    <img src='bild3'  onclick='changeVideo("video3.mp4");'>
    <img src='bild4'  onclick='changeVideo("video4");'>

 

[Sempervivum]

Weil mir zu Flash-Zeiten die Arbeit mit den Javascript-APIs der FLV-Player nicht zusagte, bin ich dazu übergegangen, es mit PHP zu machen. Sieht dann für video.js so aus:
Zeitraffer-Videos von Orchideen

<?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>';
}
?>

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

Habe unabhängig davon auch recherchiert nach einer JS-Lösung für HTML5 und das gefunden:
Changing the media-source while playing - An Introduction to HTML5 Videos - Download CHIP.eu

 

[Conkuist]

<video width=320 height=240 controls id=videoPlayer></video>

<button poster=bild1.jpg data-file=video1.ogv>Video 1</button>
<button poster=bild2.jpg data-file=video2.ogv>Video 2</button>
<button poster=bild3.jpg data-file=video3.ogv>Video 3</button>

<script>
 var v = document.getElementById('videoPlayer');
 var b = document.getElementsByTagName('button');
 for(i = 0; i<b.length; i++) {
  b[i].addEventListener('click',swapVideo,true);
 }
 function swapVideo(e) {
  v.src = e.target.getAttribute('data-file');
   v.poster = e.target.getAttribute('poster');
  v.load();
 }
</script>

Wie Kann ich die Button durch img ersetzen

 

[Tronjer]

In dem du images statt buttons verwendet?

 

[Conkuist]

hat leider nicht funktioniert

 

[Sempervivum]

Dann poste doch mal, was Du probiert hast!

 

[Tronjer]

Ist doch egal, an welches Element der Eventlistner gebunden wird.