Son zamanlarda animasiya əvəzinə videonun, sprite animasiyası əvəzinə videonun istifadəsini araşdırırıq. Bu cür videolara interaktiv video deyirik.
Ənənəvi sprite animasiyası: geniş disk sahəsi, yavaş yükləmə, xüsusən də onlayn səsləndirmə daha yavaş olacaq
Onlayn oynayarkən çox sayda fayl, çox http istəyi yavaş reaksiya və ya anormal davranışa səbəb olacaq. Buna görə də, sprite animasiyasının video ilə əvəzlənməsi üçün bir sıra texnologiya inkişaf etdirilməsinə ehtiyac var. Bu cür videolara interaktiv bir video deyirik
Ənənəvi video ilə bağlı problemlər:
1. Yalnız kvadrat şəkilli bir yerdə oynanmaq olar
2. iPad-in altında oynamaq üçün bir pəncərədir və iPhone-un altında yalnız tam ekranda oynana bilər.
3. Oynayanda mütləq ön planda görünəcək
İnteraktiv video aşağıdakı xüsusiyyətlərə malikdir:
IPhone-un altında tam ekran oynatma tələb olunmur, bir sahədə oynanmaq olar
İnteraktiv video adi qrafik obyektlərin altında görünə bilər
İnteraktiv videonun maskası ola bilər, beləliklə videonun arxa planı silinə bilər və video ilə adi qrafik obyektləri birləşdirilə bilər.
Xülasə: Oynamaq üçün istifadə olunan video üçün ənənəvi bir video olaraq təyin edəcəyik. Xüsusi məqsədlər üçün istifadə edilməsi lazım olan videolar üçün onları interaktiv videolar olaraq təyin edirik. Tədqiqat ilkin nəticələr verib. Yeri gəlmişkən, mobil H5-in yaxın bir neçə ildə səs və video inkişafında rast gəlinən aktual problemləri ümumiləşdirir və öz həll yollarını təqdim edir. Son faktiki effektə nəzər yetirin: PC (> IE9), iphone, ipad, Android 5.0 ilə uyğundur
IPhone-da əl, avtomatik və pəncərə açma problemlərini həll edin və həll edə bilər əsasən faktiki istehsalda istifadə olunur. Sağda orijinal video mp4 faylı var, soldakı video animasiyanı əvəz edir və sonra arxa plan maskası effektini dəstəkləyir, əsas xəritəni aça bilər və bir sıra interaktiv əməliyyatları dəstəkləyir
H5 səs
Hər dəfə bir səs obyekti yeni Səsdən ötürüldükdə, IOS-da yeni bir mövzu görünə bilər.
Çözüm: Yeni bir səs obyekti, fərqli səs ünvanlarını dəyişdirərək daha çox mövzu açmamaq məqsədinə çatır.
Android-də dəstək yaxşı deyil
Həll: Androidin aşağı versiyasında problem həll olunmur. Ümumiyyətlə, qarışıq inkişaf, telefon boşluğu kimi əsas interfeysi tənzimləməklə həll edilə bilər
IPhone-da avtomatik oxutmaq olmur
Çözüm: iPhone'dakı avtomatik oxutma, IOS dizayn edildiyi zaman edilən bir prosesdir. Trafikin avtomatik oğurlanmasının qarşısını almaq üçün görünür.
Sadəcə olaraq, istifadəçini simulyasiya edərək əl ilə işə salmaq lazımdır, buna görə bu kod parçasını ən əvvəl çağırmalıyıq:
Kodu kopyalayın
// iOS brauzerinin avtomatik olaraq səs oxuya bilməyəcəyi problemi həll edin. Yüklənərkən yeni səs yaradın və istifadə edərkən src-i dəyişdirin.
Xut.fix = Xut.fix || {};
əgər (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = yalan
var fixaudio = function () {
əgər (! isAudio) {
isAudio = doğru;
Xut.fix.audio = yeni Səs ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Yuxarıdakı kodu kopyalayın
Bədənə belə bir kodu bağlayırsınızsa: əl ilə tetikleyerek bir audio obyekt yaradın və sonra qlobal olaraq qeyd edin
Aşağıdakı kimi istifadə edildikdə:
Kodu kopyalayın
// iOS brauzeri üçün src təyin etmək üçün Xut.fix.audio istifadə edirsinizsə, başlanğıc üçün app.js-ə müraciət edin
əgər (Xut.fix.audio) {
audio
=
Xut.fix.audio;
audio.src = url;
} Else {
audio = yeni Səs (url);
}
audio.autoplay = doğru;
audio.play ();
Sadəcə səs obyektini dəyişdirin. Sadəcə olaraq, istifadəçinin tətikləməsi üçün yaratdığı obyekt olmalıdır.
H5 video səsi
Video etiketləri mobil terminalda nadir hallarda istifadə edilə bilər, Android dəstəyi çox pisdir, əyani olaraq 5.0 daha yaxşıdır. IPhone-dakı köhnə problem avtomatik olaraq səsləndirilə bilməz (Verileri saxla, bacını saxla !!!) və oynanmaq üçün tam ekran nəzarəti. Uzun müddət bu videonun işlənməsinə məhəl qoymadım. Android alt qatdan istifadə edir, iPhone birbaşa VideoJS-dən istifadə edir, quraşdırılmış flaş və h5 açarı, flaşın da dəstək problemi var. Bir müddət əvvəl patronun bir tələbi var idi. Həddindən artıq animasiya tətbiq etdik, hamısı bir tətbiq altında yüz meqabaytdan yüz meqabayta qədər olan sprite marşrutlarının birləşdirilmiş animasiyaları idi, buna görə də şəkilləri sıxmaq üçün təcili bir həll yolu lazımdır. Son həll animasiya əvəzinə videodan istifadə etməkdir, çünki uzun illərdir video sıxılma texnologiyası inkişaf etmişdir və çox yetkin olmuşdur. İndi video sıxılma texnologiyası 720P-ni asanlıqla çevirə bilər. 10M / dəq və ya 160K / saniyəyə qədər sıxılmış yüksək keyfiyyətli filmlər. Şəkil ardıcıllığının fayl ölçüsü ən azı on dəfə kiçikdir. Eyni zamanda, əksər cihazlar videonun hardware dekompressiyasını dəstəkləyir, beləliklə video oynatmanın CPU istehlakı çox azdır, batareya istehlakı da çox azdır və oxutma sürəti də sürətli olur. 25 karelik tam ekran oynatma belə asanlıqla əldə edilə bilər.
Plan tamamlandı və həll ediləcək bir neçə problem burada.
Videodakı bəzi obyektlər daxil olmaqla bütün video, istifadəçi kliklərinə, slaydlara və iPhone altındakı digər əməliyyatlara cavab verə bilər, bir pəncərədə oynana bilər, arxa planı süzə bilər və PNG şəkli kimi istifadə edilə bilər. Video animasiyanı əvəz edir və sonra əsas görüntüyü ortaya çıxara bilən arxa plan maskası effektini dəstəkləyir və eyni zamanda manuel, avtomatik və natamam ekran problemini həll edir
iphone pəncərəsi
Həlli: kətan + video etiketləri ilə emalı birləşdirin
Prinsip: Videonun orijinal şəkil çərçivəsini əldə edin və kanavlar vasitəsilə səhifəyə çəkin
Burada birbaşa mənbə kodunu əlavə edirəm, kod ümumiyyətlə yazılır, ancaq bir neçə əsas məqamı vurğulayır
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Animasiya yerinə video
Bu bir az ağırdır. İnteraktiv olmalı və görüntüyü idarə etmək məqsədinə çatmaq üçün kətanı sürükləməlidir. Hələ hamısını yazmağı bitirməmişəm və ümumi şirkət ehtiyacları belə olmayacaq. Budur qısa bir təsvir, həm də kətan + video ilə işlənir, ancaq əvvəlcədən işləmə üçün önbelleğe alınmış bir kətan konteynerinə ehtiyac var. Əvvəlcədən işləmə yolu ilə hər şəkilin piksellərini əldə edin və hər piksel RBG-nin dəyərini dəyişdirərək arxa planı süzgəcdən keçirə bilərsiniz, beləliklə PNG şəkli kimi istifadə oluna bilər. Daha sonra yazıb yayımlayacağam ~~
Bizim digər məhsul:
