Video in HTML Datei steuern
Hallo,
Ich habe mehrere Videos und möchte diese gerne auf
meiner Homepage anzeigen.
Soweit so gut, hier ist der Code für ein Video:
<embed src="vid/video1.mpg" width="360" height="288"
autostart=0 showcontrols=1 showstatusbar=0 autorewind=0></embed>
Aber, nun möchte ich die Videos über Links aufrufen
und die Videos sollen immer an der gleichen Stelle abgespielt werden. Also ich klicke Link1 und in der Mitte meiner Seite läuft
Video1, nun klicke ich Link2 und an der gleichen Stelle läuft nun dieses Video. Wie mache ich das?
Ich hoffe ich konnte das einigermassen verständlich schreiben.
Antwort schreiben
Antwort 1 von katy vom 14.01.2020, 19:34 Options
Hallo daggi,
ohne versprechen zu können, dass es funktioniert:
du fügst in dein embed eine ID ein:
<embed id="video" src="vid/video1.mpg" width="360" height="288"
autostart=0 showcontrols=1 showstatusbar=0 autorewind=0></embed>
nun kannst du über JavaScript darauf zugreifen:
<a href="javascript:document.getElementById('video').src = 'vid/video1.mpg'">Link1</a>
<a href="javascript:document.getElementById('video').src = 'vid/video2.mpg'">Link2</a>
usw.
Da nicht alle Browser embed kennen - es gehört nämlich nicht zum HTML-Standard - könnte es sein, dass es nicht überall funktioniert. Aber probier es doch mal aus.
katy
Antwort 2 von daggi vom 14.01.2020, 20:16 Options
Danke für deine Antwort Katy, aber leider funktioniert das so nicht.
Antwort 3 von katy vom 15.01.2020, 07:20 Options
Hallo daggi,
schade! Aber könntest du für mich und alle weiteren Helfer hier noch ein bisschen genauer erklären, was du gemacht hast und was daraufhin passiert ist. Am besten mit der Fehlermeldung aus der JavaScript-Konsole des Firefox. Und ein Link zu deiner Seite wäre auch hilfreich.
katy
Antwort 4 von katy vom 15.01.2020, 08:49 Options
Hallo daggi,
ich habe indessen auch selbst ein bisschen zu embed recherchiert. Offensichtlich sträubt es sich gegen Änderungen von src.
Dadurch wird es alles etwas komplizierter.
Aber machbar.
Diesen JavaScript-teil müsstest du im head-Bereich, also zB in die Zeile vor </head> auf deiner Seite setzen:
<script type="text/javascript">
function ladeVideo(nr) {
var player=document.getElementById("video");
player.innerHTML="<embed src='vid/video"+nr+".mpg' width='360' height='288' autostart='0' showcontrols='1' showstatusbar='0' autorewind='0'></embed>";
}
</script>
Dein embed müsste dann eingepackt werden, das sieht dann so aus:
<div id="video"><embed src="vid/video1.mpg" width="360" height="288" autostart=0 showcontrols=1 showstatusbar=0 autorewind=0></embed></div>
und die Links sehen dann so aus:
<a href="javascript:ladeVideo(1)">Link1</a>
<a href="javascript:ladeVideo(1)">Link2</a>
Jetzt wird also einfach das komplette embed jeweils neu geschrieben statt nur ein Detail daran zu ändern. Falls es Probleme gibt beherzige bitte mein letztes Posting: "funktioniert nicht" ist keine gute Fehlerbeschreibung.
katy