Penjelasan mendetail tentang masalah dan solusi audio dan video HTML5 seluler

Baru-baru ini kami mempelajari penggunaan video untuk menggantikan animasi, dan penggunaan video untuk menggantikan animasi sprite. Kami menyebutnya video interaktif.

1. Ruang disk yang besar, pengunduhan yang lambat, terutama pemutaran online, akan menjadi lebih lambat
2. Ada terlalu banyak file. Saat bermain online, terlalu banyak permintaan http akan menyebabkan respons lambat atau perilaku tidak normal.

Oleh karena itu, terdapat kebutuhan mendesak untuk mengembangkan serangkaian teknologi untuk menggantikan animasi sprite dengan video. Kami menyebut video semacam ini sebagai video interaktif

1. Video tradisional hanya dapat diputar di area persegi
2. Video tradisional diputar di jendela di iPad, tetapi di iPhone hanya dapat diputar dalam layar penuh.
3. Video tradisional pasti akan muncul paling depan saat diputar.

1. Di iPhone, tidak perlu bermain dalam layar penuh, Anda bisa bermain di suatu wilayah
2. Video interaktif dapat muncul di bawah objek grafis biasa
3. Video interaktif dapat disamarkan, yang menghilangkan latar belakang video dan memadukan video dengan objek grafis biasa.

Penelitian awalnya membuahkan hasil. Ngomong-ngomong, saya akan merangkum masalah praktis yang dihadapi dalam audio dan video selama pengembangan ponsel H5 dalam beberapa tahun terakhir dan memberikan solusi saya sendiri.

Lihatlah efek akhir sebenarnya: kompatibel dengan PC (>IE9), iPhone, iPad, Android 5.0

Ini memecahkan masalah manual, otomatis, windowing, dll. di iPhone, dan pada dasarnya dapat digunakan dalam produksi sebenarnya.

Di sebelah kanan adalah file mp4 video asli

Video di sebelah kiri menggantikan animasi dan mendukung efek topeng latar belakang, yang dapat menampilkan gambar dasar dan mendukung serangkaian operasi interaktif.

Setiap kali objek audio dilewatkan melalui Audio baru, Anda dapat melihat bahwa thread baru akan dibuat di iOS. Ini menjijikkan.

Solusi: Gunakan objek Audio baru untuk mencapai tujuan tidak membuka lebih banyak thread dengan mengganti alamat audio yang berbeda.

Solusi: Masalah pada versi Android yang lebih rendah tidak terpecahkan. Umumnya, dalam pengembangan hybrid, antarmuka yang mendasarinya dapat disesuaikan, seperti phonegap.

Solusi: Pemutaran otomatis di iPhone adalah proses yang dilakukan saat iOS dirancang untuk mencegah pencurian lalu lintas secara otomatis.

Sederhananya, Anda perlu menyimulasikan pengguna untuk memicunya secara manual, jadi kita perlu memanggil potongan kode ini di awal:

Ini dari proyek saya, saya potong saja.

 //Perbaiki masalah browser ios tidak dapat memutar audio secara otomatis. Buat audio baru saat memuat dan ganti src saat menggunakannya. plat.isIOS) { var isAudio = false var fixaudio = function() { if (!isAudio) { isAudio = benar; Xut.fix.audio = Audio baru(); document.removeEventListener('touchstart', fixaudio, false);}

Jika Anda mengikat kode seperti itu ke badan: buat objek audio melalui pemicuan manual, lalu simpan di global

Cara menggunakannya adalah sebagai berikut

 //Jika Anda menggunakan Xut.fix.audio untuk menentukan inisialisasi src untuk browser ios, lihat app.jsif (Xut.fix.audio) { audio = Xut.fix.audio;} else { audio = new Audio(url );}audio.autoplay = true;audio.play();

Langsung saja ganti objek audionya, Sederhananya, jika ingin dibuat secara otomatis, objek tersebut harus dipicu oleh pengguna sebelum dapat diputar.

Tag video mungkin jarang digunakan di perangkat seluler. Dukungan Android sangat buruk.

Masalah lama di iPhone adalah tidak dapat diputar secara otomatis (simpan data, selamatkan adikmu!!!), dan defaultnya adalah pemutaran kontrol layar penuh

Untuk waktu yang lama, saya mengabaikan pemrosesan video ini. Android menggunakan lapisan bawah, dan iPhone menggunakan VideoJS secara langsung. Ia memiliki flash bawaan dan peralihan h5.

Beberapa waktu yang lalu bos saya punya permintaan. Kami memiliki terlalu banyak animasi aplikasi, yang semuanya merupakan animasi kombinasi rute sprite. Satu aplikasi bisa berukuran ratusan megabita hingga ratusan megabita.

Jadi ada kebutuhan mendesak akan solusi untuk mengompres gambar

Solusi terakhir adalah menggunakan video daripada animasi, karena teknologi kompresi video telah dikembangkan selama bertahun-tahun dan sudah sangat matang. Teknologi kompresi video saat ini dapat dengan mudah mengompresi film definisi tinggi 720P menjadi 10M/menit, atau 160K/detik. Setidaknya puluhan kali lebih kecil dari ukuran file urutan gambar. Pada saat yang sama, sebagian besar perangkat mendukung dekompresi video secara perangkat keras. Dengan cara ini, konsumsi CPU untuk pemutaran video sangat rendah, konsumsi baterai juga sangat rendah, dan kecepatan pemutaran masih cepat. Bahkan pemutaran layar penuh pada 25 frame dapat dicapai dengan mudah.

Setelah rencana selesai, beberapa masalah perlu diselesaikan.

1. Seluruh video, termasuk objek tertentu dalam video, dapat merespons klik pengguna, slide, dan operasi lainnya.

2. Di iPhone, Anda dapat bermain di jendela

3. Kemampuan memfilter background agar dapat digunakan seperti gambar PNG

Efek akhir sebenarnya juga ditampilkan di animasi gif awal:

Video menggantikan animasi dan mendukung efek penyembunyian latar belakang, yang dapat menampilkan gambar dasar.

Pada saat yang sama, ini juga memecahkan masalah manual, otomatis dan bukan layar penuh.

Larutan:

Diproses melalui kombinasi tag kanvas + video

Prinsip: Dapatkan bingkai asli video dan gambarkan ke halaman melalui canavs

Di sini saya langsung melampirkan kode sumbernya. Kode tersebut umumnya tertulis, tetapi ada beberapa poin penting yang disorot.

http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser

Ini agak merepotkan. Anda perlu berinteraksi dan menyeret kanvas untuk mengontrol gambar. Saya belum selesai menulis semuanya. Kebutuhan umum perusahaan tidak akan memiliki ini. Ini juga diproses oleh kanvas + video, tetapi memerlukan wadah kanvas cache untuk prapemrosesan. Melalui prapemrosesan, piksel setiap gambar diperoleh. Dengan mengubah nilai RBG setiap piksel, latar belakang dapat disaring, sehingga dapat digunakan seperti PNG image. Nanti sudah tertulis, ayo publikasikan~~

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.