HTML5 Video Probleme

  • HTML

Es gibt 12 Antworten in diesem Thema. Der letzte Beitrag () ist von Facebamm.

    HTML5 Video Probleme

    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?
    Cloud Computer? Nein Danke! Das ist nur ein weiterer Schritt zur totalen Überwachung.
    „Wer die Freiheit aufgibt, um Sicherheit zu gewinnen, wird am Ende beides verlieren.“
    Benjamin Franklin
    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

    1. <?php
    2. $mime = "video/mp4";
    3. $chunkSize = 1024 * 1024 * 50;
    4. $file = "";
    5. $size = filesize($file);
    6. $handle = fopen($file, 'rb');
    7. if(isset($_SERVER['HTTP_RANGE'])){
    8. $ranges = array_map('intval', explode('-', substr($_SERVER['HTTP_RANGE'], 6)));
    9. if(!$ranges[1]){
    10. $ranges[1] = $size - 1;
    11. }
    12. header('Content-type: ' . $mime);
    13. header('HTTP/1.1 206 Partial Content');
    14. header('Accept-Ranges: bytes');
    15. header('Content-Length: ' . ($ranges[1] - $ranges[0]));
    16. header(sprintf('Content-Range: bytes %d-%d/%d', $ranges[0], $ranges[1], $size));
    17. fseek($handle, $ranges[0]);
    18. while(true){
    19. if(ftell($handle) >= $ranges[1]){
    20. break;
    21. }
    22. echo fread($handle, $chunkSize);
    23. ob_flush();
    24. flush();
    25. }
    26. fclose($handle):
    27. }
    28. else {
    29. header('Content-type: ' . $mime);
    30. header('Content-Length: ' . $size);
    31. while(true){
    32. if(ftell($handle) >= $size){
    33. break;
    34. }
    35. echo fread($handle, $chunkSize);
    36. ob_flush();
    37. flush();
    38. }
    39. fclose($handle):
    40. }

    Cloud Computer? Nein Danke! Das ist nur ein weiterer Schritt zur totalen Überwachung.
    „Wer die Freiheit aufgibt, um Sicherheit zu gewinnen, wird am Ende beides verlieren.“
    Benjamin Franklin

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „NoIde“ ()

    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.
    Cloud Computer? Nein Danke! Das ist nur ein weiterer Schritt zur totalen Überwachung.
    „Wer die Freiheit aufgibt, um Sicherheit zu gewinnen, wird am Ende beides verlieren.“
    Benjamin Franklin

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „NoIde“ ()

    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.
    Cloud Computer? Nein Danke! Das ist nur ein weiterer Schritt zur totalen Überwachung.
    „Wer die Freiheit aufgibt, um Sicherheit zu gewinnen, wird am Ende beides verlieren.“
    Benjamin Franklin
    Also das klappt ganz vorzüglich.
    Mit dem Aufruf des PHP-Scriptes

    Quellcode

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


    PHP-Quellcode

    1. <?php
    2. $out='<!DOCTYPE html>
    3. <html>
    4. <head>
    5. <meta charset="UTF-8">
    6. <title></title>
    7. </head>
    8. <body>';
    9. $out.='<div style="width:480px; height:360px; display:block; margin:auto;">';
    10. $out.='<video src="01 - Stormbringer.mp4" autoplay controls></video>';
    11. $out.='</div>';
    12. $out.='</body></html>';
    13. echo$out;
    14. ?>


    wird das Video angezeigt und kann abgespielt werden.



    Rufe ich dagegen die Videodatei direkt auf mit

    Quellcode

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

    gibt es diese Meldung:
    Bilder
    • forbidden.jpg

      21,57 kB, 493×138, 424 mal angesehen
    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

    1. <!doctype html>
    2. <html lang="de">
    3. <head>
    4. <meta charset="utf-8">
    5. <title>Ein Video</title>
    6. </head>
    7. <body>
    8. <video width="1024" height="576" controls>
    9. <source src="vido.php" type="video/mp4">
    10. </video>
    11. </body>
    12. </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.
    Bilder
    • Unbenannt.jpg

      118,36 kB, 1.610×852, 219 mal angesehen
    Cloud Computer? Nein Danke! Das ist nur ein weiterer Schritt zur totalen Überwachung.
    „Wer die Freiheit aufgibt, um Sicherheit zu gewinnen, wird am Ende beides verlieren.“
    Benjamin Franklin

    Dieser Beitrag wurde bereits 5 mal editiert, zuletzt von „NoIde“ ()

    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?
    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

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

    Nach einigen Recherchen müsste es aber wohl

    Quellcode

    1. ($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

    1. ERR_CONTENT_LENGTH_MISMATCH

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

    Quellcode

    1. $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

    1. $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.

    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

    1. ffprobe version N-80011-gaf3e944 Copyright (c) 2007-2016 the FFmpeg developers
    2. built with gcc 5.3.0 (GCC)
    3. 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
    4. libavutil 55. 24.100 / 55. 24.100
    5. libavcodec 57. 42.100 / 57. 42.100
    6. libavformat 57. 36.100 / 57. 36.100
    7. libavdevice 57. 0.101 / 57. 0.101
    8. libavfilter 6. 45.100 / 6. 45.100
    9. libswscale 4. 1.100 / 4. 1.100
    10. libswresample 2. 0.101 / 2. 0.101
    11. libpostproc 54. 0.100 / 54. 0.100
    12. Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'http://localhost/vido.php':
    13. Metadata:
    14. major_brand : isom
    15. minor_version : 512
    16. compatible_brands: isomiso2avc1mp41
    17. title : Bad_Boys_-_Harte_Jungs_1995
    18. encoder : Lavf57.36.100
    19. Duration: 00:01:00.02, start: 0.000000, bitrate: 4034 kb/s
    20. Chapter #0:0: start 0.000000, end 60.000000
    21. Metadata:
    22. title : 00:00:00.000
    23. 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)
    24. Metadata:
    25. handler_name : VideoHandler
    26. Stream #0:1(ger): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 129 kb/s (default)
    27. Metadata:
    28. handler_name : SoundHandler
    29. Stream #0:2(eng): Subtitle: mov_text (text / 0x74786574), 0 kb/s
    30. Metadata:
    31. 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

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


    wegen der chunksize, schau ich mir morgen noch mal an.
    Cloud Computer? Nein Danke! Das ist nur ein weiterer Schritt zur totalen Überwachung.
    „Wer die Freiheit aufgibt, um Sicherheit zu gewinnen, wird am Ende beides verlieren.“
    Benjamin Franklin