Saya mencoba menggunakan HTTP Live Streaming (HLS) untuk melakukan streaming video ke komputer dan iPhone saya. Setelah membaca Apple 'HTTP Live Streaming Overview' serta 'Best Practices for Creating and Deploying HTTP Live Streaming Media for the iPhone and iPad', saya sedikit bingung.
Saya mengambil file sumber saya (sebuah mkv) dan menggunakan ffmpeg untuk meng-encode file dengan format MPEG-TS dan pengaturan yang direkomendasikan Apple dan profil 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"
Jangan khawatir. Saya menggunakan alat segmentasi yang telah dikompilasi sebelumnya untuk menyegmentasikan video dan membuat daftar putar .m3u8. File yang dihasilkan tampak seperti ini:
#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
Saya memeriksanya terhadap beberapa Contoh File Daftar Putar untuk digunakan dengan HTTP Live Streaming, dan saya tidak melihat adanya masalah. Saya juga mencoba memainkan file .m3u8 di VLC, dan berfungsi dengan baik.
Saya membuat halaman HTML untuk memutar file:
<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>
Dan halaman ini tidak berfungsi di Chrome, Safari, di iPhone saya. Contoh tag video html5 di w3schools berfungsi dengan baik di komputer saya, dan ikhtisar resmi Apple yang disebutkan di atas memberikan contoh HTML yang sangat mirip dengan halaman saya. Namun demikian, pemutar video saya sama sekali tidak responsif ketika saya mengunjungi halaman .m3u8 saya sendiri.
Mungkin sedikit terlambat dengan jawabannya, tetapi Anda perlu menyediakan atribut tipe MIME dalam tag video: type="application/x-mpegURL". Tag video yang saya gunakan untuk streaming 16:9 terlihat seperti ini.
<video width="352" height="198" controls>
<source src="playlist.m3u8" type="application/x-mpegURL">
</video>
<html>
<body>
<video width="600" height="400" controls>
<source src="index.m3u8" type="application/x-mpegURL">
</video>
</body>