Reproduzindo arquivos m3u8 com tag de vídeo em HTML

Question

Nov 05, 2013, 06:22 AM

html5-video http-live-streaming html m3u8 streaming

Reproduzindo arquivos m3u8 com tag de vídeo em HTML

Eu estou tentando usar HTTP Live Streaming (HLS) para transmitir vídeo para meus computadores e meu iPhone. Depois de ler a "HTTP Live Streaming Overview" da Apple, bem como "Práticas recomendadas para criar e implantar o HTTP Live Streaming Media para iPhone e iPad", estou um pouco preso.

Eu peguei meu arquivo de origem (um mkv) e usei o ffmpeg para codificar o arquivo no formato MPEG-TS e as configurações recomendadas pela Apple e um perfil do 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"

Não se preocupe lá. Eu usei umferramenta de segmentação pré-compilada para segmentar o vídeo e criar uma lista de reprodução .m3u8. O arquivo resultante ficou assim:

#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

Eu verifiquei isso contra algunsExemplo de arquivos de lista de reprodução para uso com HTTP Live Streaminge não vejo problemas. Eu também tentei tocar o arquivo .m3u8 no VLC, e funciona como um encanto.

Eu criei uma página HTML para reproduzir o arquivo:

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

E esta página não funciona no Chrome, Safari, no meu iPhone. Os exemplos de tags de vídeo html5 em w3schools funcionam bem em meu computador, e a visão geral oficial da Apple mencionada acima fornece um exemplo de HTML muito semelhante à minha página. No entanto, meu player de vídeo não responde completamente quando visito minha própria página .m3u8.