Interaktive Videos wie realisieren?

[Dral]

Hallo zusammen!

Ich habe mich hier angemeldet in der Hoffnung ein paar Experten zu finden, die mir bei einem Problem weiterhelfen können. :)

Es geht um interaktive Videos/interaktive Filme in HTML5. Erst einmal grundsätzlich, was sind interaktive Filme? Nun das sind Videos, bei dem der Nutzer selber entscheiden kann, wie es in bestimmten Situationen weiter geht.

Als Beispiel:

Ein Mann läuft über die Straße und sieht eine weggeworfene Bananenschale nicht. Kurz bevor er drauf tritt, stoppt das Video und es kommt zu einer Entscheidungsfrage. Der Betrachter kann jetzt aussuchen "Mann tritt auf Bananenschale" oder aber "Mann läuft vorbei". Je nach Entscheidung wird dann halt das entsprechende Video geladen und abgespielt.

Eine gute Beispielseite wie das aussieht findet ihr hier.

Da dieses Thema im Internet leider Mangelware ist(gerade in Bezug auf HTML5), habe ich mir nun Gedanken gemacht wie ich dies realisieren könnte, komme aber irgendwie nicht weiter. Grundsätzlich dachte ich mir schon, dass ich die Videos ganz normal mit dem Video-Tag einbinde. Jedoch bereitet mir die Entscheidungsfrage Kopfzerbrechen. Wie kann man ein oder 2 Layer über das Video packen? Geht das überhaupt? Wenn ja wie? Mit einem Canvas? Dieser müsste ja auch irgendwie interaktiv sein, weil der Benutzer dort draufklicken muss.

Würde mich freuen, wenn jemand eine Idee hat.

 

[threadi]

Auf deiner Beispielseite ist es mit Flash realisiert.

Mit HTML könnte man es mit Hilfe von JavaScript machen. Stell per HTML ein Video dar, welches am Ende des Films durch JavaScript von einer HTML-Ebene überblendet wird die man anklicken kann. Den Videowechsel (also ein anderes Video darstellen, abhängig davon was angeklickt wird) kannst Du dann ebenfalls per JavaScript erreichen.

 

[Dral]

Hi Threadi und erstmal danke für deine Antwort!

Leider bin ich bei dem Thema noch Anfänger und hab noch nicht so den Plan. Hast du da zufällig eine Beispielseite parat? Oder einen Tip wonach ich da genau suchen könnte? Ich hab grad nach "HTML Ebene per Javascript öffnen" gesucht aber komm da nur auf Seiten, die wohl komplett neue HTML Seiten öffnen. Das ist ja nicht so das was ich suche.

Was genau meinst du mit "HTML Ebene"? Ich habe mal versucht einen Canvas-Container über dem Video öffnen zu lassen, nur das funzt irgendwie nicht. Das Video "verschluckt" den Container irgendwie und er wird nicht angezeigt.

 

[threadi]

HTML-Ebene ist da der falsche Suchbegriff, ich habe das nur zum besseren Verständnis hier geschrieben da Ebenen ja übereinander liegen. Es geht technisch gesehen um das Ein- und Ausblenden von HTML-Elementen. Das kann man mit JavaScript durch Manipulation einer CSS-Eigenschaft erreichen. Beispiel-Funktion in JavaScript:

function einausblenden( obj ) {
 if( obj ) {
    var newvalue = "none";
    if( obj.style.display == "block") {
      newvalue = "block";
    }
   obj.style.display = newvalue;
  }
  return false;
}

Aufruf per Link inkl. betroffenem object, welches z.B. ein Video eingebunden hat:

<a href="#" onclick="return einausblenden(document.getElementById('elementid'))">klick</a>
<object ... id="elementid">...</object>

Das grobe Vorgehen sollte damit doch klar sein?

Wenn Du in einem object-Element das Video austauschen willst, ginge das z.B. so:

document.getElementById('elementid').src = "neuesvideo.swf";

 

[Dral]

Alles klar, das hilft mir weiter! Vielen Dank nochmals!