webentwicklung-frage-antwort-db.com.de

Kann ich ein Video mit transparentem Hintergrund mit einem HTML5-Video-Tag erstellen?

Wir haben einen Sprecher auf einem grünen Bildschirm gedreht und die Videodateien in verschiedenen Formaten bereit gestellt. 

Mit Flash könnten wir den wmode transparent innerhalb der Tags "param" und "embed" verwenden. Gibt es etwas Ähnliches bei den Video- und Quell-Tags in HTML5? Ist es sogar möglich, .m4v- oder .ogv-Videos richtig zu speichern, damit wir diese Dateien mit transparentem Hintergrund auf unseren Browsern abspielen können?

Vielen Dank

37
DavidE

Ja, so etwas ist ohne Flash möglich: 

Allerdings unterstützen nur sehr moderne Browser HTML5-Videos. Dies sollte bei der Bereitstellung in HTML 5 von Bedeutung sein. Sie sollten einen Fallback bereitstellen (wahrscheinlich Flash oder die Transparenz weglassen).

27
Lie Ryan

Chrome 30> unterstützt die Transparenz von Video-Alpha. 

http://updates.html5rocks.com/2013/07/Alpha-Transparenz-in-Chrome-video

19
Praveen Vijayan

Dies ist eine Einschränkung der von den Browsern unterstützten Videocodecs: mp4, ogv und webm unterstützen derzeit keine Alphakanäle.

Es gibt Problemumgehungen, bei denen das Video jedoch mit Canvas erneut gerendert wird, und das ist eine Art Hack. seeThru ist ein Beispiel. Es funktioniert ziemlich gut mit HTML5-Desktop-Browsern (sogar IE9), aber auf Mobilgeräten scheint es nicht sehr gut zu funktionieren. Ich konnte es überhaupt nicht auf Chrome für Android erreichen. Es hat auf Firefox für Android funktioniert, aber mit einer ziemlich miesen Framerate. Ich denke, Sie haben vielleicht kein Glück für mobile Geräte, obwohl ich gerne falsch sein würde.

16
nullability

Derzeit ist der einzige Videocodec, der einen Alphakanal wirklich unterstützt, VP8, das von Flash verwendet wird. MP4 würde es wahrscheinlich unterstützen, wenn das Video als Bildsequenz exportiert würde, aber ich bin ziemlich sicher, dass Ogg-Videodateien keinerlei Unterstützung für einen Alphakanal bieten. Dies könnte einer der seltenen Fälle sein, in denen das Festhalten an Flash Ihnen besser helfen würde.

2
Andrew

Während dies mit dem Video selbst nicht möglich ist, können Sie die Rahmen des Videos mit einer Leinwand zeichnen, mit Ausnahme von Pixeln in einem Farbbereich oder einem anderen Bereich. Es würde etwas Javascript und so etwas natürlich brauchen. Siehe Video Puzzle (augenblicklich defekt), Explodierendes Video und Echtzeitvideo -> ASCII

2
cthom06

MP4-Dateien können mit transparentem Hintergrund mithilfe der seeThrou Js-Bibliothek wiedergegeben werden. Alles, was Sie benötigen, um Video- und Alphakanal in einem einzigen Video zu kombinieren. Stellen Sie außerdem sicher, dass die Höhe der Videohöhe unter 1400 px bleibt, da einige der alten iPhone-Geräte keine Videos mit einer Größe von mehr als 2000 abspielen. Dies ist in Safari-Desktops und mobilen Geräten, die Webm zurzeit nicht unterstützen, sehr nützlich.

weitere Details finden Sie unter dem folgenden Link https://github.com/m90/seeThru

1

das Webm-Format ist die beste Lösung für Chrome> 29, wird jedoch nicht von Firefox IE und Safari unterstützt. Die beste Lösung ist Flash (wmode = "transparent"). aber du musst "ios" vergessen. 

0
prakashapkota

Quicktime-Movs werden als Animationsarbeit exportiert, jedoch nur in Safari. Ich wünschte, es gäbe eine vollständige Lösung (oder ein Format), die alle gängigen Browser abdeckt.

0
user3893535