Contao-Camp 2024
Ergebnis 1 bis 22 von 22

Thema: Filmformat für Filme, die im Hintergrund laufen

  1. #1
    Contao-Fan
    Registriert seit
    27.08.2014.
    Beiträge
    569

    Standard Filmformat für Filme, die im Hintergrund laufen

    Guten Abend,
    ich möchte gerne auf einer Startseite einen Film im Hintergrund laufen lassen -
    welches Format sollte der Film haben?
    Binde ich den Film genauso ein, wie ein Hintergrund Bild?

    Beste Grüße
    Tilda

  2. #2
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Nein, ein Hintergrundbild kannst du mit CSS einbinden, ein Video nicht.

    Versuche das Format mp4 mit Audio acc.

    Du kannst ein normales VIDEO-Tag einbinden, also ohne js_mediaelement. Verwende nicht das Attribute CONTROLS. Setze ein POSTER als Fallback-Bild.

    Du kannst das VIDEO irgendwo einbinden, im Footer oder Header z.B. Das CSS könnte so aussehen:
    PHP-Code:
    video.bg {
      
    positionfixed;
      
    widthauto;
      
    heightauto;
      
    left50%;
      
    top:  50%;
      
    min-width:  100%; /* oder 100vw */
      
    min-height100%; /* oder 100vh */
      
    transformtranslate(-50%, -50%);
      
    background-imageurl(files/css-video-fallback-hintergrund.jpg);
      
    background-sizecover;
      
    z-index: -1;

    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  3. #3
    Contao-Fan Avatar von Bas
    Registriert seit
    03.12.2009.
    Ort
    Hamburg
    Beiträge
    555

    Standard

    Nette Links bzgl. Hintergrund-Videos: http://vodkabears.github.io/vide/ und http://www.coverr.co/

    Vide kann ich nur empfehlen ...

  4. #4
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hier noch ein Link zu meiner Lösung http://thenewcode.com/777/Create-Ful...ckground-Video. Lies auch die interessanten Hinweise unter "Considerations and Limitations".
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  5. #5
    Contao-Fan
    Registriert seit
    27.08.2014.
    Beiträge
    569

    Standard

    Danke schön! Da schaue ich mal!
    Beste Grüße
    Tilda

  6. #6
    Contao-Fan
    Registriert seit
    27.08.2014.
    Beiträge
    569

    Standard

    Hallo Zusammen,

    mir ist noch nicht so ganz klar, welche Größe, bzw. welches Seitenverhältnis der Film haben sollte.

    Im Netz habe ich jetzt dies gefunden.

    https://www.webmalama.com/the-best-f...or-web-design/

    mit folgenden Beispielen:
    1920 x 1165 –1.65 ratio– Zara Clothing

    2560 x 1707 –1.5 ratio– Burberry

    Den Film, den ich gerne im Hintergrund laufen lassen möchte, kommt aus einer 3-D Animation,
    und da stellen sich nun viele Fragen:

    - Wie groß darf die Datei maximal?
    - Läuft der Film direkt los, oder ist es sinnvoller, dass man den Film starten muss?
    - Welche Größe ist notwendig, damit es nicht zu allzugroßen Qualitätsverlusten kommt?

    Beste Grüße
    Tilda

  7. #7
    Contao-Fan
    Registriert seit
    27.08.2014.
    Beiträge
    569

    Standard

    Funktioniert es eigentlich, wenn ich den Film üebr Vimeo lade und dann den Link des Videos einbinde?
    Dann müsste ich doch die Ladezeit im Griff haben, oder?

  8. #8
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Größe:

    Ich würde das Video im Format 16:10 zB 1920x1200 oder 16:9 zB 1920x1080 anfertigen.

    Bei Vollbildanwendung im Landscape-Format wird dann entweder ein Teil rechts und links, oder oben und unten abgeschnitten. Ohne Vollbildanwendung kann man nicht wissen, wie groß der Vieport im Browser eingestellt ist.

    Versuche das Video so klein wie möglich zu halten. Evtl. b&w. Ohne Tonspur. Ausprobieren, ob es noch gut aussieht, wenn ein kleines Video zB 320x200 auf 1920 aufgezogen wird. Kurze Videolänge.

    Besteht die Zielgruppe aus Smartphone-Besuchern, dann ein Video im Portrait-Format anfertigen. Soll es gleichzeitig auf dem Desktop angezeigt werden, sollte es noch gut aussehen, wenn die Bereiche oben und unten abgeschnitten werden.

    Wenn das Video zu groß ist, dann besser nicht auf der Startseite präsentieren, weil du damit ja jeden Besucher erstmal dazu zwingst dieses Video herunterzuladen.

    Autoplay auf Smartphones ist soviel ich weiß nicht möglich, also für ein "Poster" als Fallback sorgen.

    Vimeo:

    Ausprobieren.

    Edit: Ladezeit im Griff? Für den Besucher ist es kein Unterschied, ob der Browser das Video von deinem Server, oder einem Anbieter lädt. Es sei denn, der Anbieter hat gute Streaming-Settings. Und die Geschwindigkeit eines Anbieters könnte kleiner|größer als die deines Servers sein.
    Geändert von Andreas (14.02.2017 um 16:39 Uhr)
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  9. #9
    Contao-Fan
    Registriert seit
    27.08.2014.
    Beiträge
    569

    Standard

    Vielen Dank für die umfangreichen Info's -
    dann starte ich nun mal -

  10. #10
    Contao-Fan
    Registriert seit
    27.08.2014.
    Beiträge
    569

    Standard

    Das Filmchen läuft - responsive - alles wunderbar...

    Allerdings:

    Ich habe mich genau an die Schritte im contaowiki gehalten.
    http://de.contaowiki.org/Hintergrund_Video


    Da musste man die fe_page Datei um diese Zeile erweitern, um die Vollflächigkeit des Filmes zu bekommen.
    HTML-Code:
    <div id="bgvideo">{{insert_module::hintergrund_video}}</div>
    Nun habe ich aber das Problem, dass mir diese kleine Zeile in der Datei, die Folgeseiten zerhaut,
    dort kein Menü mehr anzeigt, wenn es Inhalte gibt. Und die Inhalte gedoppelt erscheinen.
    Wenn es keine Inhalte gibt, ist immerhin das Menü zu sehen

    Was kann man denn da tun?

    Beste Grüße
    Tilda
    Geändert von tilda (19.02.2017 um 14:15 Uhr)

  11. #11
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Der erste Satz in dem Wiki ist leider schon falsch. Mache es so, wie oben in Post #2 beschrieben.

    Du kannst sowohl ein CE Typ Video, oder ein Youtube-Video mit [youtube_iframe] per CSS als Hintergrundvideo einrichten. An welcher Stelle das Element im Quellcode steht ist nicht so wichtig.

    Seitenweites Einbinden von Artikeln oder Elementen (falls du das brauchst) macht man mit einem Modul Typ HTML und Inserttags. Beispiel:
    HTML-Code:
    <!-- indexer::stop -->
    
    <div class="mod_article block my-class">
    {{insert_article::my-article-alias}}
    oder
    {{insert_content::42}} 42 ist die ID eines CEs
    </div>
    
    <!-- indexer::continue -->
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  12. #12
    Contao-Fan
    Registriert seit
    27.08.2014.
    Beiträge
    569

    Standard

    schade, dass es falsch war -
    ich habe es jetzt so eingebunden, wie on dir unter dem Post#2 beschrieben ist,
    das funktioniert auch gut - aber wie bekomme ich da einen Loop eingestellt?

    Beste Grüße
    Tilda

  13. #13
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Über ne Template-Anpassung ce_player => ce_player_loop. 'loop' hinter 'controls' setzen. Siehe auch hier https://www.w3schools.com/tags/att_video_loop.asp
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  14. #14
    Contao-Fan
    Registriert seit
    27.08.2014.
    Beiträge
    569

    Standard

    Danke jetzt habe ich es !

  15. #15
    Alter Contao-Hase
    Registriert seit
    12.10.2010.
    Beiträge
    1.016

    Standard Contao 4 mit Fullpage-Hintergund-Video

    Hi Leute,

    wie lässt sich ein Video als Fullpage-Hintergrund-Video in Contao 4 einbinden und was muß man beachten, damit die Ladezeit auf Desktop und Mobile nicht ausufert?

    Das Video ist im Format mp4, 1280x720, und beträgt 16,4MB. Die Länge sind 19 Sekunden.

    Wie muß man das Video bearbeiten oder umwandeln?
    Sollte das Video für MOBILE zusätzlich in einem kleineren Format ( 320x240) erstellt werden und dann per Media-Query eingebunden werden?

  16. #16
    Contao-Fan Avatar von designpilot
    Registriert seit
    16.06.2013.
    Ort
    9532 Rickenbach bei Wil
    Beiträge
    272
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hi

    Folgendes kannst Du machen:
    Die Erweiterung von codefog.pl (Revolution Slider) benutzen (allerdings nicht günstig)

    49€ die Erweiterung
    16 Dollar & 49 Dollar das jQuery Script und der Visual Editor

    kaufen, dann sollte das Problem behoben sein
    (vielleicht wäre das was für Dich)


    Gesendet von iPhone mit Tapatalk Pro

  17. #17
    Contao-Fan Avatar von Ernestopheles
    Registriert seit
    25.10.2019.
    Ort
    Hamburg
    Beiträge
    293
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Andreas Beitrag anzeigen
    Der erste Satz in dem Wiki ist leider schon falsch.
    Warum ändert dann keiner das Wiki???

    Ich selber habe es versucht, es dürfen nur Administratoren ran...

  18. #18
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Das Wiki ist mindestens in Teilen hoffnungslos veraltet. Es hat davon gelebt/lebt davon, dass sich jemand in der Community dazu aufrafft und die Aktualisierung vornimmt. Im Grunde könntest auch Du das jetzt anpassen, wenn ich es richtig in Erinnerung habe.
    Andererseits haben wir jetzt die neue Doku https://docs.contao.org/manual/de/
    Ich weiß nicht ob das ein Thema für die Doku wäre oder in wie weit es sinnvoll ist Teile des Wikis in einem zusätzlichen Bereich aufzunehmen.
    Allerdings weiss ich, dass jeder eingeladen ist an der Dokumentation mitzuarbeiten.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  19. #19
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Ernestopheles Beitrag anzeigen

    Ich selber habe es versucht, es dürfen nur Administratoren ran...
    Ich konnte mich früher ganz normal registrieren. Jetzt finde ich auf der Startseite einen Hinweis zur Möglichkeit der Regisrierung https://de.contaowiki.org/Hauptseite
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  20. #20
    Contao-Fan Avatar von Ernestopheles
    Registriert seit
    25.10.2019.
    Ort
    Hamburg
    Beiträge
    293
    Contao-Projekt unterstützen

    Support Contao

    Standard Wie ich ein Hintergrund-Video integriert habe

    Nachdem ich lange per try and error rumprobiert habe und diverse Artikel in der Contao Doku gelesen habe, habe ich einen Weg gefunden, den ich hier beschreiben möchte:

    1. Damit das Video im Hintergrund läuft (wir zwingen es hinter die nachfolgenden html Elemente), legen wir außerhalb des Backends eine stylesheet-Datei bg.css an mit diesem Inhalt:

    Code:
    .bg video {
      position: fixed;
      width: auto;
      height: auto;
      left: 50%;
      top:  50%;
      min-width:  100%; /* oder 100vw */
      min-height: 100%; /* oder 100vh */
      transform: translate(-50%, -50%);
      z-index: -1;
    }
    Diese importieren wir in unser theme, das wir für unsere website verwenden.

    2. Wir erstellen in diesem theme ein Layout, in welchem wir das interne stylesheet bg ankreuzen.

    3. Die Seite, auf der das Hintergrundvideo laufen soll, bekommt dieses Layout zugeordnet. Bei mir ist das die Startseite. (Die anderen Seiten bekommen ein anderes Layout ohne das interne stylesheet).

    4. Auf der Startseite (Layout ist bei mir einspaltig) platzieren wir als Inhaltselemente:
    • ein Video, dem wir die CSS-Klasse bg zuordnen
    • andere HTML-Elemente, bei mir für den Test ein Text

    5. Die Vorschau zeigt den Text vor dem Video. Wie gewünscht.

    Anmerkungen: Mit dem selector video.bg funktioniert es bei mir nicht. Wie der HTML-Code der Vorschau zeigt, wirkt die Anweisung class="bg" nämlich nicht direkt auf das Video-Element, sondern auf das übergeordnete Blockelement (div), in dem dann ein figure tag folgt welches das video einbettet. "video.bg" wirkt nur, wenn es direkt im <video> tag steht. Während .bg auf alle möglichen HTML Elemente inclusive der darin eingeschlossenen wirkt.

    Einen Fallback für den Fall, dass das Video nicht geladen werden kann, braucht man nicht im CSS anlegen, da man im Video-Inhaltselement ein Vorschaubild angeben kann. Dies sollte die gleiche Funktion haben, vermute ich mal.

    Geholfen hat mir vor allem dieser Artikel: http://thenewcode.com/777/Create-Ful...ckground-Video
    Geändert von Ernestopheles (17.11.2019 um 15:13 Uhr) Grund: Stylesheet verbessert

  21. #21
    Contao-Urgestein Avatar von fiedsch
    Registriert seit
    09.07.2009.
    Ort
    München
    Beiträge
    2.935

    Standard

    Danke für Deine Zusammenfassung.

    Ein paar Fragen dazu:

    • Wozu dient background-size: cover;? Es gibt hier doch kein Hintergrundbild (im technischschen Sinn). Könnte das also nicht entfallen?
    • Da -- wie Du in Deine Anmerkungen erklärst der Selektor bg.video nicht greift, wie sieht es dann mit .bg video aus?
    • Hast Du einen Link für uns?
    Contao-Community-Treff Bayern: http://www.contao-bayern.de

  22. #22
    Contao-Fan Avatar von Ernestopheles
    Registriert seit
    25.10.2019.
    Ort
    Hamburg
    Beiträge
    293
    Contao-Projekt unterstützen

    Support Contao

    Information

    Zitat Zitat von fiedsch Beitrag anzeigen
    Wozu dient background-size: cover;? Es gibt hier doch kein Hintergrundbild (im technischschen Sinn). Könnte das also nicht entfallen?
    Ja, das stimmt.

    Einen Link kann ich erst schicken, wenn die Startseite soweit fertig und im Verein abgestimmt ist. Mach ich dann gerne.

    .bg video funktioniert

    Danke dir für deine Hinweise.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •