Einfaches Webseitenerstellungsprogramm gesucht

Push-Nachrichten von MacTechNews.de

Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?

Forum>Software>Einfaches Webseitenerstellungsprogramm gesucht

macs®us09.06.2422:21

Hallo miteinander.
Für einen Foxtrail/Schnitzeljagd hatten wir die Idee, am Zielort einen QR-Code zu verstecken, der auf eine Webseite verweist, die bei Aufruf einen kleinen Film mit der nächsten Aufgabe abspielt.
Ich möchte automatisch erkennen, ob es von einem Handy oder einem Mac abgespielt wird und so die richtige Grösse ausliefern. Mehr nicht.
Ich möchte die einzelnen Webseiten auf meiner Webseite hosten und nicht auf YouTube etc.

Was könnt ihr empfehlen?

„Ein Fotograf sollte wie ein kleines Kind sein, das die Welt jeden Tag von neuem entdeckt.“

Kommentare

ela10.06.2407:37

Wenn es nur einen Film zeigen soll - und wenn du aktuelle Browser voraussetzen kannst …

Ich würde mal im Web suchen nach „html Tutorial play Video file“ oder ähnlich. HTML5 hat doch einen Video Tag - das sollten nur wenige Zeilen html sein und du wirfst html und Video file an dieselbe Stelle auf dem Server und fertig

Würde ich zumindest mal ausprobieren.

Wenn das nicht klappt braucht es wieder etwas mit videoplayer Plugin.
… das kann eine schnelle WordPress Installation sein
… oder etwas einfacheres wie Bludit (habe nicht probiert ob Video inklusive ist - kannst aber mal schauen.)

Mapple10.06.2408:52

frei nach ChatGPT:

Um die Aufgabe ohne JavaScript umzusetzen, kannst du die HTML5-Elemente und die CSS-Media-Queries nutzen. Hier ist ein Ansatz, der auf der Verwendung von Media-Queries basiert, um das richtige Video basierend auf der Bildschirmgröße zu laden.

### HTML und CSS ohne JavaScript

Erstelle eine HTML-Seite, die auf Media-Queries basiert, um das richtige Video anzuzeigen.

```html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foxtrail Video</title>
<style>
/* Standardgröße für Desktops */
video.desktop {
display: block;
}
video.mobile {
display: none;
}

/* Media-Query für Mobilgeräte */
@media (max-width: 768px) {
video.desktop {
display: none;
}
video.mobile {
display: block;
width: 100%;
}
}
</style>
</head>
<body>
<video class="desktop" controls>
<source src="https://deinewebseite.com/videos/desktop/video1.mp4" type="video/mp4">
Dein Browser unterstützt das Video-Tag nicht.
</video>
<video class="mobile" controls>
<source src="https://deinewebseite.com/videos/mobile/video1.mp4" type="video/mp4">
Dein Browser unterstützt das Video-Tag nicht.
</video>
</body>
</html>
```

### Erklärung

1. **CSS Media Queries**:
- Standardmäßig wird das Video für Desktops (`video.desktop`) angezeigt und das Video für Mobilgeräte (`video.mobile`) ausgeblendet.
- Mit der Media-Query `@media (max-width: 768px)` wird das Verhalten umgekehrt: Das Desktop-Video wird ausgeblendet und das Mobilgeräte-Video wird angezeigt und auf die Breite von 100% gesetzt.

2. **HTML Video-Elemente**:
- Zwei `<video>`-Elemente werden definiert: eins für Desktops und eins für Mobilgeräte.
- Die `source`-Elemente innerhalb der `<video>`-Tags geben die jeweiligen Video-URLs an.

### Videos hosten

Stelle sicher, dass die Videos auf deiner Webseite gehostet werden und die Pfade korrekt sind. Die Struktur könnte so aussehen:

```
/deinewebseite.com
/videos
/mobile
video1.mp4
/desktop
video1.mp4
/foxtrail
video1.html
```

### Zusammenfassung
- Verwende Media-Queries in CSS, um das richtige Video basierend auf der Bildschirmgröße anzuzeigen.
- Erstelle zwei `<video>`-Elemente in deinem HTML: eins für Desktops und eins für Mobilgeräte.
- Lade die Videos auf deine Webseite hoch und stelle sicher, dass die Pfade korrekt sind.

Mit dieser Methode kannst du die richtige Videogröße basierend auf dem Gerät ohne JavaScript ausliefern.

ttwm10.06.2410:07

Zu beachten bei der ChatGPT-Lösung: je nach Browser werden aber beide Videos vollständig geladen, auch wenn nur eines angezeigt wird.

Sascha7710.06.2410:29

Für einfache, schnelle Websites ist das kostenlose Mobirise ne Option.

Macdoor10.06.2410:37

Ist vielleicht etwas viel Aber nen Wordpress drauf packen und jeweils eine Seite mit einem Video versehen ?

Brauchst zwar nicht annährend so ein System, da aber anscheinend kaum Erfahrung da ist, würde Wordpress mit seinen unzähligen WYSIWYG Editoren die Sache vereinfachen.

„Jeder hat das Recht auf seine eigene falsche Meinung“

michimaier10.06.2413:36

sorry, wenn ich Frage, aber ist eine User Agent Abfrage überhaupt von Bedeutung?
Du schreibst von einer Schnitzeljagd... Dann würde ich davon ausgehen, dass alle mit dem Phone/Tablet also einem "mobile" Device unterwegs sind...? (ausser du spielst verschiedene Videos für Mobile/Desktop aus, wovon ich jetzt mal nicht ausgehen würde... )
unabhängig davon ist es egal mit welchem Device sie unterwegs sind, dank responsiven CSS ist es kein Problem für jede Display Grösse das richtige Video abzuspielen...

...es klingt aber verhältnismässig aufwendig was du vor hast, ... also mit "selbst hosten" ...
Theoretisch könntest du einen Dropbox Link hernehmen...

B_Babb10.06.2413:45

ich denke am schnellsten und einfachsten ist es mit einer kostenlosen jimdo seite ,
da machst du das in 2 min.

rmayergfx10.06.2413:47

macs®us

Für diese einfache Aufgabe genügt es vollkommen einen Film mit H.264 codiert als mp4 Datei per URL Link aufzurufen der im QR Code steht.

In QRCode Monkey die URL zur Filmdatei angeben und vllt. noch ein eigenes Logo einbinden und das war es, warum solch einen Aufwand für ein Video mit Browserweiche etc? Tipp, den Film in 720p abspeichern, diese Auflösung wird von allen aktuellen Smartphones unterstützt und dürfte je nach Länge auch nicht zu viel Datenmenge beanspruchen. Je nachdem wo die Location ist, sollte man prüfen ob dort überhaupt für alle Teilnehmer Empfang möglich ist. Auf dem Mac ist diese Auflösung auch mehr als ausreichend.
Mit Handbrake Kannst du das Video auch noch weiter in der Größe optimieren.
PS: Auf dem Mac den QR Code zu scannen, da würde ich eher einen URL Shortener einsetzen und mit auf den Barcode drucken. Kann auch hilfreich sein bei Smartphones die keinen QR Code Reader native installiert haben, z.B. ältere Android Versionen.

„Der Computer soll die Arbeit des Menschen erleichtern, nicht umgekehrt !“

Schens10.06.2416:30

Wenn es simpler sein darf:

Vimeo oder Loom mit einem kostenlosen Account. Videos aufnehmen. Der Link führt direkt zum Player.
Bei Loom.com kannst Du kostenlos bis zu 25 Videos bis zu 5min Länge ablegen und per Direktlink aufrufen lassen.

Loom: https://www.loom.com/pricing

-3

mactie10.06.2417:27

Build a website with Notion in seconds, no coding required

rmayergfx10.06.2417:37

@Schens,@mactie
Habt ihr das Eingangsposting überhaupt gelesen?

macs®us

..Ich möchte die einzelnen Webseiten auf meiner Webseite hosten und nicht auf YouTube etc.
...
Was könnt ihr empfehlen?

„Der Computer soll die Arbeit des Menschen erleichtern, nicht umgekehrt !“

sudoRinger10.06.2417:42

rmayergfx

@Schens,@mactie
Habt ihr das Eingangsposting überhaupt gelesen?

macs®us

..Ich möchte die einzelnen Webseiten auf meiner Webseite hosten und nicht auf YouTube etc.
...
Was könnt ihr empfehlen?

Es ist aber nicht klar, ob "meine Webseite" heißt, dass die Website selbst gehostet ist und dort auch die Videos gespeichert sein sollen oder ob die Videos nur als Subdomain der bestehenden Website mit eigenem Logo laufen sollen, aber auch woanders gespeichert sein dürfen. Letzteres ist mit Notion einfach möglich.

Schens10.06.2420:55

rmayergfx

@Schens,@mactie
Habt ihr das Eingangsposting überhaupt gelesen?

macs®us

..Ich möchte die einzelnen Webseiten auf meiner Webseite hosten und nicht auf YouTube etc.

Und? Loom ist "meine Website", Vimeo ebenso. Kein Zugriff von außen, außer mit dem Private Link. Nur, dass alles andere vollautomatisch passiert. Richtige Auslösung und Bitrate für die Verbindung.

Oder anders: Der Fokus kann auf den Inhalten liegen und nicht auf das coden der Website.

Und bei allem gegebenen Respekt: Nach Deiner Empfehlung mit dem Barcode statt QR-Code habe ich erwartet, dass Du konsequenterweise auch eine Rufnummer für den Faxabruf empfiehlst....

-1

rmayergfx12.06.2413:26

Schens

Und bei allem gegebenen Respekt: Nach Deiner Empfehlung mit dem Barcode statt QR-Code habe ich erwartet, dass Du konsequenterweise auch eine Rufnummer für den Faxabruf empfiehlst....

Das mit dem Barcode im unteren Textabschintt ist ein Tippfehler, ich meinte natürlich den QR Code! Das erkennt man aber auch wenn man den ganzen Beitrag liest. Zudem habe ich habe auf die Seite von qrcode monkey verlinkt, der erstellt QR Codes schnell und einfach mit etlichen frei wählbaren Optionen.

Respekt sieht anders aus, was soll der Quatsch mit dem Faxabruf?

„Der Computer soll die Arbeit des Menschen erleichtern, nicht umgekehrt !“

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.

Aufpreise, Vergleich zu M3 und Spezifikationen:...

Apple TV+: Strategiewechsel?

Gescheitert: iPhones von Robotern statt Arbeite...

Kurz: 5G-Netze noch mit sehr wenigen Nutzern ++...

Apple Event

Qualitätsprobleme bei MacBook-Displays: Apple t...

iOS 18: RCS auf dem iPhone nutzen – Kompatibili...

Kopfhörer für Workout