[Brubaker]

Hallo Leute,

Ich hätt da mal ne Frage an die Profis hier?

Ist es generell möglich, Videos als Theme-Background laufen zu lassen, oder bräucht man dazu generell HTML-5?
Ich hab zwar mit der Suchfunktion was gefunden, da ging es aber nur um Videofunktionalität für den Header, ich würd aber gerne mal mit Video-BG für den Content experimentieren.

Hab auch irgendwo im Netz mal was gesehen, daß es eine Möglichkeit gibt, den HTML-Code von Mybb generell auf HTML5 umzustellen, find aber leider diese Site nicht mehr.

Wichtig wär mir, daß es unter den 5 gängisten Broswern läuft (FF, Chrome, IE, Safari, Opera), und falls es dort aus irgendeinem Grund nicht laufen sollte, soll alternativ ein Background-Image gezeigt werden.

Bin mir sicher, daß irgendwelche Profis auch schon damit experimentiert haben - wär nett, wenn man die Erfahrungswerte hier bekommen könnte, nicht daß ich mich da reinknie in etwas, was von vornherein zum Scheitern verurteilt ist.

lg, thx im voraus für euer feedback und schönen Tag noch!

[StefanT]

Das sollte prinzipiell so funktionieren: http://be-jo.net/2014/04/video-als-hinte...5-und-css/
...wahrscheinlich auch bei Seiten, die gar kein HTML5 verwenden.

[Brubaker]

Besten Dank - werd's ausprobieren und das Ergebnis hier dann präsentieren!

lg

[MrBrechreiz]

Du kannst Dir auch dieses Beispiel ansehen
https://github.com/VodkaBears/Vide#readme

[Bodoboo]

Hallo, ich hatte das bei mir auf der Page gemacht und bekam es nicht zum laufen , weil das Video material nicht stimmte wurde nix angezeigt

Das Format musste im H.264 sein , es lag an meinem Videoschnittprogramm , erst als ich einen Format Umwandler kostenlos aus dem Netz ausprobierte ging es



so stand es bei mir im Header


<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="{$mybb->settings['bburl']}/images/weltraum.mp4" type="video/mp4">
<source src="{$mybb->settings['bburl']}/images/weltraum.webm" type="video/webm">
<source src="{$mybb->settings['bburl']}/images/weltraum.ogv" type="video/ogg ogv">
Video not supported </video>

[Brubaker]

Hallo, ich hatte das bei mir auf der Page gemacht und bekam es nicht zum laufen , weil das Video material nicht
....

Hi,

Hast du's nach der Methode von "Stefan's" Link gemacht oder nach der Methode von "MrBrechreiz's" Link?
Wie groß ist dein Video und nach wieviel Sekunden looped es?
Könntest du mir bitte die URL deines Forums nennen, damit ich mir das fertige Produkt  in LIVE anschauen kann?

Thx im voraus!

[MrBrechreiz]

Das hat er wieder entfernt, da es einige seiner Leute wohl genervt hatte ^^.

Schau mal hier

http://jsfiddle.net/mgmilcher/8R7Xx/sho/

oder

http://jsfiddle.net/pvkovalev/o0cL9hdx/

oder

http://jsfiddle.net/akv292/J8vy2/


Sollte doch reichen zum Anreiz ^^

[Brubaker]

Ich hab ja schon ein Video im MP4 Format, welches ca. 10 MB groß ist und alle 20 Sekunden looped!
Ich will es nicht als Standardtheme laufen lasssen, sondern nur als Gag drauf umswitchen, wenn es
draußen grad Schneefall gibt (wir betreiben ein Wetterforum). Zu diesem Schneefallvideo, hätt ich
auch schon das farblich passende Theme dazugebastelt.

Per Definition sollten alle gängigen Broser (Firerfox, Chrome, Safari, Opera, IE) MP4 unterstützen.
Jetzt hab ich im Web schon 4 verschiedene Anleitungen durchexerziert und mit keinem brachte
ich es zum laufen.

Drum bin ich hier auf der Suche nach jemandem, der's schon in Mybb zum laufen gebracht hat,
als Hintergrundvideo im Contentbereich! Von dem hätt ich dann gerne nur:

- den HTML-Code und wo man ihn einbaut
- den Css-Code dazu, und wo man ihn einbaut--

wenn du so was hättest, wär mir sehr geholfen!

lg

[MrBrechreiz]

Ein 10MB grosses Video ist schon der Hammer und die Handy User werdens danken :p

Wo im Content genau ?

[Brubaker]

Nicht für die Mobilen - die haben eh ihr Standardtheme!

Es soll als HIntergrundvideo am gesamten Bildschirm laufen, die Headergrafik allerdings
sollte drübergelagert sein!

http://img4web.com/view/K5KBKD

Die Idealllösung (da weit nicht so speicherintensiv) wär natürlich, daß ich nur das
Hintergrundbild reinstell und drüber diese transparente CSS-Animation drüberlaufen
lass:

http://codepen.io/aardrian/pen/emvabQ

lg