Hallo,
bin gerade dabei mir das WebDesignen beizubringen. Habe mir bisher Grundwissen von HTML, CSS und JavaScript angeeignet.
Als Trainingsaufgabe habe ich mir nun das erstellen einer HTML5 Seite mit 2 Spalten und Banner darüber verordnet, aufbau und funktion sollte wie folgt ausschauen:
a)Banner oben (erledigt)
b)einen Navigationsbereich in der linke spalte mit den Links zu den Videodateien.(habe ich in einen div container gepackt)
c)in der rechten spalte sollen dann die Videos nach klick auf den jeweiligen link abgespielt werden (immer am gleichen platz, das video soll quasi ausgetauscht werden).
Habe erst mal auch eine div container erstellt, in dem ich vorab mit dem <video> tag ein mp4 eingebunden habe. Das lässt sich auch mit allen gängingen Browsern abspielen.
Wie schafe ich es nun nach klick auf die Links das entsprechende Video abzuspielen?
Mit JavaScript kann mann ja z.B. bei Bildern über buttons folgendes machen:
<html>
<head>
<title>document.images</title>
<script type="text/javascript">
function bilderladen(){
bild0= new Image();
bild0.src='images/ameise0.jpg';
bild1= new Image();
bild1.src='images/ameise1.jpg';
bild2= new Image();
bild2.src='images/ameise2.jpg';
bild3= new Image();
bild3.src='images/ameise3.jpg';
bild4= new Image();
bild4.src='images/ameise4.jpg';
bild5= new Image();
bild5.src='images/ameise5.jpg';
}
function bildtausch (bildnr, bildname){
document.bild.src=bildname.src;
}
</script>
</head>
<body onLoad="bilderladen()">
<div align="center">
<h1 class="h1">
Die rote Riesenameise im Detail</h1>
<img src="images/ameise0.jpg" width="320" height="240" name="bild">
<br> <br> Zeige:
<input type="button" value="Bild 1" onClick="bildtausch(0,bild1);">
<input type="button" value="Bild 2" onClick="bildtausch(0,bild2);">
<input type="button" value="Bild 3" onClick="bildtausch(0,bild3);">
<input type="button" value="Bild 4" onClick="bildtausch(0,bild4);">
<input type="button" value="Bild 5" onClick="bildtausch(0,bild5);">
<input type="button" value="Zum Anfang" onClick="bildtausch(0,bild0);">
</div>
</body>
</html>
Alles anzeigen
Ist der Zugriff auf die Video Dateien via JavaScript so auchmöglich? Das Element Video gibt es ja nicht im DOM!
Verzeit auch wenn ich falsch mit Begriffen um mich rum schmeisse...wie gesagt...ich bin in den anfängen