ホーム>Web デザインのチュートリアル>HTMLチュートリアル

モバイル HTML5 オーディオおよびビデオの問題と解決策の詳細な説明

著者：Eve Cole 更新時間：2025-03-18 22:00:03

最近では、アニメーションの代わりにビデオを使用することや、スプライトアニメーションの代わりにビデオを使用することを研究しています。このようなビデオをインタラクティブビデオと呼びます。

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

  1. ディスク容量が大きく、ダウンロードが遅い、特にオンライン再生はさらに遅くなります
  2. オンラインでプレイする場合、ファイルが多すぎると、http リクエストが多すぎると、応答が遅くなったり、動作が異常になったりすることがあります。

したがって、スプライト アニメーションをビデオに置き換える一連のテクノロジーを開発することが急務となっています。この種のビデオをインタラクティブビデオと呼びます

従来のビデオの問題:

  1. 従来のビデオは正方形の領域でのみ再生できます
  2. 従来のビデオは iPad ではウィンドウで再生されますが、iPhone では全画面でのみ再生できます。
  3. 従来のビデオは、再生時に必ず前面に表示されます。
インタラクティブビデオには次の特徴があります。

  1. iPhoneでは全画面でプレイする必要はなく、リージョン内でプレイできます
  2. インタラクティブビデオは通常のグラフィックオブジェクトの下に表示できます
  3. インタラクティブビデオはマスクすることができ、これによりビデオの背景が削除され、ビデオが通常のグラフィックオブジェクトとブレンドされます。
概要:単純に再生されるビデオの場合は、従来のビデオに設定します。特定の目的で使用する必要があるビデオについては、インタラクティブビデオとして設定します。

ところで、ここ数年間のモバイル H5 の開発中にオーディオとビデオで遭遇した実際的な問題を要約し、私なりの解決策を示します。

最終的な実際の効果をご覧ください: PC (>IE9)、iPhone、iPad、Android 5.0 との互換性

iPhoneの手動、自動、ウィンドウ化などの問題を解決しており、基本的には実際の制作で使用できます。

右側はオリジナルのビデオmp4ファイルです

左側のビデオはアニメーションを置き換え、背景マスク効果をサポートしています。これにより、ベース画像が表示され、一連のインタラクティブな操作がサポートされます。

H5オーディオオーディオ

オーディオ オブジェクトが新しい Audio に渡されるたびに、IOS 上で新しいスレッドが生成されることがわかります。これは不快です。

解決策: 新しい Audio オブジェクトを使用して、別のオーディオ アドレスを置き換えることによってさらにスレッドを開かないようにするという目的を達成します。

Android でのサポートが不十分

解決策: Android の以前のバージョンの問題は解決されていません。一般に、ハイブリッド開発では、フォンギャップなどの基礎となるインターフェイスを調整できます。

iPhoneでは自動再生できない

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

簡単に言うと、手動でトリガーするにはユーザーをシミュレートする必要があるため、最初にこのコード部分を呼び出す必要があります。

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

 //iOS ブラウザがオーディオを自動的に再生できない問題を修正します。ロード時に新しいオーディオを作成し、使用時に src を置き換えます。Xut.plat.isBrowser && Xut. plat.isIOS) { var isAudio = false var fixaudio = function() { if (!isAudio) { isAudio = true; document.removeEventListener('touchstart', fixaudio, false) } }; document.addEventListener('touchstart', fixaudio, false);

このようなコードをボディにバインドする場合: 手動トリガーによってオーディオ オブジェクトを作成し、グローバル ファイルに保存します。

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

// Xut.fix.audio を使用して iOS ブラウザの src 初期化を指定する場合は、app.jsif (Xut.fix.audio) { audio = Xut.fix.audio; audio.src = url;} else { audio = new を参照してください。 Audio(url );}audio.autoplay = true;audio.play();

簡単に言えば、オーディオ オブジェクトを自動的に作成する場合は、再生する前にユーザーによってトリガーされるオブジェクトである必要があります。

H5ビデオオーディオ

video タグはモバイル デバイスではほとんど使用されない可能性があります。Android のサポートは 5.0 でのみ改善されました。

iPhone の古い問題は、自動的に再生できないことです (データを保存し、妹を保存してください!!!)。デフォルトでは全画面コントロール再生になっています。

長い間、私はこのビデオ処理を無視していました。Android は最下層を使用しており、iPhone には Flash が組み込まれており、Flash のサポートにも問題があります。

少し前に、私の上司からリクエストがありました。アプリケーション アニメーションが多すぎます。それらはすべて、1 つのアプリで数百メガバイトから数百メガバイトに及ぶ可能性があります。

したがって、画像を圧縮するソリューションが緊急に必要です。

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

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

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

2. iPhoneではウィンドウでプレイできます

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

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

ビデオはアニメーションを置き換え、ベース画像を表示できる背景マスキング効果をサポートします。

同時に、手動、自動、フルスクリーンではないという問題も解決されました。

iPhoneのウィンドウ操作

解決：

キャンバス + ビデオタグの組み合わせで処理

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

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

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

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

これは少し面倒です。キャンバスを操作して画像を制御する必要があります。まだすべてを書き終えていません。これも Canvas + で処理します。前処理用にキャッシュされたキャンバス コンテナーが必要です。前処理を通じて各画像のピクセルを取得し、各ピクセルの RBG 値を変更することで背景を除去し、PNG のように使用できます。画像は今後書いていきますので公開しましょう〜〜

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。

関連記事