2013-04-26 3 views
15

Ich möchte Overlay-Hotspots auf einem HTML5-Video hinzufügen, die mir helfen werden, Informationen über dieses Video zu geben. Ich konnte es erfolgreich im normalen Modus von HTML5 Video hinzufügen. Aber wenn ich den Videomodus auf Vollbild umstelle, verschwindet er. Möchte jemand mir bitte helfen !!!Overlay auf HTML5 Fullscreen Video

Antwort

12

Der beste Weg, dies zu tun, ist eine der <Video> und Ihre Hotspots > enthält < div haben, und fordern Sie Vollbild auf dem Aufnahme <div>.

Ich habe die Vollbild- und (Teile der) <Video> APIs in Firefox implementiert. Dieser Z-Index-Hack ist nicht das angegebene Verhalten. Er funktioniert also nicht mehr, wenn wir unsere Implementierung so aktualisiert haben, dass sie dem neuesten Entwurf der W3C-Vollbildspezifikation entspricht.

+0

verbrachte einen halben Tag versucht, zu zahlen aus dem z-index sache unten in Firefox. Dies ist eine viel bessere Lösung. –

20

Dies kann mit einem Trick gelöst werden. Sehen Sie sich dieses Beispiel hier an: http://jsfiddle.net/carmijoon/pZbkX/show/

z-index: 2147483647;

Sie können auch den Code hier sehen: http://jsfiddle.net/carmijoon/pZbkX/

z-index: 2147483647; 

Sie Maximalwert von z-Index hinzufügen müssen, das ist (z-index: 2147483647;) in das Overlay-Elemente. Dieser Trick wird dein Problem lösen.

Können Sie Ihre Datei auch auf jsfiddle freigeben?

+0

Das half danke :) –

+0

Großartig !! Genius! funktioniert total !! – Magico

+1

Brilliant! Einfach brilliant! Wenn ich diese Antwort um 100 verbessern könnte, würde ich das tun. Ich war verzweifelt, eine Überlagerung auf einem Fullscreen-Element zu bekommen, bis ich diese Antwort gefunden habe. Tausend Dank, Carmijoon! – Velojet