WXInlinePlayer
1.3.6
Dengan maraknya siaran langsung dan video pendek, video telah menjadi metode yang sangat umum dalam menyampaikan informasi operasional/produk karena membawa lebih banyak informasi. Namun karena kepentingan berbagai produsen browser dalam negeri, mereka telah menerapkan banyak batasan pada kemampuan video HTML5, yang tidak terbatas pada:
Untuk pertanyaan spesifik, silakan lihat "Implementasi Penambangan Video Terminal Seluler dari Animasi Bingkai Kompleks" yang ditulis oleh tim IMWeb Tencent.
Untuk mengatasi masalah ini, kami mengimplementasikan WXInlinePlayer dengan soft decoding FLV. Teknologi pihak ketiga dan API platform yang digunakan adalah sebagai berikut:
Pada saat yang sama, kami juga menulis FLV Demuxer versi WebAssembly. Anda dapat menemukan kode yang relevan di lib/codec.
Uji kompatibilitas menggunakan model relevan yang disediakan oleh layanan BrowserStack, hanya untuk referensi:
https://eroszy.github.io/WXInlinePlayer/example/index.html
Pastikan Anda telah menginstall parcel/emscripten 1.38.45/cmake dan make, lalu jalankan perintah berikut:
npm install # 初始化工程
npm update # 更新工程有关的插件。如果网络错误，改用 cnpm update
bash build.shProduk akhir akan ada di folder contoh.
Harap dicatat:
- Harap buat di lingkungan *nix. Kompilasi OpenH264 di Windows tidak dijamin.
- Harap pastikan emscripten dalam versi 1.38.45, jika tidak, kesalahan wasm32 akan terjadi.
- versi cmake harus 3.16+
<!DOCTYPE html >
< html >
< head >
< meta charset =" UTF-8 " />
< title > WXInlinePlayer </ title >
< style >
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
</ style >
</ head >
< body >
< canvas id =" container " width =" 800 " height =" 450 " > </ canvas >
< script src =" ./index.js " > </ script >
< script >
if ( WXInlinePlayer . isSupport ( ) ) {
WXInlinePlayer . init ( {
asmUrl : './prod.baseline.asm.combine.js' ,
wasmUrl : './prod.baseline.wasm.combine.js'
} ) ;
WXInlinePlayer . ready ( ) . then ( ( ) => {
const player = new WXInlinePlayer ( {
url : 'https://static.petera.cn/mm.flv' ,
$container : document . getElementById ( 'container' ) ,
hasVideo : true ,
hasAudio : true ,
volume : 1.0 ,
muted : false ,
autoplay : true ,
loop : true ,
isLive : false ,
chunkSize : 128 * 1024 ,
preloadTime : 5e2 ,
bufferingTime : 1e3 ,
cacheSegmentCount : 64 ,
customLoader : null
} ) ;
const { userAgent } = navigator ;
const isWeChat = / MicroMessenger / i . test ( userAgent ) ;
if ( ! isWeChat ) {
alert ( 'click to play!' ) ;
document . body . addEventListener ( 'click' , ( ) => {
player . play ( ) ;
} ) ;
}
} ) ;
}
</ script >
</ body >
</ html >Di direktori root proyek, masukkan perintah untuk memulai server:
npm run serveKemudian masukkan URL untuk mengakses demo:
http://localhost:8888/example/index.html
Apakah lingkungan eksekusi saat ini mendukung WXInlinePlayer.
if ( WXInlinePlayer . isSupport ( ) ) {
console . log ( 'WXInlinePlayer support' ) ;
}Untuk menginisialisasi WXInlinePlayer, Anda harus memasukkan alamat spesifik perpustakaan decoding H264 yang dimuat. Untuk pemilihan perpustakaan decoding, silakan merujuk ke: Cara memilih dependensi decoding.
if ( WXInlinePlayer . isSupport ( ) ) {
WXInlinePlayer . init ( {
asmUrl : './prod.baseline.asm.combine.js' ,
wasmUrl : './prod.baseline.wasm.combine.js'
} ) . catch ( e => {
console . log ( `WXInlinePlayer init error: ${ e } ` ) ;
} ) ;
}WXInlinePlayer sudah siap dan dapat diinisialisasi dengan aman.
if ( WXInlinePlayer . isSupport ( ) ) {
WXInlinePlayer . init ( { /*.....*/ } ) ;
WXInlinePlayer . ready ( ) . then ( ( ) => {
console . log ( 'WXInlinePlayer ready' ) ;
} ) ;
}Konstruktor WXInlinePlayer, silakan merujuk ke: Parameter inisialisasi untuk parameter inisialisasi terkait.
WXInlinePlayer . ready ( ) . then ( ( ) => {
const player = new WXInlinePlayer ( { /*...*/ } ) ;
} ) ;untuk pemutaran video. Perlu dicatat bahwa karena keterbatasan browser (tidak termasuk versi WeChat dan Chrome di bawah 66), versi yang lebih tinggi telah menonaktifkan pemutaran otomatis audio, jadi memanggil metode ini secara langsung mungkin tidak efektif. Silakan klik/sentuh mulai/sentuh/sentuhmove, dll. Izinkan pengguna secara aktif memicu peristiwa.
document . body . addEventListener ( 'click' , ( ) => {
player . play ( ) ;
} ) ;Menghentikan seluruh pemutar dan tidak dapat dilanjutkan.
player . stop ( ) ;Jeda pemutaran saat ini.
player . pause ( ) ;Melanjutkan operasi yang dijeda karena jeda.
player . resume ( ) ;Dapatkan/atur volume saat ini.
const volume = player . volume ( ) ; // get volume
player . volume ( volume ) ; // set volumeDapatkan/setel status bisu.
const muted = player . mute ( ) ; // get mute
player . mute ( muted ) ; // set muteHancurkan pemutar dan lepaskan semua memori untuk didaur ulang.
player . destroy ( ) ;Dapatkan waktu pemutaran saat ini. Harap dicatat bahwa mungkin ada nilai negatif, jadi harap tangani dengan hati-hati.
player . on ( 'timeUpdate' , ( ) => {
let currentTime = player . getCurrentTime ( ) ;
currentTime = currentTime <= 0 ? 0 : currentTime ;
} ) ;Durasi pemutaran dapat dipahami sebagai durasi buffering.
player . on ( 'timeUpdate' , ( ) => {
const duration = player . getAvaiableDuration ( ) ;
} ) ; Saat ini terdapat 3 set perpustakaan decoding, yaitu:
Perbedaannya adalah:
Kami merekomendasikan penggunaan baseline.asm/baseline.wasm saat Anda memutar video iklan/video pemasaran/video animasi kecil yang sensitif terhadap ukuran perpustakaan dependen, dan menggunakannya saat memutar video sesuai permintaan/video langsung yang tidak sensitif terhadap ukuran perpustakaan dependen. all.asm/all.wasm.
Pada mesin pengembangan, untuk video yang sama, implementasi WXInlinePlayer dan FFMpeg seperti Taobao dan Huajiao memiliki penggunaan memori dan penggunaan CPU yang serupa. Kinerja keseluruhan WXInlinePlayer sekitar 5-10% lebih baik daripada solusi FFMpeg, sementara H265 telah mengurangi pemblokiran. Performanya sekitar 30% lebih baik dibandingkan solusi FFMpeg. Berikut perbandingan performa pemutaran H265:
Kelambatan dan penundaan WXInlinePlayer terutama disebabkan oleh tiga hal:
Secara umum, jika lingkungan jaringan pengguna baik, sulit untuk menyebabkan kemacetan karena penggunaan WebGL dalam rendering (pengoperasiannya sangat sederhana), yang umumnya menyebabkan kelambatan dan penundaan terus-menerus karena kinerja decoding lunak yang tidak memadai.
Untuk mengoptimalkan penundaan yang disebabkan oleh kinerja soft decoding yang tidak memadai, kami biasanya memulai dari beberapa tempat:
Saat ini, WXInlinePlayer dapat memecahkan kode video 1280x720, kecepatan kode 1024, dan kecepatan bingkai 24fps pada mesin kelas menengah ke atas dengan relatif lancar.
Mengenai parameter video yang disebutkan di atas, Anda dapat melihatnya melalui FFmpeg:
ffmpeg -i " your.flv "Di sini kami memberikan profil/frame rate/code rate/resolusi platform mainstream untuk referensi:
| platform | jenis | kejelasan | profil | Kecepatan bingkai | Tingkat kode | resolusi |
|---|---|---|---|---|---|---|
| Gigi harimau | Layar horisontal | SD | Tinggi | dua puluh empat | 500k | 800x450 |
| Gigi harimau | Layar horisontal | HD | Tinggi | dua puluh empat | 1200k | 1280x720 |
| Gigi harimau | Layar vertikal | HD | Utama | 16 | 1280k | 540x960 |
| Qi Xiu | Layar vertikal | SD | Tinggi | 15 | 307k | 204x360 |
| Qi Xiu | Layar vertikal | HD | Tinggi | 15 | 512k | 304x540 |
| Qi Xiu | Layar vertikal | sangat jernih | Dasar | 15 | 1440k | 720x1280 |
| Tik Tok | Layar vertikal | bawaan | Tinggi | 30 | 1600k (perubahan lebih lanjut, hanya untuk referensi) | 720x1280 |
| pekerja cepat | Layar vertikal | bawaan | Tinggi | 25 | 2880k (perubahan lebih lanjut, hanya untuk referensi) | 720x1280 |
Kami menyarankan Anda:
Parameter konfigurasi latensi rendah WXInlinePlayer kami yang umum digunakan adalah sebagai berikut, hanya untuk referensi. Harap sesuaikan sesuai dengan konfigurasi file streaming langsung/sesuai permintaan Anda:
{
chunkSize : 128 * 1024 ,
preloadTime : 5e2 ,
bufferingTime : 1e3 ,
cacheSegmentCount : 64 ,
}Pada saat yang sama, Anda dapat menggunakan peristiwa kinerja untuk menentukan kinerja decoding saat ini, lalu meminta pengguna dan menurunkan versi ke solusi cadangan Anda (seperti pemutaran video langsung/gambar statis/bingkai urutan, dll.):
player . on ( 'performance' , ( { averageDecodeCost , averageUnitDuration } ) => {
const prop = averageUnitDuration / averageDecodeCost ;
if ( prop >= 2.0 ) {
console . log ( 'good performance' ) ;
} else if ( prop < 2.0 && prop >= 1.0 ) {
console . log ( 'ok, thats fine' ) ;
} else {
console . log ( 'bad performance' ) ;
}
} ) ; Solusi FFmpeg saat ini memiliki beberapa masalah utama. Yang pertama adalah ukuran perpustakaan decoding. Setelah dikurangi, ukurannya menjadi sekitar 2M, dan gzip menjadi sekitar 600k. Kedua, solusi FFmpeg sulit untuk dioptimalkan sendiri. Misalnya, WXInlinePlayer akan melakukan decoding beberapa pekerja di 2.0, yang sangat mahal untuk memodifikasi solusi tersebut.
Alasan kelambatan dan penundaan sangatlah rumit. Untuk WXInlinePlayer, kecepatan decoding umumnya tidak dapat mengimbangi kecepatan pemutaran.
Baik iOS dan Android UC telah mengebiri WebAssembly/ASM.js, jadi mereka tidak mendukungnya.
Silakan gunakan FFmpeg atau alat serupa lainnya. Berikut adalah contoh perintah sederhana:
ffmpeg -i " your.mp4 " -vcodec libx264 -acodec aac out.flvSpesifikasi FLV WXInlinePlayer mengikuti spesifikasi ekspansi FLV Kingsoft. Jika Anda perlu melakukan pengkodean terkait, Anda dapat merujuk ke patch FFmpeg terkait atau encoder yang ditulis oleh Kingsoft.
