Media Handler

Der Media Handler bündelt verschiedene Funktionen zur Verarbeitung und Optimierung von Medieninhalten innerhalb der Anwendung. Neben der Erkennung browserseitiger Medienfähigkeiten stellt das Modul Werkzeuge für die Verarbeitung von Bildern und Videos bereit, ohne zusätzliche Bibliotheken oder externe Abhängigkeiten vorauszusetzen. Ziel des Moduls ist es, typische Aufgaben rund um Medien zentral bereitzustellen und gleichzeitig eine möglichst hohe Kompatibilität zwischen unterschiedlichen Browsern und Endgeräten zu gewährleisten.

Alle Funktionen arbeiten vollständig auf Basis nativer Browser-APIs und können sowohl in klassischen Websites als auch in komplexen Single-Page-Anwendungen, Dashboards, CMS-Systemen oder medienintensiven Projekten eingesetzt werden. Der Media Handler versteht sich dabei nicht als vollständige Multimedia-Lösung, sondern als Sammlung häufig benötigter Werkzeuge, die direkt in die Kryzo Engine integriert sind und ohne zusätzliche Implementierungsaufwände genutzt werden können.

Initialisierung

document.addEventListener('kryzo:ready', async ({ detail: { MEDIA } }) => {
    /* Ab hier stellen alle MEDIA Funktionen zur Verfügung */
});

Browser-Medienunterstützung abfragen

/*
    ...    
*/
/* Alles abrufen */
const INFO = MEDIA.info();
console.log(INFO);

/* 
    Bereich abrufen:  
    - img, audio, video, webgl, codec, stream, capture, display
*/
MEDIA.info(area);

Beispiel Media Infos

Noch kein Abruf erfolgt ...

Bilder

Blur-Up / Progressive Loading

Schnelle Ladezeiten tragen maßgeblich zur Benutzererfahrung bei. Progressive Image Loading ermöglicht die Anzeige von Vorschaubildern bereits während des Ladevorgangs, bevor die finale Bildversion vollständig geladen wurde. Dadurch werden Layout-Sprünge reduziert und die Anwendung wirkt deutlich reaktionsschneller.

Beispiel Einsatzmöglichkeiten:

Lazyload Bilder ohne LayoutShifts
Mobile Anwendungen und langsame Netzwerkverbindungen
Dynamisch nachgeladene Inhalte via AJAX oder Fetch API
Medienintensive Dashboards und Reporting-Systeme

HTML Einbindung

Javascript Image Progressive Loader

/* HTML NodeList aller zu verarbeitenden Bilder */
/* Via Selektor und Klassen kann die Auswahl begrenzt werden */
const progressiveImages = document.querySelector('img');

/* Progressives Laden starten */
MEDIA.progressiveLoader(progressiveImages);

Demo

Vorschaubild: ~8 Kbyte

Wasserzeichen

Die Wasserzeichen-Funktion ermöglicht das nachträgliche Einbetten von Text- oder Bildwasserzeichen direkt im Browser. Die Verarbeitung erfolgt vollständig clientseitig und erzeugt aus dem Originalbild eine neue Bildquelle, die anschließend unmittelbar weiterverwendet oder angezeigt werden kann. Dabei können sowohl einfache Copyright-Hinweise als auch Logos, Markenkennzeichnungen oder projektspezifische Overlays auf bestehende Bilder angewendet werden. Positionierung, Transparenz, Skalierung, Rotation und weitere Darstellungsoptionen lassen sich flexibel konfigurieren.

Einsatzgebiete:

Bildergalerien und Medienarchive
Benutzer-Uploads
CMS- und Redaktionssysteme
Produkt- und Katalogbilder
Vorschaubilder und Thumbnails
Dynamisch generierte Bildinhalte
Download- und Preview-Systeme
Schutz von Bildmaterial vor ungewollter Weiterverwendung

Wasserzeichen aus Text

/* Zu 
    verwendendes Bild 
    Bei mehreren Bildern querySelectorAll und mit forEach durchlaufen
*/
const img = document.querySelector('img.watermark');

/* Watermark setzen */
const url = await MEDIA.addWatermark(img, {
    text:     '© 2026 Kryzo\nAll rights reserved',
    position: 'bottom-left',
    fontSize: 16,
    color:    'rgba(255, 255, 255, 0.8)',
    textAlign: 'left', 
    paddingX: 32,
    paddingY: 24,
    fontFamily: 'Roboto Condensed',
});

/* Bild ersetzen */
img.src = url;

Wasserzeichen aus Bild

/* Zu 
    verwendendes Bild 
    Bei mehreren Bildern querySelectorAll und mit forEach durchlaufen
*/
const img = document.querySelector('img.watermark');

/* Watermark setzen */
const url = await MEDIA.addWatermark(img, {
    image:      'logo.png',
    position:   'center',
    imageScale: 0.4,
    opacity:    0.25,
    rotation:   -30,
});

/* Bild ersetzen */
img.src = url;

Demo

Original

Mit Wasserzeichen

Video mit Blob Sources

Die Blob-Video-Funktion ermöglicht die Wiedergabe von Videodateien, die nicht direkt über eine öffentliche URL eingebunden werden sollen. Stattdessen wird das Video vom Server geladen und zur Laufzeit als Blob-Quelle für das Video-Element bereitgestellt.

Typische Einsatzszenarien sind:

Video Hintergründe
Geschützte Video-Inhalte
Mitglieder- und Kundenbereiche
E-Learning-Plattformen
Interne Unternehmensanwendungen
Dynamische Medienarchive
CMS- und Redaktionssysteme
Video-Bibliotheken mit Zugriffssteuerung
Individuelle Streaming- und Download-Konzepte

Dies eignet sich in erster Linie für kleinere bis mittelgroße Videodateien. Für eine optimale Benutzererfahrung wird empfohlen, diese Technik vorzugsweise bei Videos bis etwa 30 MB einzusetzen. Bei größeren Medieninhalten empfiehlt es sich daher, während des Ladeprozesses einen Loader oder ein Overlay anzuzeigen, um dem Benutzer einen aktiven Verarbeitungsstatus zu signalisieren. Alternativ sollten für sehr große Dateien klassische Streaming- oder Range-Request-Lösungen eingesetzt werden, da diese bereits während des Downloads mit der Wiedergabe beginnen können.

Übergabe Video als Blobs

/*
    Dies ist KEIN 100%iger Schutz! 
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    Es verhindert nur die Anzeige des original Videos in der Domstruktur
    und lässt das Video flüssig & ohne Unterbrechung ablaufen
*/
const video = document.querySelector('video');

await MEDIA.playVideoBlob(video, 'intro', {
    chunkSize: 3 * 1024 * 1024,   // 3MB
    endpoint:  '/video.php',
    onPlay:    ()         => console.log('playing'),
    onPause:   ()         => console.log('paused'),
    onEnded:   ()         => console.log('ended'),
    onBuffer:  (pos, total) => console.log(`gebuffert: ${pos}/${total} bytes`),
    onError:   (err)      => console.warn('Fehler:', err),
});

// Für iOS Geräte: <video&> das Attribut playsinline hinzufügen
// Sicherstellen, dass das Video ohne Benutzerinteraktion abläuft
// Ton wird daher vorher ausgeschaltet
video.muted = true;
video.play();

Beispiel: PHP Video Chunk

/* 
    Datei: ./video.php

    Videos nach Key aus JS Parameter festlegen
    oder dynamischen Abruf einbauen
*/
$videos = [ 'intro'   => './videos/demo.mp4', ];

// Prüfen ob Key existiert
$key = $_GET['key'] ?? '';
if (!isset($videos[$key])) { http_response_code(404); exit; }

// Url holen und prüfen ob existiert
$file = $videos[$key];
if (!file_exists($file)) { http_response_code(404); exit; }

// Video zurückgeben
$size = filesize($file);

header('Content-Type: video/mp4');
header('Content-Length: ' . $size);
header('Cache-Control: no-store');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Expose-Headers: Content-Length');

$fp = fopen($file, 'rb');
while (!feof($fp)) { echo fread($fp, 8192); flush(); }

fclose($fp);

Demo

Das Video beinhaltet keinen Ton.