XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   HTML5 - Videos onended (http://xhtmlforum.de/showthread.php?t=70424)

Maria 18.12.2013 11:51

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>

protonenbeschleuniger 18.12.2013 12:58

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

Maria 18.12.2013 15:40

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!

protonenbeschleuniger 18.12.2013 15:58

Zitat:

Zitat von Maria (Beitrag 535794)
Danke für deine schnelle Antwort. Der Browser zeigt keinen Fehler

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!

Naja, du musst dich dafür nicht entschuldigen, ich sag ja nur, dass du dir mal eine Doku anschaust, denn so wir du es machst ist es (vermutlich) falsch. Wir Wissen nicht, was v ist, aber onend klingt danach, das du hier keinen String zuweisen willst. Oder wie kommst du darauf?
Du musst diese "Lösung" doch irgendwo her haben?

Maria 18.12.2013 16:23

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>

protonenbeschleuniger 18.12.2013 16:31

Schau dir mal an, wie Events in JS zugewiesen werden Javascript event handler ? Ereignisse erkennen und reagieren

Maria 18.12.2013 17:07

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?

protonenbeschleuniger 18.12.2013 17:18

Zitat:

Zitat von Maria (Beitrag 535798)
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?

Nein und Doch. Hast du dir denn Link angeschaut? Du weißt dem Event keine Funktion zu, nur einen String.

Maria 18.12.2013 17:24

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