Memutar File m3u8 dengan Tag Video HTML

Question

Lebih

Sumber Tidak AMP-versi Sunting

Memutar File m3u8 dengan Tag Video HTML

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.

Majid

Pertanyaan edit 20 Februari 2017 в 7:36

Pemrograman

streaming html http-live-streaming html5-video m3u8

5 November 2013 в 5:22

41 tayangan

ben.bourdin · Answer 1 · 2014-04-22T16:50:58+00:00

ben.bourdin

Sumber Tidak AMP-versi Sunting

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.

<amp-video width="352" height="198" controls>

</amp-video>

37

0

Komentar (2)

Rakyesh Kadadas · Answer 2 · 2017-01-03T09:53:35+00:00

Rakyesh Kadadas

Sumber Tidak AMP-versi Sunting



    <amp-video width="600" height="400" controls>

    </amp-video>

Streaming file HLS atau m3u8 menggunakan kode di atas. ini berfungsi untuk desktop: ms edge browser (tidak bekerja dengan chrome desktop) dan seluler: chrome, browser opera mini .

Untuk bermain di semua browser gunakan pemutar media berbasis flash. pemutar media untuk mendukung semua browser

Rakyesh Kadadas

Jawaban edit 11 Juni 2019 в 4:21

6

0

Komentar (2)

MaxTomasello · Answer 3 · 2016-08-11T14:19:25+00:00

Menambahkan jawaban ben.bourdin, Anda dapat setidaknya dalam aplikasi berbasis HTML, memeriksa apakah browser mendukung HLS dalam elemen videonya:

Mari kita asumsikan bahwa ID elemen video Anda adalah "myVideo", kemudian melalui javascript Anda dapat menggunakan fungsi "canPlayType" (http://www.w3schools.com/tags/av_met_canplaytype.asp)

var videoElement = document.getElementById("myVideo");
if(videoElement.canPlayType('application/vnd.apple.mpegurl') === "probably" || videoElement.canPlayType('application/vnd.apple.mpegurl') === "maybe"){
    //Actions like playing the .m3u8 content
}
else{
    //Actions like playing another video type
}

Fungsi canPlayType, mengembalikan:

"" ketika tidak ada dukungan untuk jenis audio/video yang ditentukan

"maybe" ketika browser mungkin mendukung jenis audio/video yang ditentukan

"probably" ketika browser kemungkinan besar mendukung jenis audio/video yang ditentukan (Anda dapat menggunakan nilai ini saja dalam validasi untuk lebih yakin bahwa browser Anda mendukung jenis yang ditentukan)

Semoga ini membantu :)

Salam hangat!