Startseite/Video soll als link zum anklicken sein.

Gast4809 · 03.07.2023

Hallo zusammen,

ich habe so gut wie keine Ahnung von HTML & Co. Nun versuche ich mir einiges selbst bei zu bringen, leider ist das alles nicht so Einfach!
Ich habe meine Start Seite soweit fertig und möchte nun, wenn man sich das Intro Angeschaut hat, das man irgendwo auf die Seite klinken kann und dann zur
Fotogalerie kommt. Wie stelle ich das an? Ich habe schon etliches ausprobiert aber leider ohne erfolg. Wie gesagt, die ganze Seite soll als link zum
anklicken sein. Ist das möglich?

Viele lieben Dank für die Unterstützung.

Hier der Code den ich für die Startseite soweit erstellt habe.

HTML:

<!doctype html>
<html lang="en">

<head>

<title>Street Core Recordings</title>

<meta charset="UTF-8">
<meta name="description" content="Streets & Districts of Frankfurt am Main.">
<meta name="author" content="S.C.R. CAMERA">
<meta name="keywords" content="streetphotography, photography, street, urban, black and white, scr, steet core recordings, streetcorerecordings, scr camera, frankfurt am main, frankfurt, monochrom, high contrast,">

<link href="design.css" type="text/css" rel="stylesheet">


</head>





<body>




<div id="video-bg">




  <video autoplay loop muted playsinline>
    <source src="video.mp4">
    <source src="video.webm" onerror="fallback(parentNode)">
    <img src="image.gif" alt="favicon">
  </video>





</div>




</body>

</html>

Viele lieben Dank für die Unterstützung.

scatello · 03.07.2023

JavaScript ist in dem Fall dein Freund: Klick mich

Gast4809 · 04.07.2023

Hi Scatello, erst einmal danke für die Antwort und den link.
Meine Frage an Dich, das JavaScript wird als separate Datei erstellt?

Sempervivum · 04.07.2023

Du musst dafür nicht unbedingt in Javascript einsteigen. Wenn die Fotogalerie in einer eigenen Seite liegt brauchst Du nur ein a-href-tag um das Video herum zu legen, dann wird bei Klick die neue Seite geöffnet.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a?retiredLocale=de
Willst Du allerdings den Benutzer zwingen, das Video bis zum Ende anzuschauen, geht es nicht ohne Javascript. Du musst dann auf das ended-Event warten und dann den Link freigeben.

Gast4809 · 04.07.2023

Hi Sempervivum, ich verstehe das nicht so richtig. Kannst Du mir das an Hand meines Codes bitt demonstrieren, wo genau der a-href-tag gemacht werden muss? Danke Dir.

Früher oder später werde nicht drum herum kommen, eine paar Kurse zu belegen wenn ich das alles selber machen will. Aber im Moment ist die Zeit nicht da dafür.

Hier mein Code:

<!doctype html>
<html lang="en">

<head>

<title>Normann Becker</title>

<meta charset="UTF-8">
<meta name="description" content="Streets & Districts of Frankfurt am Main.">
<meta name="author" content="S.C.R. CAMERA">
<meta name="keywords" content="streetphotography, photography, street, urban, black and white, scr, steet core recordings, streetcorerecordings, scr camera, frankfurt am main, frankfurt, monochrom, high contrast,">

<link href="design.css" type="text/css" rel="stylesheet">

</head>

<body>

<div id="video-bg">

<video autoplay loop muted playsinline>
<source src="video.mp4">
<source src="video.webm" onerror="fallback(parentNode)">
<img src="image.gif" alt="favicon">
</video>

</div>

</body>

</html>

Sempervivum · 04.07.2023

Ganz einfach:

Code:

<a href="deine-galerie-seite.html">
<div id="video-bg">
<video autoplay loop muted playsinline>
<source src="video.mp4">
<source src="video.webm" onerror="fallback(parentNode)">
<img src="image.gif" alt="favicon">
</video>
</div>
</a>

Gast4809 · 04.07.2023

Super... Danke. Wohl wahr, ist wirklich ganz einfach. Danke nochmals.

scatello · 04.07.2023

Gast4809 schrieb:
wenn man sich das Intro Angeschaut hat, das man irgendwo auf die Seite klinken kann und dann zur Fotogalerie kommt

Wenn du mit dem Link klar kommst, hast du dein Problem falsch beschrieben. "Angeschaut hat" bedeutet ja, dass man das Video zu Ende sehen muss.

Gast4809 · 05.07.2023

scatello schrieb:
Wenn du mit dem Link klar kommst, hast du dein Problem falsch beschrieben. "Angeschaut hat" bedeutet ja, dass man das Video zu Ende sehen muss.

Ja, mit dem Link komme ich klar. Ja und Du hast auch recht damit, das ich meine Problem falsch formuliert habe. Ist mir auch jetzt erst aufgefallen.
Andere Sache, wie würde das den mit dem Javascript funktionieren, bzw. wie wird das Javascript in den Code eingebunden? Die Variante finde
ich auch nicht schlecht. Das Intro geht so oder so nur 20sek. Also warum nicht bis zum Ende anschauen und dann automatisch weiterleiten.

Sempervivum · 05.07.2023

Was mich betrifft, freut es mich weniger wenn ich beim Betreten einer Website zwangsweise ein Video anschauen muss, aber zum Lernen kann es nicht schaden, wenn Du dich damit vertraut machst, wie es geht. Hier findest Du ein Beispiel:
https://stackoverflow.com/questions/2741493/detect-when-an-html5-video-finishes