HTML5 Video Probleme

NoIde · 4. Mai 2019, 10:39

Hi,

ich mache mir gerade eine Webseite, welche lokal auf meinem PC läuft, damit ich auch von unterwegs einfachen Zugriff auf meine Filme und Musik habe(mag keine Clouds). Nun ist die Seite soweit nutzbar(nicht fertig), im Firefox laufen alle Videos. Im Edge, Chrome und Opera laufen nicht alle, bekomme Meldungen wie: Dieser Dateityp wird nicht unterstützt im Edge, Chrome und Opera melden nichts.

Die Videos sind HTML5-Konform konvertiert(alles mp4 container), was können Ursachen sein das die nicht laufen?

NoIde · 5. Mai 2019, 07:55

Habe festgestellt, das da nur passiert, wenn ich die Dateien via PHP rausgebe. Gebe ich der Video.src den direkten Pfad, läufts bei allen Browsern. Ich habe den PHP-Teil, mal auf's wesendliche reduziert. Fehlt evtl. ein Header?

PHP-Quellcode

<?php
$mime = "video/mp4";
$chunkSize = 1024 * 1024 * 50;
$file = "";
$size = filesize($file);
$handle = fopen($file, 'rb');
if(isset($_SERVER['HTTP_RANGE'])){
$ranges = array_map('intval', explode('-', substr($_SERVER['HTTP_RANGE'], 6)));
if(!$ranges[1]){
$ranges[1] = $size - 1;
}
header('Content-type: ' . $mime);
header('HTTP/1.1 206 Partial Content');
header('Accept-Ranges: bytes');
header('Content-Length: ' . ($ranges[1] - $ranges[0]));
header(sprintf('Content-Range: bytes %d-%d/%d', $ranges[0], $ranges[1], $size));
fseek($handle, $ranges[0]);
while(true){
if(ftell($handle) >= $ranges[1]){
break;
}
echo fread($handle, $chunkSize);
ob_flush();
flush();
}
fclose($handle):
}
else {
header('Content-type: ' . $mime);
header('Content-Length: ' . $size);
while(true){
if(ftell($handle) >= $size){
break;
}
echo fread($handle, $chunkSize);
ob_flush();
flush();
}
fclose($handle):
}

StormBringer · 8. Mai 2019, 07:44

Ich verstehe nicht, warum du nicht einfach das video-Tag benutzt. Dort die Source angeben, ggfs. controls und/oder autoplay, dann sollte es eigentlich funktionieren.
Welcher Browser welche Formate unterstützt findet man z. B. hier.

NoIde · 8. Mai 2019, 08:51

Ich benutze ja das video-tag. als src gebe ich die Url des php-scriptes an, das mache ich um Downloads unterbinden zu können, wie auch den Datei-Direktzugriff(via htaccess). Es ist halt nur, das in Edge, Opera und Chrome dann manche Videos einfach nicht laufen. Gebe ich als src einen direktlink an, geht's in allen Browsern. es sind in den Logs auch keine Fehler zu finden. Im Firefox funktioniert das wunderbar.

Edit: @StormBringer
Beim audio-tag habe ich dieses problem nicht. Das klappt in allen Browsern.

StormBringer · 8. Mai 2019, 09:06

Wenn nur manche Videos nicht laufen wird's ja schwierig mit der Fehlersuche.

Den Direktzugriff könntest Du aber auch per .htaccess unterbinden (müsstest mal suchen; hab' das gerade nicht parat).

NoIde · 8. Mai 2019, 09:10

Das via htaccess ist ja der plan, so das die ausgabe nur durchs srcipt erfolgen kann. Mache ich das aber, kann das video-element nicht Direkt auf die Datei zugreifen, daher eine php die das dann rausgibt.

StormBringer · 8. Mai 2019, 09:21

Hm, das muss ich mal nachbauen. Meine lokale MP4-Filmbibliothek braucht diesen Schutz ja nicht und hab's deswegen auch noch nicht probiert.

StormBringer · 11. Mai 2019, 05:55

Also das klappt ganz vorzüglich.
Mit dem Aufruf des PHP-Scriptes

Quellcode

https://www.xxxxxxxxxx.de/stormbringer.php

PHP-Quellcode

<?php
$out='<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>';
$out.='<div style="width:480px; height:360px; display:block; margin:auto;">';
$out.='<video src="01 - Stormbringer.mp4" autoplay controls></video>';
$out.='</div>';
$out.='</body></html>';
echo$out;
?>

wird das Video angezeigt und kann abgespielt werden.

Rufe ich dagegen die Videodatei direkt auf mit

Quellcode

https://www.xxxxxxxxxx.de/01 - Stormbringer.mp4

gibt es diese Meldung:

NoIde · 11. Mai 2019, 06:30

OK hatte ich nicht erwartet, das das Video-Element trotzdem die Datei bekommt. Aber, ein Downloaden ist trotzdem einfach möglich, im Firefox habe ich das Addon Video Download Helper drin, der lädt das Video ohne Probleme runter. Das will ich allerdings verhindern, hast du da noch eine Idee das zu unterbinden? Ich wüsste nur die Ausgabe via PHP machen.(Falls du den Code aus Post 2 testen willst, habe gemerkt, das sich beim fclose : eingeschlichen haben, muss aber klar ; sein.)

HTML-Quellcode

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Ein Video</title>
</head>
<body>
<video width="1024" height="576" controls>
<source src="vido.php" type="video/mp4">
</video>
</body>
</html>

Auf dem Anhang zu sehen, das es im FF und EDGE geht, aber in Opera nicht, mit Opera und Chrome verhält es sich gleich. Wobei der EDGE auch nicht alle Videos abspielt, manche gehen, manche nicht. Nur wenn ich wie du, der Video-Source einen direkten link gebe, klappst überall.

slice · 11. Mai 2019, 09:48

Dann öffne die Web Konsole des Browsers und schau was dir dort als Fehler ausgegeben wird.
Ich tippe einfach mal auf einen nicht passenden Codec.

PS: Was sagt denn zb. ffprobe über die Medien?

StormBringer · 11. Mai 2019, 18:34

So, nach einigen Experimenten mal meine Erkenntnisse.
Fange ich mal mit der Nebensächlichkeit an:

in Tippfehler in video.html: Dort muss es "video.php" heissen statt "vido.php".

Dann eine weitere Kleinigkeit (?) :
Oben im geposteten Code in Zeile 15 berechnest Du die Content-Length mit

Quellcode

($ranges[1] - $ranges[0])

Nach einigen Recherchen müsste es aber wohl

Quellcode

($ranges[1] - $ranges[0] + 1)

sein. Ob das ernsthaft Probleme macht habe ich nicht weiter getestet.

Dann zum eigentlichen Problem, das auftrat:
Nachdem ich video.html und video.php (ergänzt um den Namen der aufzurufenden MP4-Datei) hochgeladen hatte, führten die Aufrufe beider Dateien nicht zur Anzeige des Videos.
Im Chrome wurde die Fehlermeldung

Quellcode

ERR_CONTENT_LENGTH_MISMATCH

ausgegeben.
Verursacht wird der Fehler durch die dritte Zeile im PHP-Script:

Quellcode

$chunkSize = 1024 * 1024 * 50

Da das aufzurufende Video deutlich kleiner als 50 MiB ist, wird dieser Fehler ausgegeben.
Ich habe dies geändert auf

Quellcode

$chunkSize = 1024 * 1024 * 1

Damit liess sich das Video sowohl über die video.php als auch über die video.html aufrufen und bis zum Ende fehlerfrei abspielen, sowohl im Chrome als auch im Edge.

Nun aber der Clou:
In beiden Browsern kann man mit Rechtsklick einfach eine Option zum Herunterladen des Videos auswählen. Und das funktioniert ebenfalls prächtig.

NoIde · 11. Mai 2019, 22:31

slice schrieb:

Was sagt denn zb. ffprobe über die Medien?

Bei manchen Videos hatte ich eine Meldung wegen einer nicht gesetzten timeline. Einfach nur mal die erste Minute convertiert, nun sieht die ffprobe Ausgabe so aus:

Spoiler anzeigen

Quellcode

built with gcc 5.3.0 (GCC)
configuration: --enable-gpl --enable-version3 --disable-w32threads --enable-avisynth --enable-bzlib --enable-fontconfig --enable-frei0r --enable-gnutls --enable-iconv --enable-libass --enable-libbluray --enable-libbs2b --enable-libcaca --enable-libfreetype --enable-libgme --enable-libgsm --enable-libilbc --enable-libmodplug --enable-libmfx --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-libopus --enable-librtmp --enable-libschroedinger --enable-libsnappy --enable-libsoxr --enable-libspeex --enable-libtheora --enable-libtwolame --enable-libvidstab --enable-libvo-amrwbenc --enable-libvorbis --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxavs --enable-libxvid --enable-libzimg --enable-lzma --enable-decklink --enable-zlib
libavutil 55. 24.100 / 55. 24.100
libavcodec 57. 42.100 / 57. 42.100
libavformat 57. 36.100 / 57. 36.100
libavdevice 57. 0.101 / 57. 0.101
libavfilter 6. 45.100 / 6. 45.100
libswscale 4. 1.100 / 4. 1.100
libswresample 2. 0.101 / 2. 0.101
libpostproc 54. 0.100 / 54. 0.100
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'http://localhost/vido.php':
Metadata:
major_brand : isom
minor_version : 512
compatible_brands: isomiso2avc1mp41
title : Bad_Boys_-_Harte_Jungs_1995
encoder : Lavf57.36.100
Duration: 00:01:00.02, start: 0.000000, bitrate: 4034 kb/s
Chapter #0:0: start 0.000000, end 60.000000
Metadata:
title : 00:00:00.000
Stream #0:0(ger): Video: h264 (High) (avc1 / 0x31637661), yuv420p, 1920x1080 [SAR 1:1 DAR 16:9], 3898 kb/s, 23.98 fps, 23.98 tbr, 24k tbn (default)
Metadata:
handler_name : VideoHandler
Stream #0:1(ger): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 129 kb/s (default)
Metadata:
handler_name : SoundHandler
Stream #0:2(eng): Subtitle: mov_text (text / 0x74786574), 0 kb/s
Metadata:
handler_name : SubtitleHandler

StormBringer schrieb:

In beiden Browsern kann man mit Rechtsklick einfach eine Option zum Herunterladen des Videos auswählen. Und das funktioniert ebenfalls prächtig.

Otto-Normal, bremst das hier dann aus:

JavaScript-Quellcode

document.addEventListener("contextmenu", function(e){e.preventDefault();}, false);

wegen der chunksize, schau ich mir morgen noch mal an.

Facebamm · 13. Mai 2019, 13:30

Das will ich allerdings verhindern, hast du da noch eine Idee das zu unterbinden? via Stream. Du implementierst es nicht direct in der Webseit.

HTML5 Video Probleme

HTML5 Video Probleme

PHP-Quellcode

Quellcode

PHP-Quellcode

Quellcode

HTML-Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

slice schrieb:

Quellcode

StormBringer schrieb:

JavaScript-Quellcode

Benutzer online 3

Tags

Ähnliche Themen

4 Benutzer haben hier geschrieben