WXInlinePlayer
1.3.6
ライブブロードキャストや短いビデオの台頭により、ビデオはより多くの情報を伝えるため、業務/製品情報を出力するための非常に主流の方法になりました。ただし、国内のさまざまなブラウザ メーカーの利益のため、HTML5 のビデオ機能には多くの制限が設けられています。制限は次のとおりです。
具体的な質問については、Tencent の IMWeb チームが作成した「モバイル端末ビデオ マイニングの複雑なフレーム アニメーションの実装」を参照してください。
これらの問題を解決するために、FLV をソフト デコードすることで WXInlinePlayer を実装しました。使用したサードパーティ テクノロジとプラットフォーム API は次のとおりです。
同時に、FLV Demuxer の WebAssembly バージョンも作成しました。関連するコードは lib/codec にあります。
互換性テストでは、参照のみを目的として、BrowserStack サービスによって提供される関連モデルを使用します。
https://eroszy.github.io/WXInlinePlayer/example/index.html
パーセル/emscripten 1.38.45/cmake と make がインストールされていることを確認してから、次のコマンドを実行してください。
npm install # 初始化工程
npm update # 更新工程有关的插件。如果网络错误，改用 cnpm update
bash build.sh最終的な成果物はサンプル フォルダー内にあります。
ご注意ください：
- WindowsでのOpenH264のコンパイルは保証されていませんので、*nix環境でビルドしてください。
- emscripten がバージョン 1.38.45 であることを確認してください。そうでない場合は、wasm32 エラーが発生します。
- cmake のバージョンは 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 >プロジェクトのルート ディレクトリで、次のコマンドを入力してサーバーを起動します。
npm run serve次に、URL を入力してデモにアクセスします。
http://localhost:8888/example/index.html
現在の実行環境が WXInlinePlayer をサポートしているかどうか。
if ( WXInlinePlayer . isSupport ( ) ) {
console . log ( 'WXInlinePlayer support' ) ;
}WXInlinePlayer を初期化するには、ロードされた H264 デコード ライブラリの特定のアドレスを渡す必要があります。デコード ライブラリの選択については、「デコードの依存関係の選択方法」を参照してください。
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 の準備が完了し、安全に初期化できます。
if ( WXInlinePlayer . isSupport ( ) ) {
WXInlinePlayer . init ( { /*.....*/ } ) ;
WXInlinePlayer . ready ( ) . then ( ( ) => {
console . log ( 'WXInlinePlayer ready' ) ;
} ) ;
}WXInlinePlayer コンストラクターについては、関連する初期化パラメーターについては「初期化パラメーター」を参照してください。
WXInlinePlayer . ready ( ) . then ( ( ) => {
const player = new WXInlinePlayer ( { /*...*/ } ) ;
} ) ;ビデオ再生用。ブラウザの制限により (WeChat および Chrome バージョン 66 未満を除く)、それより上位のバージョンではオーディオの自動再生が無効になっているため、このメソッドを直接呼び出しても効果がない場合があることに注意してください。 ユーザーは click/touchstart/touchend/touchmove などを使用してください。イベントを積極的にトリガーします。
document . body . addEventListener ( 'click' , ( ) => {
player . play ( ) ;
} ) ;プレーヤー全体が停止し、再開できなくなります。
player . stop ( ) ;現在の再生を一時停止します。
player . pause ( ) ;一時停止により一時停止していた動作を再開します。
player . resume ( ) ;現在の音量を取得/設定します。
const volume = player . volume ( ) ; // get volume
player . volume ( volume ) ; // set volumeミュート状態を取得/設定します。
const muted = player . mute ( ) ; // get mute
player . mute ( muted ) ; // set muteプレーヤーを破壊し、すべてのメモリを解放してリサイクルします。
player . destroy ( ) ;現在の再生時間を取得します。 マイナスの値になる場合がありますので、取り扱いにご注意ください。
player . on ( 'timeUpdate' , ( ) => {
let currentTime = player . getCurrentTime ( ) ;
currentTime = currentTime <= 0 ? 0 : currentTime ;
} ) ;再生可能期間は、バッファリング期間として理解できます。
player . on ( 'timeUpdate' , ( ) => {
const duration = player . getAvaiableDuration ( ) ;
} ) ; 現在、次の 3 セットのデコード ライブラリがあります。
違いは次のとおりです。
依存ライブラリのサイズに敏感な広告ビデオ/マーケティング ビデオ/小さなアニメーション ビデオを再生する場合は、baseline.asm/baseline.wasm を使用し、依存ライブラリのサイズに影響されないオンデマンド ビデオ/ライブ ビデオを再生する場合は、baseline.asm/baseline.wasm を使用することをお勧めします。依存ライブラリ all.asm/all.wasm のサイズ。
開発マシン上では、同じビデオに対して、WXInlinePlayer と Taobao や Huajiao などの FFMpeg 実装は同様のメモリ使用量と CPU 使用率を示します。WXInlinePlayer の全体的なパフォーマンスは FFMpeg ソリューションよりも約 5 ～ 10% 優れており、H265 ではデブロッキングが軽減されています。そのパフォーマンスは FFMpeg ソリューションよりも約 30% 優れています。以下は H265 の再生パフォーマンスの比較です。
WXInlinePlayer の遅延は主に 3 つの場所から発生します。
一般に、ユーザーのネットワーク環境が良好であれば、レンダリングに WebGL を使用するため (操作は非常に簡単です)、ボトルネックが発生することは困難です。一般に、ソフト デコードのパフォーマンス不足による定常的なラグや遅延が発生します。
不十分なソフト デコード パフォーマンスによって引き起こされる遅延を最適化するには、通常、いくつかの場所から開始します。
現在、WXInlinePlayer は、中級からハイエンドのマシンで 1280x720、コード レート 1024、フレーム レート 24fps のビデオを比較的スムーズにデコードできます。
上記のビデオ パラメータについては、FFmpeg を通じて表示できます。
ffmpeg -i " your.flv "ここでは、参考として主流のプラットフォームのプロファイル/フレーム レート/コード レート/解像度を示します。
| プラットフォーム | タイプ | 明瞭さ | プロフィール | フレームレート | コードレート | 解決 |
|---|---|---|---|---|---|---|
| 虎の歯 | 横画面 | SD | 高い | 24 | 500k | 800×450 |
| 虎の歯 | 横画面 | HD | 高い | 24 | 1200k | 1280x720 |
| 虎の歯 | 縦画面 | HD | 主要 | 16 | 1280k | 540×960 |
| 秋秀 | 縦画面 | SD | 高い | 15 | 307k | 204x360 |
| 秋秀 | 縦画面 | HD | 高い | 15 | 512k | 304x540 |
| 秋秀 | 縦画面 | ウルトラクリア | ベースライン | 15 | 1440k | 720x1280 |
| ティックトック | 縦画面 | デフォルト | 高い | 30 | 1600k (さらに変更、参考のみ) | 720x1280 |
| 早い労働者 | 縦画面 | デフォルト | 高い | 25 | 2880k (その他の変更点、参考のみ) | 720x1280 |
次のことをお勧めします。
WXInlinePlayer の一般的に使用される低遅延設定パラメータは次のとおりです。参考用として、ライブ ストリーム/オンデマンド ファイルの設定に応じて調整してください。
{
chunkSize : 128 * 1024 ,
preloadTime : 5e2 ,
bufferingTime : 1e3 ,
cacheSegmentCount : 64 ,
}同時に、パフォーマンス イベントを使用して現在のデコード パフォーマンスを判断し、ユーザーにプロンプトを表示して、バックアップ ソリューション (ビデオの直接再生/静止画像/シーケンス フレームなど) にダウングレードすることができます。
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' ) ;
}
} ) ; FFmpeg ソリューションには現在、いくつかの大きな問題があります。1 つは、縮小後のデコード ライブラリのサイズが約 2M であり、gzip のサイズは約 600k であるため、依存ライブラリのサイズを考慮する必要があります。第 2 に、FFmpeg のソリューションを自分で最適化するのは困難です。たとえば、WXInlinePlayer は 2.0 で複数のワーカーのデコードを行うため、そのようなソリューションを変更するには非常にコストがかかります。
WXInlinePlayer の場合、ラグや遅延の原因は複雑です。一般に、デコード速度が再生速度に追いつかないため、最適化のためにラグや遅延を軽減する方法を参照してください。
iOS と Android UC はどちらも WebAssembly/ASM.js を去勢しているため、単純にサポートしていません。
FFmpeg または他の同様のツールを使用してください。簡単なコマンドの例を次に示します。
ffmpeg -i " your.mp4 " -vcodec libx264 -acodec aac out.flvWXInlinePlayer の FLV 仕様は、Kingsoft の FLV 拡張仕様に従っています。関連するエンコードを実行する必要がある場合は、関連する FFmpeg パッチまたは Kingsoft によって作成されたエンコーダを参照してください。
