HTML5 - Videos onended
Hallo, ich hab da ein kleines Problem. Ich möchte in folgenden Code an das Video "Videos/VideoC.mp4" die Variable onended anhängen, welche dann auf die Funktion "makeChanges2" verweist. Irgendwie funktioniert meine Schreibweise nicht. Ich hoffe, dass mir jemand helfen kann... Danke
<script> function playVideoC() { v.src="Videos/VideoC.mp4", onended= 'makeChanges2'; v.load(); v.play(); } </script> |
"Irgenwie funktioniert nicht" ist keine sinnvolle Fehlerbeschreibung, schau mal in die Fehlerkonsole deines Browsers, da steht was falsch ist.
Einmal hast du vergessen dem Skript zu sagen was für ein onend du meinst. Es ist nämlich vermutlich eine Methode deines Objektes v das vermutlich ein Video Objekt ist. Dann solltest du dir angewöhnen nach Dokumentationen der Dinge zu schauen, die du benutzt, z.b. hier diese Steuern des HTML5-Videoplayers mithilfe von JavaScript (Windows) Da findest du auch Beispiele wie du die events benutzt, dort wird aber die aktuelle Methode addEventlistener() benutzt. |
Danke für deine schnelle Antwort. Der Browser zeigt keinen Fehler an aber es geht immer noch nicht. ich habs jetzt so gemacht:
function playVideoC() { v.src="Videos/VideoC.mp4"; v.onended="makeChanges2"; v.load(); v.play(); } Ich bin auch keine Fachfrau und möchte es bestimmt auch nicht werden. muss nur was als Belegleistung programmieren... Sorry für mein Nicht-Wissen! |
Zitat:
Du musst diese "Lösung" doch irgendwo her haben? |
Ok... Ich merke schon, dass das Ganze Kontext abhängig ist.
Die Aufgabe ist es ein interaktives Video in HTML5 zu programmieren, wobei es nach jedem Video zwei Auswahlmöglichkeiten geben soll, welche auf ein weiteres Video mit zwei Auswahlmöglichkeiten verweist. An den Code habe ich mich Schritt für Schritt durch probieren herangetastet. Meine Idee ist es, an die Videos B und C das onended heranzuhängen, dass dadurch über die Zuweisung zu makeChanges2 am Ende der Videos die Entscheidungen 3 und 4 erscheinen. (makeChanges1 funktioniert tadellos) Anbei mein kompletter Quelltext: <!DOCTYPE html> <html lang="de"> <head> <title>Interactive</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="player/jquery.js"></script> <script src="player/mediaelement-and-player.min.js"></script> <link rel="stylesheet" href="player/mediaelementplayer.css" /> </head> <style type="text/css"> #Entscheidung1 { position: absolute; left: 90px; top: 80px; width: 56px; height: 57px; z-index: 1; } #Entscheidung2 { position: absolute; left: 405px; top: 80px; width: 56px; height: 57px; z-index: 1; } </style> <body> <div id="main-content", align='center'> <div id="Entscheidung1"></div> <div id="Entscheidung2"></div> <div id="info"></div> <!--VIDEO--> <video width="640" height="362" controls onended="makeChanges1()"> <source src="Videos/VideoA.mp4" type="video/mp4" /> </video> </div> <script> var v = document.getElementsByTagName("video")[0]; v.onended = function() { alert(); document.getElementById('Info').innerHTML = "2"; } function A1() { return '<img src="Grafiken/Entscheidungen1.png" width="150" height="200" onclick="playVideoC()" />' } function A2() { return '<img src="Grafiken/Entscheidungen2.png" width="150" height="200" onclick="playVideoB()" />' } function B3() { return '<img src="Grafiken/Entscheidungen3.png" width="150" height="200" onclick="playVideoC()" />' } function B4() { return '<img src="Grafiken/Entscheidungen4.png" width="150" height="200" onclick="playVideoX()" />' } function XXX() { return '<img src=""/>' } function makeChanges1() { document.getElementById('Entscheidung1').innerHTML =A1(); document.getElementById('Entscheidung2').innerHTML =A2(); } function makeChanges2() { document.getElementById('Entscheidung1').innerHTML =B3(); document.getElementById('Entscheidung2').innerHTML =B4(); } function playVideoB() { v.src="Videos/VideoB.mp4"; v.onended="makeChanges2()"; document.getElementById('Entscheidung1').innerHTML =XXX(); document.getElementById('Entscheidung2').innerHTML =XXX(); v.load(); v.play(); } function playVideoC() { v.src="Videos/VideoC.mp4"; v.onended="makeChanges2"; document.getElementById('Entscheidung1').innerHTML =XXX(); document.getElementById('Entscheidung2').innerHTML =XXX(); v.load(); v.play(); } function playVideoX() { v.src="Videos/VideoX.mp4"; document.getElementById('Entscheidung1').innerHTML =XXX(); document.getElementById('Entscheidung2').innerHTML =XXX(); v.load(); v.play(); } </script> </body> </html> |
Schau dir mal an, wie Events in JS zugewiesen werden Javascript event handler ? Ereignisse erkennen und reagieren
|
Ok... Glaubst du, dass sich einige Event Handler bei mir überschneiden?
Ich müsste ja nur in die Funktion "playVideoB" und "playVideoC" auf die Funktion "makeChanges2" verweisen. Oder ist das nicht möglich? |
Zitat:
|
Aus dem Link kann ich leider keine Schlüsse zu meinem Script herstellen:roll:
Wie mach ich dann aus dem String eine Funktion? |
Alle Zeitangaben in WEZ +2. Es ist jetzt 11:50 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023