Baru-baru ini, kami mempelajari penggunaan video sebagai pengganti animasi dan video sebagai pengganti animasi sprite. Kami menyebutnya video interaktif video.
Animasi sprite tradisional: ruang disk besar, pengunduhan lambat, terutama pemutaran online, akan lebih lambat
Terlalu banyak file, terlalu banyak permintaan http saat bermain online, akan menyebabkan respon lambat atau perilaku tidak normal. Oleh karena itu, suatu perangkat teknologi untuk menggantikan animasi sprite dengan video menjadi kebutuhan yang mendesak untuk dikembangkan. Kami menyebut video semacam ini sebagai video interaktif
Masalah dengan video tradisional:
1. Hanya bisa dimainkan di area berbentuk persegi
2. Di bawah iPad, itu adalah jendela untuk bermain, dan di bawah iPhone, itu hanya bisa dimainkan di layar penuh.
3. Saat bermain, pasti akan tampil paling depan
Video interaktif memiliki ciri-ciri sebagai berikut:
Di bawah iPhone, pemutaran layar penuh tidak diperlukan, dapat diputar di satu area
Video interaktif dapat muncul di bawah objek grafik biasa
Video interaktif dapat memiliki topeng, sehingga latar belakang video dapat dihilangkan dan video serta objek grafik biasa dapat diintegrasikan
Ringkasan: Untuk video yang digunakan untuk memutar, kami akan mengaturnya sebagai video tradisional. Untuk video yang perlu digunakan untuk tujuan tertentu, kami menetapkannya sebagai video interaktif. Penelitian telah menghasilkan hasil awal. Omong-omong, ini merangkum masalah aktual yang dihadapi dalam pengembangan audio dan video ponsel H5 dalam beberapa tahun ke depan dan memberikan solusinya sendiri. Lihatlah efek aktual terakhir: kompatibel dengan PC (> IE9), iphone, ipad, Android 5.0
Memecahkan masalah manual, otomatis, dan windowing di iPhone, dan itu bisa pada dasarnya digunakan dalam produksi aktual. Di sebelah kanan adalah file mp4 video asli, video di sebelah kiri menggantikan animasi, dan kemudian mendukung efek topeng latar belakang, dapat mengungkapkan peta dasar, dan mendukung serangkaian operasi interaktif
Audio H5
Setiap kali objek audio melewati Audio baru, utas baru dapat dilihat di iOS.
Solusi: Objek Audio baru, dengan mengganti alamat audio yang berbeda, mencapai tujuan untuk tidak membuka lebih banyak utas.
Dukungan tidak bagus di Android
Solusi: Masalah pada versi Android yang lebih rendah tidak terpecahkan. Umumnya, pengembangan campuran dapat ditangani dengan menyesuaikan antarmuka yang mendasarinya, seperti peta telepon
Tidak dapat bermain otomatis di iPhone
Solusi: Pemutaran otomatis di iphone adalah proses yang dilakukan saat iOS dirancang. Tampaknya untuk mencegah pencurian lalu lintas otomatis.
Sederhananya, ini perlu dipicu secara manual dengan mensimulasikan pengguna, jadi kita perlu memanggil bagian kode ini di awal:
Salin kode
// Perbaiki masalah karena browser ios tidak dapat memutar audio secara otomatis. Buat audio baru saat memuat dan ganti src saat menggunakannya.
Xut.fix = Xut.fix || {};
jika (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = salah
var fixaudio = function () {
if (! isAudio) {
isAudio = benar;
Xut.fix.audio = Audio baru ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Salin kode di atas
Jika Anda mengikat kode seperti itu ke tubuh: buat objek audio dengan memicunya secara manual, lalu simpan di global
Jika digunakan sebagai berikut:
Salin kode
// Jika Anda menggunakan Xut.fix.audio untuk menentukan src untuk browser ios, lihat app.js untuk inisialisasi
if (Xut.fix.audio) {
audio
=
xut.fix.audio;
audio.src = url;
} Else {
audio = Audio baru (url);
}
audio.autoplay = benar;
audio.play ();
Cukup ganti objek audio. Sederhananya, itu harus menjadi objek yang dibuat oleh pemicu pengguna untuk bermain.
Audio video H5
Tag video mungkin jarang digunakan di terminal seluler, dukungan Android terlalu buruk, secara visual 5.0 lebih baik. Masalah lama di iPhone tidak dapat dimainkan secara otomatis (Simpan data, simpan saudara perempuan Anda !!!), dan defaultnya adalah kontrol layar penuh untuk bermain. Untuk waktu yang lama, saya mengabaikan pemrosesan video ini. Android menggunakan lapisan bawah, iPhone langsung menggunakan VideoJS, flash built-in dan sakelar h5, flash juga memiliki masalah dukungan. Beberapa waktu lalu, bos punya permintaan. Kami menerapkan terlalu banyak animasi, semuanya merupakan gabungan animasi dari rute sprite, mulai dari ratusan megabyte hingga ratusan megabyte dalam satu aplikasi, jadi ada kebutuhan mendesak akan solusi untuk mengompres gambar. Solusi terakhir adalah menggunakan video sebagai pengganti animasi, karena teknologi kompresi video telah dikembangkan selama bertahun-tahun dan sudah sangat matang. Sekarang teknologi kompresi video dapat dengan mudah mengkonversi 720P. Film definisi tinggi, dikompresi hingga 10M / mnt, atau 160K / dtk. Ukuran file dari urutan gambar setidaknya beberapa puluh kali lebih kecil. Pada saat yang sama, sebagian besar perangkat mendukung dekompresi perangkat keras video, sehingga konsumsi CPU untuk pemutaran video sangat rendah, konsumsi baterai juga sangat rendah, dan kecepatan pemutaran juga cepat. Bahkan pemutaran layar penuh dari 25 bingkai dapat dengan mudah dicapai.
Rencana tersebut diselesaikan, dan beberapa masalah yang harus diselesaikan ada di sini.
Seluruh video, termasuk beberapa objek dalam video, dapat merespons klik pengguna, slide, dan operasi lainnya di bawah iPhone, dapat diputar di jendela, dapat menyaring latar belakang, dan dapat digunakan seperti gambar PNG. Video menggantikan animasi, dan kemudian mendukung efek topeng latar belakang, yang dapat mengungkapkan gambar dasar, dan juga memecahkan masalah layar manual, otomatis, dan tidak lengkap
jendela iphone
Solusi: Gabungkan pemrosesan melalui kanvas + tag video
Prinsip: Dapatkan bingkai gambar asli dari video dan gambar ke halaman melalui kanvas
Di sini saya langsung melampirkan kode sumber, kode tersebut ditulis secara umum, tetapi menyoroti beberapa poin utama
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Video alih-alih animasi
Ini agak merepotkan. Ini harus interaktif dan seret kanvas untuk mencapai tujuan mengontrol gambar. Saya belum selesai menulis semuanya, dan kebutuhan umum perusahaan tidak akan memiliki ini. Berikut adalah penjelasan singkatnya, itu juga diproses oleh kanvas + video, tetapi wadah kanvas yang di-cache diperlukan untuk melakukan pra-pemrosesan. Melalui preprocessing, didapatkan piksel dari setiap gambar, dan dengan mengubah nilai RBG setiap piksel, maka dapat menyaring latar belakang, sehingga dapat digunakan seperti gambar PNG. Saya akan menulisnya nanti dan menerbitkannya ~~
produk kami yang lain:
