HTML5 オーディオとビデオの問題と解決策

最近、アニメーションを動画に置き換えたり、スプライトアニメーションを動画に置き換えたりすることを研究しています。このような動画をインタラクティブ動画と呼びます。この記事では、主にモバイル HTML5 オーディオとビデオの問題とその解決策に関する関連情報を紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

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

1. ディスク容量が大きく、ダウンロードが遅い場合、特にオンライン再生はさらに遅くなります

2. オンラインで再生する場合、http リクエストが多すぎると応答が遅くなります。 、または異常な動作をします

したがって、スプライトアニメーションをビデオに置き換える一連の技術を開発することが緊急に必要です。この種のビデオをインタラクティブビデオと呼びます

従来のビデオの問題:

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

2. 従来のビデオはiPadではウィンドウで再生されますが、iPhoneでは以下では、従来のビデオのみを全画面で再生できます。再生すると、必ずフロントエンドに表示されます。

3. iPhone では、再生する必要はありません。全画面でエリア内で再生できます

インタラクティブビデオは通常のグラフィックオブジェクトの下に表示できます

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

2. 概要:

   単純に再生されるビデオの場合は、従来のビデオに設定されます。特定の目的で使用する必要があるビデオについては、インタラクティブビデオとして設定します。
3. 研究は最初に結果をもたらしました。ところで、ここ数年間のモバイル 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('touchstart', fixaudio, false);
        }
    };
    document.addEventListener('touchstart', 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- ブラウザ

アニメーションをビデオに置き換えます

これは少し面倒ですが、画像を制御するためにキャンバスをドラッグする必要があります。まだすべてを書き終えていないため、一般的な企業のニーズには対応できません。こちらも簡単に説明しますが、前処理としてキャッシュされたキャンバスコンテナが必要となり、RGB値を変更することで背景を除去することができます。各ピクセルの.

php-HTML5 オーディオ キャプチャの問題?

以上がHTML5 オーディオとビデオの問題と解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。