HTML5 - Video

Links

https://www.html5rocks.com/de/tutorials/video/basics//
HTML5 - Video Snippets

Custom Controls

Hide Controls

//For Firefox we have to handle it in JavaScript 
var vids = $("video"); 
$.each(vids, function(){
       this.controls = false; 
}); 
//Loop though all Video tags and set Controls as false

$("video").click(function() {
  //console.log(this); 
  if (this.paused) {
    this.play();
  } else {
    this.pause();
  }
});

video::-webkit-media-controls {
  display: none;
}

/* Could Use thise as well for Individual Controls */
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-volume-slider {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<!-- Hiding HTML5 Video Controls using CSS Pseudo selectors -->

<video width="800" autoplay controls="false">
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>

Helfer

fitvids.js von Chris Coyer responsive videos für YouTube etc. (braucht man heute evtl. nicht mehr)

Probleme beheben

Autoplay Policy

Oft hängen Probleme mit Sicherheitsfeatures bei den Browsern zusammen. Z.B. spielen Safari und Firefox nicht den Ton mit Autoplay ab.

https://stackoverflow.com/questions/50279454/video-autoplay-doesnt-work-without-hard-refresh

Klick oder mousedown events funktionieren - man kann bei der ersten Userinteraktion über mousedown das Video starten und sofort wieder pausieren. Danach läßt sich der Player auch mit anderen events interaktiv steuern. Evtl. funktioniert das auch wenn zuvor ein anderes Element gesteuert wurde.

Ton-Probleme

Autoplay spielt Ton in einigen Browsern nur mit Usererlaubnis (nicht default). Also entweder autoplay ohne Ton oder manuell starten.

Auch die Interaktion über einen custom event wird teilweise (z.B. Safari) als autoplay interpretiert.

Server liefert nicht den richtigen Mime Type

"httpd.conf" genügt es, diese Zeilen hinzuzufügen:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Safari mobile & Background Video

Apple ändert immer wieder die Autoplay Policy. Autoplay funktioniert Stand 2022 nur wenn - autoplay und playsinline Attribute aktiv - kein LowPower Mode (evtl. funktionieren Videos unter 3MB -> Testen) - Videogröße kann eine Rolle spielen (s.o.) - evtl. spielen noch andere Faktoren wie umgebende Divs etc. eine Rolle.

Streaming Video

Der Apache Server erlaubt gestreamte HLS Videos. Damit ist es deutlich schwerer Videos zu kopieren. Auf all-inkl. Servern funktioniert das recht einfach:

Schritt 1: Video in HLS umwandeln

Verwenden Sie ffmpeg, um ein Video in das HLS-Format zu konvertieren. Wenn Sie ffmpeg noch nicht installiert haben, können Sie es unter ffmpeg.org herunterladen und installieren.

ffmpeg -i input.mp4 -codec: copy -start_number 0 -hls_time 10 -hls_list_size 0 -f hls index.m3u8

Dieser Befehl erstellt mehrere .ts-Dateien und eine index.m3u8-Datei.

Schritt 2

Schritt 2: Dateien auf den Server hochladen

Laden Sie die erzeugten HLS-Dateien (index.m3u8 und .ts-Dateien) auf Ihren Apache-Server in ein öffentlich zugängliches Verzeichnis, z.B. /var/www/html/hls/.

Schritt 3: Apache konfigurieren

Stellen Sie sicher, dass Ihr Apache-Server die richtigen MIME-Typen für HLS-Dateien verwendet. Bearbeiten Sie entweder die .htaccess-Datei im HLS-Verzeichnis oder die Apache-Konfigurationsdatei. .htaccess im HLS-Verzeichnis:

.htaccess

<IfModule mod_mime.c>
    AddType application/vnd.apple.mpegurl .m3u8
    AddType video/mp2t .ts
</IfModule>

Alternativ können Sie die Hauptkonfigurationsdatei von Apache (z.B. httpd.conf oder eine spezifische virtuelle Host-Datei) bearbeiten:

<IfModule mod_mime.c>
    AddType application/vnd.apple.mpegurl .m3u8
    AddType video/mp2t .ts
</IfModule>

Starten Sie Apache neu, damit die Änderungen wirksam werden:

sudo systemctl restart apache2

Schritt 4: HTML Seite erstellen

Achte darauf dass deine Videodateien im passenden Ordner liegen.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DEKRA Motoradtreffen 2024</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .video-container {
            width: 100%;
            max-width: 800px; /* maximale Breite des Videos */
            aspect-ratio: 16 / 9; /* Verhältnis 16:9 für das Video */
            background-color: #000; /* Hintergrundfarbe falls Video nicht geladen wird */
        }
        video {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body>
    <div class="video-container">
        <video id="video" controls>
            <source src="./stream/index.m3u8" type="application/x-mpegURL">
            Ihr Browser unterstützt den Videotag nicht.
        </video>
    </div>
    <script>
        const video = document.getElementById('video');

        if (Hls.isSupported()) {
            const hls = new Hls();
            hls.loadSource('index.m3u8');
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, function() {
                video.play();
            });
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            video.src = 'index.m3u8';
            video.addEventListener('loadedmetadata', function() {
                video.play();
            });
        }
    </script>
    
</body>
</html>

</syntaxhighlight>