ホームページ >ウェブフロントエンド >H5 チュートリアル >モバイル端末上の HTML5 オーディオとビデオで発生する問題と解決策

モバイル端末上の HTML5 オーディオとビデオで発生する問題と解決策

小云云オリジナル: 2018-02-11 10:04:002089ブラウズ

最近、アニメーションを動画に置き換えたり、スプライトアニメーションを動画に置き換えたりすることを研究しています。このような動画をインタラクティブ動画と呼びます。この記事では、主にモバイル HTML5 オーディオとビデオの問題と解決策に関する関連情報を紹介し、参考にしていただければ幸いです。

従来のスプライトアニメーション:

ディスク容量が大きいため、ダウンロードが遅く、特にオンライン再生ではさらに遅くなります
オンラインで再生する場合、ファイルが多すぎる、http リクエストが多すぎると、応答が遅くなります。したがって、スプライトアニメーションをビデオに置き換える一連のテクノロジーを開発することが急務となっています。この種のビデオをインタラクティブビデオと呼びます

従来のビデオの問題:

従来のビデオは正方形の領域でのみ再生できます

従来のビデオはiPadではウィンドウで再生されますが、iPhoneでは以下では、従来のビデオのみを全画面で再生できます。再生すると、必ずフロントエンドに表示されます。
iPhone では、再生する必要はありません。フルスクリーンでエリア内で再生できます
インタラクティブビデオは通常のグラフィックオブジェクトの下に表示できます

インタラクティブビデオにはマスクを付けることができ、ビデオの背景を削除してビデオを通常のグラフィックオブジェクトとブレンドできます

概要:
単純に再生されるビデオの場合は、従来のビデオに設定されます。特定の目的で使用する必要があるビデオについては、インタラクティブビデオとして設定します。
研究は最初に結果をもたらしました。ところで、ここ数年間のモバイル H5 開発でオーディオとビデオで遭遇した実際的な問題を要約し、私自身の解決策を示します。
最終的な実際の効果を見てください。 PC (>IE9)、iPhone、iPad、Android 5.0
iPhoneの手動、自動、ウィンドウ化などの問題を解決し、基本的に本番で使用可能です
右側がオリジナルビデオmp4ファイルです

左側のビデオはアニメーションを置き換え、背景マスクをサポートしています

H5オーディオ

オーディオオブジェクトが新しいオーディオを通過するたびに、エフェクトはベースマップを明らかにし、一連のインタラクティブな操作をサポートします

これは、IOS 上で新しいスレッドが生成されることがわかります。これは非常に不快です

解決策: 新しい Audio オブジェクトは、異なるオーディオアドレスを置き換えることで、これ以上スレッドを開かないようにするという目的を達成します

Android ではサポートされていません。強力な

解決策: Android の低バージョンの問題は解決されていません。一般的に、ハイブリッド開発でも、基礎となるインターフェイス処理を調整できます。たとえば、phonegap

は iPhone 上で自動的に再生できません

。 iPhone での再生は、IOS の設計時に行われたプロセスであり、トラフィックの自動盗難を防ぐためのようです

簡単に言うと、ユーザーが手動で再生するようにシミュレートする必要があるため、このコードを呼び出す必要があります。冒頭:

これは私のプロジェクトからのもので、直接差し引いただけです

//修复ios 浏览器不能自动播放音频的问题 在加载时创建新的audio 用的时候更换src即可
Xut.fix = Xut.fix||{};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
    var isAudio = false
    var fixaudio = function() {
        if (!isAudio) {
            isAudio = true;
            Xut.fix.audio = new Audio();
            document.removeEventListener(&#39;touchstart&#39;, fixaudio, false);
        }
    };
    document.addEventListener(&#39;touchstart&#39;, fixaudio, false);
}

そのようなコードを本体にバインドする場合: 手動トリガーでオーディオオブジェクトを作成し、それをグローバルに保存します

とき使用する場合は以下の通りです

//如果为ios browser 用Xut.fix.audio 指定src 初始化见app.js
if (Xut.fix.audio) {
    audio 
=  Xut.fix.audio;
    audio.src = url;
} else {
    audio = new Audio(url);
}
audio.autoplay = true;
audio.play();

オーディオオブジェクトを直接置き換えることができます。簡単に言うと、自動的に再生するためにユーザーが作成したオブジェクトである必要があります

H5ビデオオーディオ

Android のサポートがあまりにも悪いので、iPhone では自動的に再生できません (データを保存して妹を救ってください!!!)。はフルスクリーンコントロール再生です

私は長い間、このビデオ処理を無視していました。Android は最下層を使用し、iPhone は内蔵 Flash と h5 スイッチングを備えた VideoJS を直接使用します。Flash にもサポートの問題がありました

。少し前にリクエストがありました。アプリケーションアニメーションが多すぎます。すべてがスプライトラインの組み合わせアニメーションです。1 つのアプリのサイズは数百メガバイトから数百メガバイトに及ぶことがあります。そのため、画像を圧縮するソリューションが急務です。

ビデオ圧縮技術は長年にわたって開発され、非常に成熟しているため、最終的な解決策はアニメーションの代わりにビデオを使用することです。現在のビデオ圧縮テクノロジーでは、720P 高解像度ムービーを 10M/分または 160K/秒まで簡単に圧縮できます。これは、画像シーケンスのファイルサイズより少なくとも数十分の 1 です。同時に、ほとんどのデバイスはビデオのハードウェア解凍をサポートしているため、ビデオ再生の CPU 消費量は非常に少なく、バッテリー消費も非常に少なく、再生速度も高速です。 25 フレームの全画面再生も簡単に実現できます。

計画が完了したら、解決する必要がある問題がいくつかあります

1. ビデオ内の特定のオブジェクトを含むビデオ全体が、ユーザーのクリック、スライド、その他の操作に応答できます

2.ウィンドウで再生できます

3. 背景をフィルタリングできるので、PNG 画像のように使用できます

最終的な実際の効果は、開始 GIF アニメーションにも表示されます:

ビデオはアニメーションを置き換え、その後サポートされます背景マスク効果は、下部を明らかにすることができます

は、手動、自動、全画面表示ではない問題も解決します

iPhoneウィンドウ操作

解決策:

キャンバス+ビデオタグによる結合処理

原理: ビデオの元の画像フレームを取得し、canavsを通じてページに描画します

ここではソースコード、コードを直接添付しますは一般的に書かれていますが、いくつかの重要なポイントを強調しています

http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser

アニメーションの代わりにビデオ

これは少し面倒で、キャンバスをドラッグして画像を制御する必要がありますが、まだすべてを書き終えていないため、一般的な企業のニーズにはこれがありません。これもキャンバス + ビデオで処理されます。ただし、キャッシュされたキャンバスが必要です。コンテナは前処理を行い、各ピクセルの RBG 値を変更することで背景を除去し、PNG 画像のように使用できます。書いたら、投稿してください~~

モバイル端末上の HTML5 オーディオとビデオで発生する問題と解決策

関連記事