Memutar File m3u8 dengan Tag Video HTML

Question

Lebih

Question

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

Google Code Archive - Long-term storage for Google Code Project Hosting.

html

m3u8

Related communities 4

HTML dan CSS Indonesia

4 118 pengguna

Silahkan bertanya terkait mengenai HTML maupun CSS. Membaca, menulis, berbagi. Baca dahulu pesan tersemat di pinned post.

Buka telegram

Pemrograman Web Indonesia (HTML CSS Javascript PHP MySQL)

306 pengguna

Official Website : www.pemweb.id Belajar Pemrograman Web (HTML CSS Javascript PHP MySQL) Grup Belajar Pemrograman Web. HTML + PHP + Javascript + MySQL DB Semoga menjadi forum belajar, menambah wawasan, peningkatan mutu personal kita semua.

109 pengguna

59 pengguna

~ Menerima Jasa Pembuatan Website untuk : Tugas & Instansi 💻 ~ Forum Diskusi Belajar Bersama ✅ ~ Promosi Jasa Minimal 1x Sehari ✅ ~ Dilarang Berbicara Kotor 🚫 ^ Other Grup : Whatsapp Group : Chat Admin untuk masuk ke Grup Whatsapp ^^

Buka telegram

Tambahkan pertanyaan

Kategori

Semua

Teknologi

Budaya / Rekreasi

Kehidupan / Seni

Ilmu Pengetahuan

Profesional

Bisnis

Pengguna

Semua

Baru

Populer

1

Галина Утяшова

Terdaftar 20 jam yang lalu

2

Asilbek Qadamboyev

Terdaftar 4 hari yang lalu

3

Akshit Mehta

Terdaftar 6 hari yang lalu

4

me you

Terdaftar 1 minggu yang lalu

5

Никита иванов

Terdaftar 1 minggu yang lalu

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

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>

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

<html>
<body>
    <video width="600" height="400" controls>
        <source src="index.m3u8" type="application/x-mpegURL">
    </video>
</body>

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

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!