1. Zuhause
  2. Frage und Antwort
  3. HTML5-Video: Möglicher regelmäßiger HTML-Inhalt über Video

HTML5-Video: Möglicher regelmäßiger HTML-Inhalt über Video

2011-01-07 8 views

Antwort

1

Warum nicht das Attribut poster verwenden? Auf diese Weise können Sie ein Bild anzeigen, bis das Video geladen oder abgespielt wird.

Quelle

2011-01-07 15:06:50

+0

Die Idee ist, ich versuche, das Video in einen Teil des Designs der Website zu integrieren, wo ein Bereich entlang der Oberseite des Videos überlappt, um das Video erscheinen zu lassen, als ob es teilweise darunter ist. Ich habe versucht, das Bild in das Video selbst zu bringen, aber aufgrund der Komprimierung ändern sich die Farben und die Größe leicht und der Unterschied ist ziemlich auffällig. –

+0

Die einzige Lösung, die mir für dieses spezielle Beispiel einfällt, ist, das div/img automatisch mit JavaScript auf das Video zu setzen. Auf diese Weise wird das Video zusammen mit der Seite geladen und beeinträchtigt das Bild nicht. Vielleicht möchten Sie den Z-Index im Auge behalten. –

0

Können Sie das Video als Hintergrund für dieses div festlegen? Nicht sicher, ob es für Ihr Layout funktionieren würde, aber es scheint logisch ...

Quelle

2011-01-07 15:50:32 zenbike

+0

Wie stellst du ein Video als Hintergrund ein? –

+0

Es hat mit der Verwendung der und

4

Sie können HTML-Elemente einfach auf HTML5-Video setzen, indem Sie sie absolut oben auf dem Video positionieren. Geben Sie sowohl dem Videoelement als auch dem HTML-Element eine "position: absolute" und setzen Sie das HTML-Element einen z-Index höher als das des Videoelements.

Quelle

2011-02-23 08:45:31 jj1910

+0

Haben Sie Beispiele dafür? –

+2

Hier ist ein Beispiel. Aber du solltest es beim nächsten Mal versuchen. Kostet mich 5 min;): http://jsfiddle.net/GxvyG/ –

6

Wie andere angedeutet haben, ist es sehr einfach, HTML-Elemente über VIDEO Elemente mit absoluter Positionierung zu positionieren. Die Herausforderung kommt, wenn Sie versuchen, Ereignisse auf ihnen auf dem iPhone, iPod und möglicherweise älteren Android-Handys, die Video-Assets nicht inline auf der Seite (im Gegensatz zu in einem dünnen nativen Wiedergabe-Client) spielen seit seit diesen Instanzen der VIDEO Element zu erfassen gierig erfasst Ereignisse.

Falls Sie ein IMAGE Element oder ein DIV mit seinem background-image Satz zu einem Bild verwenden Sie als „Plakat“ verwenden oder „Thumbnail“ und dann die Benutzer nicht in der Lage sein, auf sich tippen Sie auf das Video zu erhalten, fange an zu spielen - der mobile Browser wird dieses Verhalten behandeln, als ob nur das VIDEO Element in diesem Raum existiert (gut, wenn du in der Mitte klickst, wo der "große Spiel" Knopf ist, aber nicht so hilfreich wenn du, sagen wir mal, hast) eine benutzerdefinierte Steuerung nicht in der Mitte.

die Lösung, die ich in der Vergangenheit verwendet habe, ist nur auf der Seite das IMG oder DIV Plakat zu setzen, wo Sie in der Regel das VIDEO Element setzen würden und verschieben die VIDEO Element Offscreen (absolut positioniert mit left Stil auf, sagen wir, -3000px), so dass es nicht mehr diese Ereignisse horten kann.

Ich weiß, das ist nicht genau das, was gefragt wurde, aber hoffentlich wird diese Information für jemanden nützlich sein.

Quelle

2012-07-11 17:48:01 natlee75

+0

+1 Ich stimme Ihrer Methode zu. Ich musste eine Bibliothek von Drittanbietern implementieren, die eine Benutzeraktion erforderte, d. H. Auf eine Schaltfläche klicken. Quicktime Player war ein Albtraum. Ich habe zunächst das Video-Element eingestellt, um anzuzeigen: keine und zeigte es nur nach der Aktion des Benutzers. Sie Methode ist perfekt, da es wirklich keine Rolle spielt, wo das Video-Element als nach all seinen nur im Vollbildmodus öffnen wird überall. Ein wenig aus css kann die Benutzer täuschen – sidarcy

+0

http://stackoverflow.com/questions/3683211/ipad-safari-mobile-seems-to-ignore-z-indexing-position-for-html5-video-elements – RobW

Verwandte Themen

 Verwandte Themen