Suche Html-Code für "Play/Pause" für ein Hintergrund-Video

Thomas-Pakulla schrieb am 06.06.2023 um 02:22 Uhr

Hallo an die Community,

Ich baue (mit dem MAGIX Web Designer Premium 19) an einer Website in der Hintergrund-Videos abgespielt werden. Natürlich sind sie nicht anklickbar (soll auch so). Jedoch sollen die Background-Videos über einen separaten Button (Platzhalter) steuerbar sein. Ich benötige nur die Play/Pause Funktion. Diesen Platzhalter würde ich gerne irgendwo auf der Seite platzieren. Ich habe keine Ahnung wie man so einen HTML-Code schreibt und auch "Google" lässt mich nicht schlauer werden. Könnte mir vielleicht jemand den Code für den Platzhalter (Body und Heat) zur Verfügung stellen?

Hier ist das, was ich bereits habe... (...betreffend das Hintergrund-Video)

Body

<div id="videobg"> 
<video class="xar_meplayer" src="index_htm_files/muschel720p.mp4" loop autoplay muted width = "1650" height="930"/> 
</div>

Heat

<style type="text/css"> * { margin: 0; padding: 0; } #videobg { position: fixed; z-index: 0; top: 0px; left: 0px; height: 100%; width: 100%; opacity: 1; overflow: hidden; } video{ position: absolute; z-index: 0; top: 0px; left: 0px; min-width: 100%; min-height: 100%; } </style>

Ich bedanke mich schon einmal im Voraus.

Kommentare

Robbin schrieb am 07.06.2023 um 14:00 Uhr

@Thomas-Pakulla

Jedoch sollen die Background-Videos über einen separaten Button (Platzhalter) steuerbar sein. Ich benötige nur die Play/Pause Funktion.

Um das umzusetzen benutzt du besser JScript, keinen HTML Code...

So kann ein geeignetes JScript aussehen:

<script> 
function startstop() { 
const video = document.querySelector("#video"); 
if (video.paused) { video.play();
} 
else { video.pause(); 
}}; 
</script>

Wenn du das o. a. Script zu dem schon vorhandenen CSS Script im HTML Head deines Platzhalters packst, dann bleibt die Lösung übersichtlich.
Damit das JScript wunschgemäß funktioniert, musst du das Video TAG noch mit einer passenden ID ausstatten, hier ist das die ID "video".
Der angepasste HTML Code im Body des Platzhalters sieht dann so aus:

<div id="videobg"> <video id="video" class="xar_meplayer" src="index_htm_files/muschel720p.mp4" autoplay loop muted width = "100%" height="100%"/> </div>

Der Vollständigkeit halber hier nochmal der komplette CSS/JScript Code für den HTML Head des Platzhalters:

<style type="text/css">
{ margin: 0; padding: 0; } 
#videobg { position: fixed; z-index: 0; top: 0px; left: 0px; height: 100%; width: 100%; opacity: 1;
overflow: hidden; } 
video{ position: absolute; z-index: 0; top: 0px; left: 0px; min-width: 100%; min-height: 100%; } </style>
<script>
function startstop() {
const video = document.querySelector("#video");
if (video.paused) { video.play();
}
else { video.pause();
}};
</script>

Im Editorfenster des Web Designer sollte das so aussehen:

Jetzt legst du noch einen Button an, der bei einem Klick darauf des Video stoppt- und beim nächsten Klick wieder startet. Dazu verlinkst du ihn auf das weiter oben angelegte JScript "startstop()", mit dem Link: "javascript:startstop()"

Jetzt kannst du dein Projekt lokal exportieren oder auch online stellen und die Video Funktion testen. Das kann z. B. so aussehen:

Den "lebenden" Beweis kannst du hier in der online Demo sehen...

Viel Erfolg

Thomas-Pakulla schrieb am 07.06.2023 um 21:13 Uhr

Danke. Echt toll das du dich mit meinem Problem beschäftigt hast. Ich werde es gleich Mal ausprobieren. 👍

Thomas-Pakulla schrieb am 07.06.2023 um 22:35 Uhr

Das ist die Lösung! 👍 Damit kann echt was anfangen. (Schade das wir keine Nachbarn sind.😂)

Aber... (Sorry)

Wenn der der angelegte Button einen MouseOver-Effekt bekommt, dann springt er dem Mauspfeil leicht entgegen. Im Browser sieht man dann ein leicht verschobenes Bild vom Button.

Ich benutze Ihn jetzt ohne den MouseOver. Das tut dem Ganzen keinen Abbruch.

Ich danke dir für deine schnelle Hilfe!!!!!

Thomas-Pakulla schrieb am 08.06.2023 um 07:45 Uhr

@Thomas-Pakulla

Jedoch sollen die Background-Videos über einen separaten Button (Platzhalter) steuerbar sein. Ich benötige nur die Play/Pause Funktion.

Um das umzusetzen benutzt du besser JScript, keinen HTML Code...

So kann ein geeignetes JScript aussehen:
<script> 
function startstop() { 
const video = document.querySelector("#video"); 
if (video.paused) { video.play();
} 
else { video.pause(); 
}}; 
</script>
Wenn du das o. a. Script zu dem schon vorhandenen CSS Script im HTML Head deines Platzhalters packst, dann bleibt die Lösung übersichtlich.
Damit das JScript wunschgemäß funktioniert, musst du das Video TAG noch mit einer passenden ID ausstatten, hier ist das die ID "video".
Der angepasste HTML Code im Body des Platzhalters sieht dann so aus:
<div id="videobg"> <video id="video" class="xar_meplayer" src="index_htm_files/muschel720p.mp4" autoplay loop muted width = "100%" height="100%"/> </div>
Der Vollständigkeit halber hier nochmal der komplette CSS/JScript Code für den HTML Head des Platzhalters:
<style type="text/css">
{ margin: 0; padding: 0; } 
#videobg { position: fixed; z-index: 0; top: 0px; left: 0px; height: 100%; width: 100%; opacity: 1;
overflow: hidden; } 
video{ position: absolute; z-index: 0; top: 0px; left: 0px; min-width: 100%; min-height: 100%; } </style>
<script>
function startstop() {
const video = document.querySelector("#video");
if (video.paused) { video.play();
}
else { video.pause();
}};
</script>
Im Editorfenster des Web Designer sollte das so aussehen:

Jetzt legst du noch einen Button an, der bei einem Klick darauf des Video stoppt- und beim nächsten Klick wieder startet. Dazu verlinkst du ihn auf das weiter oben angelegte JScript "startstop()", mit dem Link: "javascript:startstop()"

Jetzt kannst du dein Projekt lokal exportieren oder auch online stellen und die Video Funktion testen. Das kann z. B. so aussehen:

Den "lebenden" Beweis kannst du hier in der online Demo sehen...

Viel Erfolg

Thomas-Pakulla schrieb am 08.06.2023 um 07:51 Uhr

@Robbin Leider gab es noch ein etwas größeres Problem mit dem Code.

Ich nutze mehrere Website-Varianten. In einer funktioniert es ganz toll, doch in der anderen geht nichts mehr. Das video steht und lässt sich über den Button auch nicht einschalten. Als ich im code für die 2. Website-Variante die Video-ID mit einer 1 erweitert habe bekam ich das es zum laufen und auch der Button fuzt. Doch jetzt ist das 1. Video nicht mehr steuerbar aber es läuft.

Hast du dafür evtl. auch eine Lösung?

Robbin schrieb am 08.06.2023 um 21:17 Uhr

@Thomas-Pakulla

Ich nutze mehrere Website-Varianten. In einer funktioniert es ganz toll, doch in der anderen geht nichts mehr.

Du hast in der Lösung die du in deinem 1. Posting vorgestellt hast, einen Lösungsvorschlag von Magix umgesetzt, den die hier im Nov. 2018 vorgestellt haben. Ich habe den lediglich leicht modifiziert und um ein paar Zeilen JScript erweitert, damit du das eingebundene Video starten/stoppen kannst...
Dass die "Lösung" Probleme machen wird, wenn du sie mit Varianten benutzt, das war zu befürchten.
Aber noch ist nichts verloren. Mit einem etwas anderen Lösungsansatz kommst du problemlos zum Ziel.

Wenn dein Projekt noch kein Hilfsverzeichnis haben sollte, dann erstell' das jetzt und kopier' das Video "muschel720p.mp4" da hinein.
Lösch den Platzhalter- und alle CSS/JScript Einträge, die du aus meinem ersten Vorschlag auf der Seite angelegt hast.

Kopier' den folgenden CSS Scriptcode in den HTML Head der Seite

<style>
video {   
position: fixed; 
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;width: auto;
height: auto;
z-index: -1; 
-webkit-transform: translateX(-50%) translateY(-50%); 
transform: translateX(-50%) translateY(-50%);
}
@media screen and (max-width: 500px) {
div{width:70%};
}
</style>

Kopier den folgenden HTML / JScript Code in den HTML Body der Seite

<video   id="bgvid" loop autoplay muted playsinline>
<source src="./index_htm_files/muschel720p.mp4" type='video/mp4;'>
Sorry, Ihr Browser unterstützt kein HTML5 video.
</video>

<script>
var vid = document.querySelector("#bgvid");
function play() { 
if (vid.paused) {    
vid.play();}
else {   
vid.pause();    
}}
</script>

Ändere den Link für den "start/stop" Button. Der muss jetzt auf die neu angelegte JScript Funktion "play()" zeigen. Der Link muass also jetzt "javascript:play()" heißen.
Kopier' den "start/stop" Button inkl. Link in die Smartphone/Tablet Variante

Das war's dann auch schon. Jetzt sollte das Video auch in der Variante problemlos laufen und mit einem Klick auf den "start/stop" Button gesteuert werden können.

Schau dir mal die entsprechend modifizierte online Demo an, die funktioniert sowohl auf dem Desktop als auch auf dem Tablet/Smartphone.

Thomas-Pakulla schrieb am 09.06.2023 um 00:06 Uhr

@Robbin Das ist die Lösung! Habe es probiert und es funktioniert toll. Ich bin glücklich mit der Website nun endlich online gehen zu können. Hab vielen Dank dafür.

Wenn du mal etwas aus Ecuador brauchst ... Lass es mich wissen. (Ist so gemeint, wie ich es sagte!)

LG, Thomas