Odtwarzanie plików m3u8 z tagiem HTML Video

Question

Nov 05, 2013, 06:22 AM

http-live-streaming m3u8 streaming html5-video html

Odtwarzanie plików m3u8 z tagiem HTML Video

Próbuję użyć HTTP Live Streaming (HLS) do przesyłania strumieniowego wideo do moich komputerów i mojego iPhone'a. Po przeczytaniu przez Apple „HTTP Live Streaming Overview” oraz „Najlepszych praktyk dotyczących tworzenia i wdrażania HTTP Live Streaming Media dla iPhone'a i iPada” jestem trochę utknięty.

Wziąłem plik źródłowy (mkv) i użyłem ffmpeg do zakodowania pliku w formacie MPEG-TS i ustawieniach zalecanych przez Apple oraz profilu Baseline 3.0:

ffmpeg -i "example.mkv" -f mpegts -threads:v 4 -sws_flags bicubic -vf "scale=640:352,setdar=16/9,ass=sub.ass" -codec:v libx264 -r 29.970 -b:v 1200k -profile:v baseline -level:v 3.0 -movflags faststart -coder 1 -flags +loop -cmp chroma -partitions +parti8x8+parti4x4+partp8x8+partb8x8 -me_method hex -subq 6 -me_range 16 -g 239 -keyint_min 25 -sc_threshold 40 -i_qfactor 0.71 -b_strategy 1 -qcomp 0.6 -qmin 10 -qmax 51 -qdiff 4 -direct-pred 1 -fast-pskip 1 -af "aresample=48000" -codec:a libvo_aacenc -b:a 96k -ac 2  -y "output.ts"

Nie martw się. Użyłemwstępnie skompilowane narzędzie do segmentowania aby podzielić wideo i utworzyć listę odtwarzania .m3u8. Wynikowy plik wyglądał tak:

#EXTM3U
#EXT-X-TARGETDURATION:10
#EXTINF:10,
http://localhost/media/stream/stream-1.ts
#EXTINF:10,
http://localhost/media/stream/stream-2.ts
#EXTINF:10,
http://localhost/media/stream/stream-3.ts
#EXT-X-ENDLIST

Sprawdziłem to przeciwko niektórymPrzykładowe pliki listy odtwarzania do użytku z transmisją strumieniową HTTP na żywoi nie widzę żadnych problemów. Próbowałem też odtwarzać plik .m3u8 w VLC i działa to jak urok.

Stworzyłem stronę HTML, aby odtworzyć plik:

<html lang="en">
    <head>
        <meta charset=utf-8/>
    </head>
    <body>
        <div id='player'>
            <video width="352" height="288" src="stream.m3u8" controls autoplay>
            </video>
        </div>
    </body>
</html>

Ta strona nie działa w Chrome, Safari na moim iPhonie. Przykłady tagów wideo HTML5 na szkoleniach w3 działają dobrze na moim komputerze, a oficjalny przegląd Apple wspomniany powyżej daje przykład HTML bardzo podobny do mojej strony. Niemniej jednak mój odtwarzacz wideo nie reaguje całkowicie, gdy odwiedzam własną stronę .m3u8.