Baru-baru ini, kami mengkaji penggunaan video bukan animasi dan video bukan animasi sprite. Kami memanggil video interaktif jenis ini.
Animasi sprite tradisional: ruang cakera besar, muat turun perlahan, terutamanya main balik dalam talian, akan menjadi lebih perlahan
Terlalu banyak fail, terlalu banyak permintaan http ketika bermain dalam talian, akan menyebabkan tindak balas lambat atau tingkah laku yang tidak normal. Oleh itu, terdapat keperluan mendesak untuk mengembangkan satu set teknologi untuk menggantikan animasi sprite dengan video. Kami memanggil video jenis ini sebagai video interaktif
Masalah dengan video tradisional:
1. Hanya boleh dimainkan di kawasan berbentuk persegi
2. Di bawah iPad, ini adalah tetingkap untuk dimainkan, dan di bawah iPhone, hanya boleh dimainkan dalam layar penuh.
3. Semasa bermain, ia pasti akan muncul di barisan hadapan
Video interaktif mempunyai ciri-ciri berikut:
Di bawah iPhone, pemutaran skrin penuh tidak diperlukan, ia boleh dimainkan di satu kawasan
Video interaktif boleh muncul di bawah objek grafik biasa
Video interaktif boleh mempunyai topeng, sehingga latar belakang video dapat dikeluarkan dan video dan objek grafik biasa dapat disatukan
Ringkasan: Untuk video yang digunakan untuk bermain, kami akan menetapkannya sebagai video tradisional. Untuk video yang perlu digunakan untuk tujuan tertentu, kami menetapkannya sebagai video interaktif. Penyelidikan ini telah menghasilkan hasil awal. By the way, ini merangkum masalah sebenar yang dihadapi dalam pengembangan audio dan video H5 mudah alih dalam beberapa tahun ke depan dan menyediakan penyelesaiannya sendiri. Lihat kesan sebenar yang terakhir: serasi dengan PC (> IE9), iphone, ipad, Android 5.0
Selesaikan masalah manual, automatik, dan penggulungan pada iPhone, dan boleh pada asasnya digunakan dalam pengeluaran sebenar. Di sebelah kanan adalah file mp4 video asli, video di sebelah kiri menggantikan animasi, dan kemudian menyokong kesan topeng latar belakang, dapat mendedahkan peta dasar, dan menyokong serangkaian operasi interaktif
Audio H5
Setiap kali objek audio dilalui Audio baru, utas baru dapat dilihat di IOS.
Penyelesaian: Objek Audio baru, dengan mengganti alamat audio yang berbeza, mencapai matlamat untuk tidak membuka lebih banyak utas.
Sokongan tidak baik pada Android
Penyelesaian: Masalah pada versi Android yang lebih rendah tidak dapat diselesaikan. Secara amnya, pengembangan campuran dapat ditangani dengan menyesuaikan antara muka yang mendasari, seperti phonegap
Tidak dapat bermain secara automatik di iphone
Penyelesaian: Main semula automatik pada iphone adalah proses yang dilakukan semasa IOS dirancang. Nampaknya untuk mengelakkan pencurian lalu lintas secara automatik.
Ringkasnya, ia perlu dipicu secara manual dengan mensimulasikan pengguna, jadi kita perlu memanggil kod ini pada awalnya:
Salin kod
// Perbaiki masalah bahawa penyemak imbas ios tidak dapat memainkan audio secara automatik. Buat audio baru semasa memuat dan ganti src ketika menggunakannya.
Xut.fix = Xut.fix || {};
jika (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = salah
var fixaudio = fungsi () {
jika (! isAudio) {
isAudio = benar;
Xut.fix.audio = Audio baru ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Salin kod di atas
Sekiranya anda mengikat kod seperti itu ke badan: buat objek audio dengan mencetuskannya secara manual, dan kemudian simpan di dalam global
Apabila digunakan seperti berikut:
Salin kod
// Sekiranya anda menggunakan Xut.fix.audio untuk menentukan src untuk pelayar ios, sila rujuk app.js untuk inisialisasi
jika (Xut.fix.audio) {
audio
=
Xut.fix.audio;
audio.src = url;
} Lain {
audio = Audio baru (url);
}
audio.autoplay = benar;
audio.play ();
Cukup ganti objek audio. Ringkasnya, mestilah objek yang dibuat oleh pemicu pengguna untuk bermain.
Audio video H5
Teg video mungkin jarang digunakan di terminal mudah alih, sokongan Android terlalu buruk, secara visual 5.0 lebih baik. Masalah lama pada iPhone tidak dapat dimainkan secara automatik (Simpan data, selamatkan kakak anda !!!), dan lalai adalah kawalan skrin penuh untuk dimainkan. Sudah lama saya tidak mengendahkan pemprosesan video ini. Android menggunakan lapisan bawah, iPhone secara langsung menggunakan VideoJS, suis bawaan dan suis h5, flash juga mempunyai masalah sokongan. Beberapa ketika yang lalu, bos mempunyai permintaan. Kami menggunakan terlalu banyak animasi, semuanya merupakan animasi gabungan dari rute sprite, mulai dari ratusan megabyte hingga ratusan megabyte di bawah satu aplikasi, jadi ada keperluan mendesak untuk penyelesaian untuk memampatkan gambar. Penyelesaian terakhir adalah menggunakan video dan bukannya animasi, kerana teknologi pemampatan video telah dikembangkan selama bertahun-tahun dan sangat matang. Kini teknologi pemampatan video dapat menukar 720P dengan mudah. Filem definisi tinggi, dimampatkan hingga 10M / min, atau 160K / saat. Ukuran fail urutan gambar sekurang-kurangnya beberapa kali lebih kecil. Pada masa yang sama, kebanyakan peranti menyokong penyahmampatan perkakasan video, sehingga penggunaan CPU pemutaran video sangat rendah, penggunaan bateri juga sangat rendah, dan kecepatan pemutaran juga cepat. Pemutaran skrin penuh dengan 25 bingkai dapat dicapai dengan mudah.
Rancangan ini diselesaikan, dan beberapa masalah yang harus diselesaikan ada di sini.
Keseluruhan video, termasuk beberapa objek dalam video, dapat menanggapi klik pengguna, slaid dan operasi lain di bawah iPhone, dapat dimainkan di jendela, dapat menyaring latar belakang, dan dapat digunakan seperti gambar PNG. Video menggantikan animasi, dan kemudian menyokong kesan topeng latar belakang, yang dapat mendedahkan gambar dasar, dan juga menyelesaikan masalah layar manual, automatik, dan tidak lengkap
penggulungan iphone
Penyelesaian: Gabungkan pemprosesan melalui tag kanvas + video
Prinsip: Dapatkan bingkai gambar asal video dan lukiskan ke halaman melalui kanvas
Di sini saya langsung melampirkan kod sumber, kodnya ditulis secara umum, tetapi menyoroti beberapa perkara penting
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Video dan bukannya animasi
Ini agak membebankan. Ia perlu interaktif dan tarik kanvas untuk mencapai tujuan mengawal gambar. Saya belum selesai menulis semuanya, dan keperluan syarikat am tidak akan memilikinya. Berikut adalah penerangan ringkas, ia juga diproses oleh kanvas + video, tetapi bekas kanvas cache diperlukan untuk melakukan praprosesan. Melalui proses pra-proses, dapatkan piksel setiap gambar, dan dengan mengubah nilai setiap piksel RBG, ia dapat menyaring latar, sehingga dapat digunakan seperti gambar PNG. Saya akan menulisnya kemudian dan menerbitkannya ~~
produk kami yang lain:
