Videos Mobile/Desktop austauschen

[Daktari]

Hallo,
mich würde interessieren wie ich auf dem Smartphone ein anderes Video (mit einer niedrigeren Auflösung) laden kann als auf dem Desktop. Mit (Hintergrund)Bildern geht das ja. Aber zu Videos habe ich dazu leider nichts gefunden, daher versuche ich es hier.
Ich würde natürlich gerne die Datenlast des Videos mit immer noch fast 5MB weiter reduzieren.
Gibt es denn dazu eine Möglichkeit? Ich habe nicht mal einen Ansatz gefunden.
Gruß
Stefan

[vt1816]

Dies ist möglich, indem du das User-Agent-Header-Feld verwendest, um das Gerät zu erkennen und basierend darauf das entsprechende Video-Tag generierst.

Hier ist ein Beispiel, wie du dies in PHP umsetzen könntest:

PHP-Code:

<?php
$userAgent = $_SERVER['HTTP_USER_AGENT'];

// Prüfe, ob es sich um ein Smartphone handelt
$isMobile = isMobileDevice($userAgent);

// Definiere die Pfade zu den Videos
$desktopVideoPath = 'pfad/zum/desktop/video.mp4';
$mobileVideoPath = 'pfad/zum/mobile/video.mp4';

// Wähle den entsprechenden Pfad basierend auf dem Gerät
$videoPath = $isMobile ? $mobileVideoPath : $desktopVideoPath;

// Generiere das Video-Tag mit dem ausgewählten Pfad
$videoTag = '<video src="' . $videoPath . '" controls></video>';

// Gib das Video-Tag aus
echo $videoTag;

// Funktion zur Überprüfung, ob es sich um ein Smartphone handelt
function isMobileDevice($userAgent) {
    $mobileDevices = array(
        '/iphone/i',
        '/ipod/i',
        '/ipad/i',
        '/android/i',
        '/blackberry/i',
        '/webos/i',
        '/iemobile/i',
        '/opera mini/i',
        '/windows phone/i'
    );

    foreach ($mobileDevices as $device) {
        if (preg_match($device, $userAgent)) {
            return true;
        }
    }

    return false;
}
?>

In diesem Beispiel wird das `HTTP_USER_AGENT`-Header-Feld verwendet, um zu überprüfen, ob es sich um ein Smartphone handelt. Dafür wird die Funktion `isMobileDevice()` verwendet, die anhand einer Liste von bekannten mobilen User-Agenten prüft, ob eines davon im aktuellen User-Agent enthalten ist.

Je nach Ergebnis wird dann der Pfad zum Video für das Smartphone oder den Desktop ausgewählt und in das Video-Tag eingebunden.

Du müsstest die Pfade zu deinen eigenen Videos anpassen und sicherstellen, dass die Videos tatsächlich auf dem Server verfügbar sind.

Bitte beachte, dass dies eine einfache Methode ist, um das Gerät zu erkennen, aber nicht 100% zuverlässig ist, da der User-Agent manipuliert werden kann. Es gibt weitere fortgeschrittenere Techniken, wie z.B. das Auswerten von Media Queries in JavaScript, um die Bildschirmgröße des Geräts zu bestimmen und dann dynamisch das entsprechende Video zu laden.

[Daktari]

Zuerst mal vielen Dank dafür!

Das sieht genau nach dem aus was ich seit langer Zeit suche! Ich werde aber noch ein paar Tage brauche bis ich es ausprobieren kann.
Aber wer sollte denn den User Agent manipulieren? Ich hab hier nur eine kleine Seite die nur ein paar Informationen präsentiert. Es gibt nicht mal ein Kontaktformular.

Ich melde mich wenn ich es getestet habe. Das mit den Media Queries werde ich mir mal anschauen. Aber vielleicht ist das dann auch schon zu hoch für mich.
Vielen Dank nochmal!