HTML5 モバイルオーディオおよびビデオの問題と解決策の詳細な説明-H5 チュートリアル-php.cn

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

黄舟

リリース： 2017-03-21 15:39:22

オリジナル

2064 人が閲覧しました

最近、アニメーションを動画に置き換えたり、スプライトアニメーションを動画に置き換えたりすることを研究しています。このような動画をインタラクティブ動画と呼びます。

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

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

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

従来のビデオの問題点:

従来のビデオは正方形の領域でのみ再生できます
従来のビデオは、iPad ではウィンドウで再生されますが、iPhone では再生されます。、全画面でのみ再生できます
従来のビデオは再生時に必ずフロントエンドに表示されます

インタラクティブビデオには次の特徴があります:

iPhone では、いいえ全画面再生が必要です。エリア内で再生可能です
インタラクティブビデオは通常のグラフィックスオブジェクトの下に表示できます
インタラクティブビデオには、ビデオの背景を削除できるマスクを付けることができ、ビデオと通常のグラフィックスを許可しますグラフィックスオブジェクトを 1 つに統合

概要: 単純に再生されるビデオの場合は、従来のビデオに設定します。特定の目的で使用する必要があるビデオについては、インタラクティブビデオとして設定します。

研究は最初に結果をもたらしましたところで、ここ数年間のモバイル H5 開発中にオーディオで遭遇した実際的な問題を要約し、私自身の解決策を示します

最終的な実際の効果を見てください。 PC (>IE9)、iPhone、iPad、Android 5.0に対応

iPhoneの手動、自動、ウィンドウ化などの問題を解決し、基本的に本番でも使用可能です

右側がオリジナル動画mp4ファイル

左側のビデオはアニメーションを置き換え、背景マスク効果をサポートし、ベースマップを表示でき、一連のインタラクティブな操作をサポートします

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

H5オーディオ

オーディオが毎回オブジェクトは新しい Audio を介して渡されます。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のサポートはひどいです、バージョン5.0で改善されたと思います

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

長い間、Android はこのビデオ処理を最下位レイヤーで使用することを気にしていませんでした。 iPhone は VideoJS を直接使用しています。Flash にはサポートの問題もあります。そのすべてがスプライトルートの組み合わせアニメーションです。アプリは数百 MB から数百 MB まで及ぶことがあります

そのため、

写真を圧縮するソリューションが緊急に必要です

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

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

ビデオ内の特定のオブジェクトを含むビデオ全体が、ユーザーのクリック、スライド、その他の操作に応答できます
iPhoneの下、ウィンドウで再生することができます
背景をフィルターで除外できるので、PNG 画像のように使用できます

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

ビデオはアニメーションを置き換えます、背景マスク効果をサポートし、ベースマップを表示することができます

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

iPhoneウィンドウ化

解決策:

キャンバス+ビデオを通じて処理タグの組み合わせ

原理: ビデオを取得する canavs を介してページに元の画像フレームが描画されます

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

これは、画像を制御するために対話とキャンバスのドラッグが必要です。まだすべてを書き終えていません。一般的に、企業の需要はこのようなものではありません

簡単に説明すると、これもキャンバス + ビデオで処理されますが、前処理にはキャッシュされたキャンバスコンテナーが必要です

前処理により、それぞれの画像が得られます各ピクセルの RBG 値を変更することで、背景を除去して

、PNG画像のように使用できます

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