Son zamanlarda, sprite animasyonu yerine animasyon ve video yerine video kullanımı üzerinde çalışıyoruz. Bu tür video etkileşimli video diyoruz.
Geleneksel sprite animasyonu: geniş disk alanı, yavaş indirme, özellikle çevrimiçi oynatma daha yavaş olacaktır
Çevrimiçi oynarken çok fazla dosya, çok fazla http isteği, yavaş yanıtlara veya anormal davranışlara neden olur. Bu nedenle, sprite animasyonunu videoyla değiştirmek için bir dizi teknoloji geliştirilmesine acil ihtiyaç vardır. Bu tür videolara interaktif video diyoruz
Geleneksel videoyla ilgili sorunlar:
1. Sadece kare şeklinde bir alanda oynanabilir
2. iPad'in altında, oynatmak için bir penceredir ve iPhone'un altında yalnızca tam ekranda oynatılabilir.
3. Oynarken kesinlikle ön planda görünecek
Etkileşimli video aşağıdaki özelliklere sahiptir:
İPhone altında tam ekran oynatma gerekli değildir, tek bir alanda oynatılabilir
Etkileşimli video, sıradan grafik nesnelerinin altında görünebilir
Etkileşimli videonun bir maskesi olabilir, böylece videonun arka planı kaldırılabilir ve video ile sıradan grafik nesneleri entegre edilebilir
Özet: Oynatmak için kullanılan videoyu geleneksel bir video olarak ayarlayacağız. Belirli amaçlar için kullanılması gereken videolar için onları etkileşimli videolar olarak ayarlıyoruz. Araştırma, ön sonuçlar verdi. Bu arada mobil H5'in ses ve görüntü geliştirmesinde önümüzdeki birkaç yıl içinde karşılaşılan gerçek sorunları özetlemekte ve kendi çözümlerini sunmaktadır. Son gerçek etkiye bir göz atın: PC (>IE9), iphone, ipad, Android 5.0 ile uyumlu
iPhone'da manuel, otomatik ve pencereleme sorunlarını çözün; temelde gerçek üretimde kullanılabilir. Sağda orijinal video mp4 dosyası var, soldaki video animasyonun yerini alıyor ve ardından arka plan maskesi efektini destekliyor, temel haritayı ortaya çıkarabilir ve bir dizi etkileşimli işlemi destekler
H5 ses
Bir ses nesnesi yeni Sesten her geçtiğinde, IOS üzerinde yeni bir iş parçacığı görülebilir.
Çözüm: Yeni bir Ses nesnesi, farklı ses adreslerini değiştirerek daha fazla iş parçacığı açmama hedefine ulaşır.
Android'de destek iyi değil
Çözüm: Android'in alt sürümündeki sorun çözülmedi. Genel olarak, karma geliştirme, telefon aralığı gibi temel arayüz ayarlanarak ele alınabilir.
İPhone'da otomatik olarak oynatılamıyor
Çözüm: iPhone'da otomatik oynatma, IOS tasarlandığında yapılan bir işlemdir. Otomatik trafik hırsızlığını önlemek gibi görünüyor.
Basitçe söylemek gerekirse, kullanıcıyı simüle ederek manuel olarak tetiklenmesi gerekiyor, bu nedenle en başta bu kod parçasını çağırmamız gerekiyor:
Kodu kopyala
// ios tarayıcısının otomatik olarak ses çalamaması sorununu düzeltin. Src'yi yüklerken yeni ses oluşturun ve kullanırken değiştirin.
Xut.fix = Xut.fix || {};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = yanlış
var fixaudio = function () {
eğer (! isAudio) {
isAudio = doğru;
Xut.fix.audio = yeni Ses ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Yukarıdaki kodu kopyalayın
Böyle bir kodu gövdeye bağlarsanız: manuel olarak tetikleyerek bir ses nesnesi oluşturun ve ardından bunu global olarak kaydedin.
Aşağıdaki gibi kullanıldığında:
Kodu kopyala
// ios tarayıcısı için src belirtmek üzere Xut.fix.audio kullanıyorsanız, lütfen başlatma için app.js'ye bakın
eğer (Xut.fix.audio) {
ses
=
Xut.fix.ses;
ses.src = url;
} Else {
ses = yeni Ses (url);
}
audio.autoplay = doğru;
audio.play ();
Ses nesnesini değiştirmeniz yeterlidir. Basitçe söylemek gerekirse, oynatmak için kullanıcı tetikleyicisi tarafından oluşturulan nesne olmalıdır.
H5 video sesi
Video etiketleri mobil terminalde nadiren kullanılabilir, Android desteği çok kötü, görsel olarak 5.0 daha iyidir. İPhone'daki eski sorun otomatik olarak oynatılamaz (Verileri kaydedin, kız kardeşinizi kaydedin !!!) ve oynatmak için varsayılan tam ekran kontrolüdür. Uzun süre bu video işlemeyi görmezden geldim. Android alt katmanı kullanıyor, iPhone doğrudan VideoJS, dahili flaş ve h5 anahtarını kullanıyor, flaşta da destek sorunları var. Bir süre önce patronun bir talebi vardı. Çok fazla animasyon uyguladık, hepsi tek bir uygulama altında yüzlerce megabayttan yüzlerce megabayta kadar değişen sprite rotalarının birleştirilmiş animasyonlarıydı, bu nedenle görüntüleri sıkıştırmak için acil bir çözüme ihtiyaç var. Nihai çözüm, animasyon yerine video kullanmaktır, çünkü video sıkıştırma teknolojisi uzun yıllardır geliştirilmiştir ve çok olgunlaşmıştır. Artık video sıkıştırma teknolojisi 720P'yi kolayca dönüştürebilir. 10M / dak veya 160K / sn'ye sıkıştırılmış yüksek tanımlı filmler. Görüntü dizisinin dosya boyutu en az on kat daha küçüktür. Aynı zamanda, çoğu cihaz videonun donanım olarak açılmasını destekler, böylece video oynatmanın CPU tüketimi çok düşüktür, pil tüketimi de çok düşüktür ve oynatma hızı da hızlıdır. 25 karelik tam ekran oynatımı bile kolayca gerçekleştirilebilir.
Plan tamamlandı ve çözülmesi gereken birkaç sorun burada.
Videodaki bazı nesneler de dahil olmak üzere videonun tamamı, iPhone altındaki kullanıcı tıklamalarına, slaytlara ve diğer işlemlere yanıt verebilir, bir pencerede oynatılabilir, arka planı filtreleyebilir ve bir PNG görüntüsü gibi kullanılabilir. Video, animasyonun yerini alır ve ardından temel görüntüyü ortaya çıkarabilen arka plan maskesi efektini destekler ve ayrıca manuel, otomatik ve eksik ekran sorununu çözer.
iphone pencereleme
Çözüm: İşlemeyi canvas + video etiketleri aracılığıyla birleştirin
İlke: Videonun orijinal resim çerçevesini alın ve kanavlar aracılığıyla sayfaya çizin
Burada doğrudan kaynak kodunu ekliyorum, kod genel olarak yazılıyor, ancak birkaç önemli noktayı vurguluyor
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Animasyon yerine video
Bu biraz külfetli. Görüntüyü kontrol etme amacına ulaşmak için etkileşimli olması ve tuvali sürüklemesi gerekir. Henüz hepsini yazmayı bitirmedim ve genel şirket ihtiyaçları buna sahip olmayacak. İşte kısa bir açıklama, aynı zamanda canvas + video tarafından da işlenir, ancak ön işleme yapmak için önbelleğe alınmış bir tuval kapsayıcı gerekir. Ön işleme yoluyla, her resmin piksellerini elde edin ve her piksel RBG'nin değerini değiştirerek arka planı filtreleyebilir, böylece bir PNG görüntüsü gibi kullanılabilir. Daha sonra yazacağım ve yayınlayacağım ~~
Bizim diğer ürün:
