最近、アニメーションの代わりにビデオを使用し、スプライトアニメーションの代わりにビデオを使用することを研究しています。 この種のビデオをインタラクティブビデオと呼びます。
従来のスプライトアニメーション：ディスク容量が大きく、ダウンロードが遅く、特にオンライン再生が遅くなります
ファイルが多すぎたり、オンラインで再生するときにhttpリクエストが多すぎたりすると、応答が遅くなったり、異常な動作が発生したりします。 したがって、スプライトアニメーションをビデオに置き換えるための一連の技術を開発する緊急の必要性があります。 この種のビデオをインタラクティブビデオと呼びます
従来のビデオの問題：
1.正方形のエリアでのみプレイできます
2. iPadでは再生するウィンドウであり、iPhoneでは全画面でしか再生できません。
3.プレイすると、間違いなく最前線に表示されます
インタラクティブビデオには次の特徴があります。
iPhoneでは、全画面再生は不要で、XNUMXつのエリアで再生できます
インタラクティブビデオは、通常のグラフィックオブジェクトの下に表示できます
インタラクティブビデオにはマスクを付けることができるため、ビデオの背景を削除して、ビデオと通常のグラフィックオブジェクトを統合できます。
概要 再生に使用する動画は、従来の動画とします。 特定の目的で使用する必要がある動画については、インタラクティブ動画として設定しています。 調査は予備的な結果をもたらした。 ちなみに、モバイルH5のオーディオとビデオの開発で今後数年間に遭遇した実際の問題をまとめ、独自のソリューションを提供します。 最終的な実際の効果をご覧ください: PC (>IE9)、iphone、ipad、Android 5.0 に対応
iPhone の手動、自動、ウィンドウの問題を解決すると、 基本的に実稼働で使用します。 右は元のビデオ mp4 ファイル、左のビデオはアニメーションを置き換え、背景マスク効果をサポートし、ベース マップを表示でき、一連のインタラクティブな操作をサポートします
H5オーディオ
オーディオオブジェクトが新しいAudioを通過するたびに、IOSで新しいスレッドを確認できます。
解決策：新しいAudioオブジェクトは、異なるオーディオアドレスを置き換えることにより、これ以上スレッドを開かないという目標を達成します。
Androidでのサポートは良くありません
解決策：Androidの下位バージョンの問題は解決されていません。 一般に、混合開発は、phonegapなどの基盤となるインターフェイスを調整することで処理できます。
iPhoneで自動再生できない
解決策：iPhoneでの自動再生は、IOSが設計されたときに行われたプロセスです。 トラフィックの自動盗難を防ぐためのようです。
簡単に言うと、ユーザーをシミュレートして手動でトリガーする必要があるため、最初にこのコードを呼び出す必要があります。
コードをコピーする
// iOSブラウザがオーディオを自動的に再生できない問題を修正します。 ロード時に新しいオーディオを作成し、使用時に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）;
}
上記のコードをコピーします
このようなコードを本文にバインドする場合：手動でトリガーしてオーディオオブジェクトを作成し、グローバルに保存します
次のように使用する場合：
コードをコピーする
// Xut.fix.audioを使用してiOSブラウザのsrcを指定する場合、初期化についてはapp.jsを参照してください
if（Xut.fix.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、組み込みのフラッシュとh5スイッチを直接使用し、フラッシュにもサポートの問題があります。 少し前に、上司は要求を持っていました。 適用したアニメーションが多すぎて、すべてが720つのアプリで数百メガバイトから数百メガバイトの範囲のスプライトルートのアニメーションを組み合わせたものであったため、画像を圧縮するソリューションが緊急に必要とされています。 ビデオ圧縮技術は長年にわたって開発され、非常に成熟しているため、最終的な解決策は、アニメーションの代わりにビデオを使用することです。 現在、ビデオ圧縮技術は10Pを簡単に変換できます。 160M /分、または25K /秒に圧縮された高解像度の映画。 画像シーケンスのファイルサイズは、少なくとも数十分のXNUMXです。 同時に、ほとんどのデバイスはビデオのハードウェア解凍をサポートしているため、ビデオ再生のCPU消費量は非常に低く、バッテリー消費量も非常に低く、再生速度も高速です。 XNUMXフレームの全画面再生でも簡単に実現できます。
計画が完成し、解決すべきいくつかの問題がここにあります。
ビデオ内の一部のオブジェクトを含むビデオ全体は、iPhoneでのユーザーのクリック、スライド、その他の操作に応答したり、ウィンドウで再生したり、背景をフィルターで除外したり、PNG画像のように使用したりできます。 ビデオはアニメーションを置き換え、背景マスク効果をサポートします。これにより、ベースイメージが表示され、手動、自動、および不完全な画面の問題も解決されます。
iPhoneのウィンドウ処理
解決策：キャンバスとビデオタグによる処理を組み合わせる
原則：ビデオの元の画像フレームを取得し、カナブを介してページに描画します
ここでは、ソースコードを直接添付します。コードは一般的に記述されていますが、いくつかの重要なポイントを強調しています。
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
アニメーションの代わりにビデオ
これは少し面倒です。 画像を制御する目的を達成するには、インタラクティブでキャンバスをドラッグする必要があります。 私はまだすべてを書き終えていません、そして一般的な会社のニーズはこれを持っていません。 ここに簡単な説明があります。これもcanvas + videoによって処理されますが、前処理を行うにはキャッシュされたキャンバスコンテナが必要です。 前処理により、各画像のピクセルを取得し、各ピクセルRBGの値を変更することで、背景をフィルターで除去して、PNG画像のように使用できるようにします。 後で書いて公開します~~
当社の他の製品：
