HTML5 - Video - Versionsgeschichte

109.193.152.88 am 6. August 2024 um 11:05 Uhr

2024-08-06T11:05:34Z

134.3.84.225 am 26. August 2022 um 07:05 Uhr

2022-08-26T07:05:59Z

134.3.84.225: /* Probleme beheben */

2022-08-26T06:48:24Z

Probleme beheben

109.192.169.230: /* Hide Controls */

2021-03-15T13:22:10Z

Hide Controls

109.192.169.230 am 15. März 2021 um 13:21 Uhr

2021-03-15T13:21:40Z

109.192.169.230: /* Probleme beheben */

2021-03-15T08:28:18Z

Probleme beheben

84.136.97.191 am 14. März 2021 um 11:36 Uhr

2021-03-14T11:36:18Z

84.136.97.191: /* Probleme beheben */

2021-03-14T11:18:54Z

Probleme beheben

84.136.97.191 am 14. März 2021 um 11:17 Uhr

2021-03-14T11:17:52Z

37.49.72.8 am 9. September 2020 um 12:40 Uhr

2020-09-09T12:40:57Z

← Nächstältere Version		Version vom 6. August 2024, 11:05 Uhr
Zeile 72:		Zeile 72:
	- evtl. spielen noch andere Faktoren wie umgebende Divs etc. eine Rolle.		- evtl. spielen noch andere Faktoren wie umgebende Divs etc. eine Rolle.
	==== Workarounds ====		==== Workarounds ====
		+
		+	== 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.
		+
		+	<syntaxhighlight lang="sh">
		+	ffmpeg -i input.mp4 -codec: copy -start_number 0 -hls_time 10 -hls_list_size 0 -f hls index.m3u8
		+	</syntaxhighlight>
		+
		+	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
		+	<syntaxhighlight lang="apache">
		+
		+	<IfModule mod_mime.c>
		+	AddType application/vnd.apple.mpegurl .m3u8
		+	AddType video/mp2t .ts
		+	</IfModule>
		+	</syntaxhighlight>
		+
		+	Alternativ können Sie die Hauptkonfigurationsdatei von Apache (z.B. httpd.conf oder eine spezifische virtuelle Host-Datei) bearbeiten:
		+
		+	<syntaxhighlight lang="apache">
		+	<IfModule mod_mime.c>
		+	AddType application/vnd.apple.mpegurl .m3u8
		+	AddType video/mp2t .ts
		+	</IfModule>
		+	</syntaxhighlight>
		+	Starten Sie Apache neu, damit die Änderungen wirksam werden:
		+
		+	<syntaxhighlight lang="sh">
		+	sudo systemctl restart apache2
		+	</syntaxhighlight>
		+
		+	=== Schritt 4: HTML Seite erstellen ===
		+
		+	Achte darauf dass deine Videodateien im passenden Ordner liegen.
		+	<syntaxhighlight lang="html5">
		+	<!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>
		+	</syntaxhighlight>

@@ Zeile 1: / Zeile 1: @@
 == Links ==
   https://www.html5rocks.com/de/tutorials/video/basics//
 == Custom Controls ==

@@ Zeile 50: / Zeile 50: @@
 ==== Safari Play Button funktioniert nicht ====
 ==== Ton-Probleme ====
-Autoplay spielt Ton in einigen Browsern nur mit Usererlaubnis (nicht dafault). Also entweder autoplay ohne Ton oder manuell starten. Auch die Interaktion über einen custom event wird teilweise (z.B. Safari) als autoplay interpretiert.
+Autoplay spielt Ton in einigen Browsern nur mit Usererlaubnis (nicht default). Also entweder autoplay ohne Ton oder manuell starten.
@@ Zeile 61: / Zeile 63: @@
 AddType video/webm .webm
 </pre>

@@ Zeile 27: / Zeile 27: @@
 /* 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 -->
@@ Zeile 43: / Zeile 38: @@
 </video>
 </pre>
 == Helfer ==
   fitvids.js von Chris Coyer responsive videos für YouTube etc. (braucht man heute evtl. nicht mehr)

@@ Zeile 1: / Zeile 1: @@
 == Links ==
   https://www.html5rocks.com/de/tutorials/video/basics//
 == Helfer ==
   fitvids.js von Chris Coyer responsive videos für YouTube etc. (braucht man heute evtl. nicht mehr)
@@ Zeile 8: / Zeile 50: @@
 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
 ==== Safari Play Button funktioniert nicht ====
 ==== Ton-Probleme ====

← Nächstältere Version		Version vom 14. März 2021, 11:18 Uhr
Zeile 8:		Zeile 8:
	=== Ton-Probleme ===		=== Ton-Probleme ===
	Autoplay spielt Ton in einigen Browsern nur mit Usererlaubnis (nicht dafault)		Autoplay spielt Ton in einigen Browsern nur mit Usererlaubnis (nicht dafault)
		+	=== Server liefert nicht den richtigen Mime Type ===
		+
		+	"httpd.conf" genügt es, diese Zeilen hinzuzufügen:
		+	<pre>
		+	AddType video/ogg .ogv
		+	AddType video/mp4 .mp4
		+	AddType video/webm .webm
		+	</pre>