Videodatei als Hintergrund

TonTom schrieb am 24.09.2017 um 20:53 Uhr

Hallo

Ich bin neu in eurem Forum, da ich neu etwas Webpages erstelle mit WebDesigner pro 365.

Ich würde gerne wissen, ob es möglich ist, eine Filmsequenz als Hintergrund einer Seite zu implementieren.

Sehe das des Oefteren und finde das Resultat manchmal sehr geglückt.

Wenn mir hier jemand helfen könnte?

Vielen Dank in die Runde.

Thomas

Kommentare

BeRo schrieb am 24.09.2017 um 22:24 Uhr

Es gibt sicher mehrere Möglichkeiten das zu realisieren. Eine Lösung, die mit ein paar Zeilen JS/CSS auskommt, wird hier erklärt.
Die online Demo, die mit den gezeigten Codes gemacht wurde, kannst Du hier ansehen.
Die dazu gehörende WD Projektdatei (inkl. aller Codes) kannst Du hier herunterladen.

Die in der Beschreibung genannte Methode, mehrere, verschiedene Video Dateien (mp4, ogv, webm) einzubinden, ist heute nicht mehr erforderlich. Da die modernen Browser alle mit dem mp4 Video Format klar kommen, genügt es die Video Datei in diesem einen Format (mp4) einzubinden.

Viel Erfolg

Edit: 23:03 h
fehlenden Link ergänzt 😔

Zuletzt geändert von BeRo am 24.09.2017, 23:03, insgesamt 2-mal geändert.

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

TonTom schrieb am 25.09.2017 um 09:42 Uhr

Lieber BeRo

Das ging ja schnell. Ich teste das gleich mal aus;-)

Vielen Dank!

ThomaS

TonTom schrieb am 25.09.2017 um 10:11 Uhr

Die Onlinedemo macht genau das. Das ist ja super. Nur:

Wo füge ich den Code denn ein?

Und füge ich genau diesen Code ein?:

<html>


<style>
body, html { width:100%; width:100%; margin:0; padding:0;}
section { position:absolute; top:0; left:0; bottom:0; right:0; width:100%; hight:100%; overflow:hidden; }
section video { min-width:100%; min-height:100%; position:absolute; top:0; left:0; bottom:0; right:0; }
</style>


<body>


<section>
<video loop="loop" preload="auto" autoplay="" muted="muted">
<source src="./index_htm_files/platzhalter.mp4" type="video/mp4"></source>
 


</section>


</body>
</html>

 

Und fett platzhalter.mp4 ist dann mein Video.

Du merkst, ich habe null Idee betreffend html. Deshalb arbeite ich ja auch mit dem Web Designer;-)

 

LG

Thomas

 

BeRo schrieb am 25.09.2017 um 20:35 Uhr

[...] Wo füge ich den Code denn ein? [...]

In den HTML Head-, Body der Seite, auf der Dein Video zu sehen sein soll...

[...] Und füge ich genau diesen Code ein? [...]

Im Prinzip schon, aber mit ein paar kleinen Anpassungen...

Der u. a. CSS Code gehört in den Head Bereich:

<style type="text/css">
body, html { width:100%; width:100%; margin:0; padding:0;}
section { position:absolute; top:0; left:0; bottom:0; right:0; width:100%; hight:100%; overflow:hidden; }
section video { min-width:100%; min-height:100%; position:absolute; top:0; left:0; bottom:0; right:0; }
</style>

Der u. a. HTML Code (Section- und Video Tag) gehört in den Body Bereich:

<section>
<video loop="loop" preload="auto" poster="index_htm_files/polina.jpg" autoplay muted>
<source src="./index_htm_files/polina.mp4" type="video/mp4"></source>
<div>Schade – hier könnten Sie ein Video sehen, wenn Ihr Browser HTML5 Unterstützung hätte!</div>
</video>
</section>

Die fett markierten Dateinamen stehen...

  • für das Bild, das als Standbild angezeigt wird, bis das Video geladen ist und abgespielt wird. Hier ist das die Datei "polina.jpg"
  • für das Video im mp4 Format. Hier ist das die Datei "polina.mp4"

Du hast Dir ja offenbar auch die Projektdatei zu meiner Demo heruntergeladen. Da findest Du alle Steuerdateien (CSS + HTML Tags) in den oben genannten Bereichen.
Schau's Dir mal an und experimentiere ein bisschen damit...

Viel Erfolg

Zuletzt geändert von BeRo am 26.09.2017, 10:56, insgesamt 1-mal geändert.

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

TonTom schrieb am 26.09.2017 um 23:00 Uhr

Wow, da kann ja kaum mehr etwas schief gehen. Habe aber in nächster Zeit keine Kapazitäten das zu testen und zu versuchen.

Melde mich aber sobald ich den Faden wieder aufnehme.

Tausend Dank dafür!

LG

Thomas

 

BeRo schrieb am 26.09.2017 um 23:30 Uhr

[...] Melde mich aber sobald ich den Faden wieder aufnehme. [...]

Kein Problem.

Denk' aber beim Nachbau daran, dass die referenzierten Dateien (Video + Standbild) in das Projekt Dateiverzeichnis "index_htm_files" gehören. Das macht der WD nicht automatisch, es sei denn, Du benutzt das Hilfsverzeichnis des Projekts und verschiebst die Dateien da hinein...

Ein Hilfsverzeichnis wird vom WD automatisch erstellt, wenn Du z. B. eine vorhandene Grafik (oder einen Platzhalter) durch eine extern gespeicherte Grafik ersetzt, das kann hier z. B. das Standbild "polina.jpg" sein.
Alternativ kannst Du das Hilfsverzeichnis manuell anlegen. Dazu erstellst Du in dem Verzeichnis, in dem die Projektdatei (z. B. "sitename.web") liegt, ein neues Verzeichnis. Das Verzeichnis muss den Namen des Projekts haben (hier "sitename"), erweitert um "_web_files".
Für unser Beispiel hat das Hilfsverzeichnis also den Namen "sitename_web_files".
Alle Dateien, die Du in dieses Verzeichnis kopierst, werden vom WD bei einem Export/Upload automatisch gelesen und in das Datei Verzeichnis "index_htm_files" kopiert.
Dort eventuell schon vorhandene Originaldateien werden dabei mit den Dateien aus dem Hilfsverzeichnis überschrieben!
Wenn Du die "Hilfsverzeichnis" Methode benutzt, musst Du dich also um die korrekte Organisation Deiner Scriptdateien nicht mehr kümmern, das macht dann der WD vollautomatisch.

Die Projektdatei "vidbackgr2.web", die Du heruntergeladen hast, bringt als Hilfsverzeichnis "vidbackgr2_web_files" mit. Bei einem Export der Demo werden also alle Dateien aus diesem Hilfsverzeichnis in das Projekt Dateiverzeichnis kopiert.

Noch Fragen? 😊

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

TonTom schrieb am 23.11.2017 um 13:09 Uhr

Lieber BeRo

Endlich hatte ich etwas Luft und habe mich daran gemacht. Dank deiner Hilfe hat das ziemlich gut geklappt und mein erstes eingebundenes Video läuft im Hintergrund meiner Seite.

www.klangkultur.ch

Herzlichen Dank und liebe Grüsse

Thomas