Video Integration Hintergrundfarbe und Größe

HouseCat schrieb am 12.05.2022 um 15:03 Uhr

Wie kann die Hintergrundfarbe eines Videos von schwarz auf weiß gesetzt werden? Die Bedienungs-Leiste kann schwarz bleiben.
Oder im Idealfall werden die schwarzen Ränder ganz entfernt. Das mp4-Video-Format ist 930 x 530px und in dieser Größe ist auch der Platzhalter angelegt. Trotzdem gibt es schwarze Balken - wo liegt der Fehler ? Bin sehr dankbar für Tipps!

Autoplay wird auch von einiger Browsern nicht akzeptiert, gibt es da eine Hintertür? In Safari wird seltsamerweise das Startbild nach 1 Sekunde ausgeblendet und der schwarze Startbildschirm gezeigt.

Aktueller Code im Platzhalter:

<video class="xar_meplayer" src="index_htm_files/KleinHPstriegel.mp4" controls autoplay  poster="/index_htm_files/videostartbild.jpg" width="930px" height="530px"/>

Link zum Passwort-geschützten Entwurf: https://entwurf02.arteda.de/unternehmen-film.htm

(Benutzer: entwurf02, Passwort: Arteda2022)

Danke für die Unterstützung!!!

 

Kommentare

Robbin schrieb am 12.05.2022 um 21:26 Uhr

Wie kann die Hintergrundfarbe eines Videos von schwarz auf weiß gesetzt werden?

Das ist ganz einfach mit einer CSS Anweisung im Video Tag zu machen, die z.B. so aussehen kann:

style="background-color: #fff;"

Das komplette Video Tag sieht in deinem Fall für die Desktop Variante dann so aus:

<video class="xar_meplayer" src="index_htm_files/KleinHPstriegel.mp4" style="background-color: #fff;"controls autoplay  poster="index_htm_files/videostartbild.jpg" width="930px" height="530px"/>

Der Erfolg ist aber nur ein halber, weil dein Video schon schwarze Balken oben und unten mitbringt

Wenn du die entfernst und das Video neu speicherst, dann ist der Hintergrund komplett weiß:

    

Das Video Tag in der Smartphone Variante hat noch keine Poster Anweisung. Die müsstest du noch einrichten, dann wird's fast perfekt 😏

<video class="xar_meplayer" src="index_htm_files/KleinHPstriegel.mp4" style="background-color: #fff;" controls autoplay poster="index_htm_files/videostartbild.jpg" width = "100%" height="100%"/>

Die schwarzen Ränder in der Smartphone Ansicht sind zwar nur unter ganz bestimmten Umständen zu sehen, den Platzhalter in der Höhe kleiner anzulegen ist aber sicher kein Problem...

Autoplay wird auch von einiger Browsern nicht akzeptiert, gibt es da eine Hintertür?

Ja und nein...

Die autoplay Funktion von Videos die einen Audiokanal enthalten wird von den meisten Browsern ganz bewusst unterdrückt.
Eine "Hintertür" wäre also der Verzicht auf den Audio Kanal oder besser, der Einbau einer Stummschaltung in den Video Tag.
Die dafür nötige Anweisung ist "muted". Damit sollte das Video von den meisten Browsern automatisch wiedergegeben werden. Im Video Tag kann das so aussehen:

<video class="xar_meplayer" src="index_htm_files/KleinHPstriegel.mp4" style="background-color: #fff;" controls autoplay muted poster="index_htm_files/videostartbild.jpg" width = "100%" height="100%"/>

Möchte der Website Besucher den Ton hören, muss er selbst aktiv werden.

HouseCat schrieb am 16.05.2022 um 17:24 Uhr

Lieber Robbin - vielen Dank. Perfekte Erklärung - hat alles wunderbar geklappt. Da die Tonspur wichtig ist, wurde die Version mit dem Play-Button gewählt und auf Auto-Start verzichtet. Vielen Dank für Deine Mühe und die ausführliche Unterstützung 👍 . Viele Grüße Sylvia

marboe schrieb am 16.05.2022 um 18:32 Uhr

@HouseCat

Vielen Dank für die Rückmeldung. Weil das genau so ist, wie du schreibst, habe ich den Lösungsweg markiert. Das hilft anderen Suchenden. Viel Spaß weiterhin mit dem Programm. VG Marboe