Ostatnio badamy użycie wideo zamiast animacji i wideo zamiast animacji duszków. Ten rodzaj wideo nazywamy interaktywnym wideo.
Tradycyjna animacja sprite: duża przestrzeń dyskowa, powolne pobieranie, zwłaszcza odtwarzanie online, będzie wolniejsze
Zbyt wiele plików, zbyt wiele żądań HTTP podczas gry online spowoduje powolną reakcję lub nieprawidłowe zachowanie. Dlatego istnieje pilna potrzeba opracowania zestawu technologii zastępujących animację sprite’ów wideo. Nazywamy ten rodzaj wideo interaktywnym wideo
Problemy z tradycyjnym wideo:
1. Można grać tylko na obszarze o kształcie kwadratu
2. Pod iPadem jest to okno do gry, a pod iPhonem można grać tylko na pełnym ekranie.
3. Podczas grania na pewno pojawi się na pierwszym planie
Wideo interaktywne ma następujące cechy:
Pod iPhone'em odtwarzanie na pełnym ekranie nie jest wymagane, można je odtwarzać w jednym obszarze
Wideo interaktywne może pojawić się pod zwykłymi obiektami graficznymi
Interaktywne wideo może mieć maskę, dzięki czemu można usunąć tło wideo i zintegrować wideo ze zwykłymi obiektami graficznymi
Podsumowanie: W przypadku wideo używanego do odtwarzania ustawimy je jako tradycyjne wideo. W przypadku filmów, które muszą być używane do określonych celów, ustawiamy je jako filmy interaktywne. Badania przyniosły wstępne wyniki. Nawiasem mówiąc, podsumowuje rzeczywiste problemy napotkane w rozwoju audio i wideo mobilnego H5 w ciągu najbliższych kilku lat i podaje własne rozwiązania. Zobacz rzeczywisty efekt końcowy: kompatybilność z PC (>IE9), iPhonem, iPadem, Androidem 5.0
Rozwiąż problemy z ręcznym, automatycznym i okienkowym na iPhonie i może w zasadzie do wykorzystania w rzeczywistej produkcji. Po prawej stronie znajduje się oryginalny plik wideo MP4, wideo po lewej zastępuje animację, a następnie obsługuje efekt maski tła, może ujawnić mapę bazową i obsługuje szereg interaktywnych operacji
Dźwięk H5
Za każdym razem, gdy obiekt audio przechodzi przez nowy Audio, w systemie IOS można zobaczyć nowy wątek.
Rozwiązanie: Nowy obiekt audio, zastępując różne adresy audio, pozwala osiągnąć cel, jakim jest nieotwieranie kolejnych wątków.
Wsparcie nie jest dobre na Androidzie
Rozwiązanie: Problem w niższej wersji Androida nie został rozwiązany. Ogólnie rzecz biorąc, programowanie mieszane można obsłużyć, dostosowując podstawowy interfejs, taki jak luka telefoniczna
Nie można odtwarzać automatycznie na iPhonie
Rozwiązanie: Automatyczne odtwarzanie na iPhonie to proces wykonywany podczas projektowania systemu IOS. Wydaje się, że ma to na celu zapobieganie automatycznej kradzieży ruchu.
Mówiąc najprościej, musi zostać uruchomiony ręcznie, symulując użytkownika, więc musimy wywołać ten fragment kodu na samym początku:
Skopiuj kod
//Napraw problem polegający na tym, że przeglądarka ios nie może automatycznie odtwarzać dźwięku. Twórz nowy dźwięk podczas ładowania i zastępuj src podczas korzystania z niego.
Xut.fix = Xut.fix||{};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = fałsz
var fixaudio = funkcja() {
if (!jestAudio) {
isAudio = prawda;
Xut.fix.audio = nowy dźwięk();
document.removeEventListener('touchstart', fixaudio, false);
}
};
document.addEventListener('touchstart', fixaudio, false);
}
Skopiuj powyższy kod
Jeśli powiążesz taki kod z treścią: utwórz obiekt audio, uruchamiając go ręcznie, a następnie zapisz go w pliku global
Podczas używania w następujący sposób:
Skopiuj kod
//Jeśli używasz Xut.fix.audio do określenia src dla przeglądarki ios, zapoznaj się z app.js w celu inicjalizacji
if (Xut.fix.audio) {
audio
=
Xut.fix.audio;
audio.źródło = adres URL;
} Else {
dźwięk = nowy dźwięk (adres URL);
}
audio.autoodtwarzanie = prawda;
audio.odtwórz();
Po prostu wymień obiekt audio. Mówiąc najprościej, musi to być obiekt utworzony przez wyzwalacza użytkownika, aby odtworzyć.
Dźwięk wideo H5
Tagi wideo mogą być rzadko używane na terminalu mobilnym, obsługa Androida jest kiepska, wizualnie 5.0 jest lepsza. Stary problem na iPhonie nie może być odtwarzany automatycznie (Zapisz dane, uratuj swoją siostrę!!!), a domyślną opcją jest sterowanie na pełnym ekranie. Przez długi czas ignorowałem to przetwarzanie wideo. Android używa dolnej warstwy, iPhone bezpośrednio używa VideoJS, wbudowanej lampy błyskowej i przełącznika h5, flash również ma problemy z obsługą. Jakiś czas temu szef miał żądanie. Zastosowaliśmy zbyt wiele animacji, wszystkie były połączonymi animacjami tras duszków, od setek megabajtów do setek megabajtów w ramach jednej aplikacji, dlatego istnieje pilna potrzeba rozwiązania do kompresji obrazów. Ostatecznym rozwiązaniem jest użycie wideo zamiast animacji, ponieważ technologia kompresji wideo jest rozwijana od wielu lat i jest bardzo dojrzała. Teraz technologia kompresji wideo może z łatwością konwertować 720P. Filmy w wysokiej rozdzielczości, skompresowane do 10M/min lub 160K/s. Rozmiar pliku sekwencji obrazów jest co najmniej kilkadziesiąt razy mniejszy. Jednocześnie większość urządzeń obsługuje sprzętową dekompresję wideo, dzięki czemu zużycie procesora podczas odtwarzania wideo jest bardzo niskie, zużycie baterii jest również bardzo niskie, a prędkość odtwarzania jest również duża. Można łatwo uzyskać nawet pełnoekranowe odtwarzanie 25 klatek.
Plan jest sfinalizowany, a kilka problemów do rozwiązania jest tutaj.
Cały film, w tym niektóre obiekty w filmie, może reagować na kliknięcia użytkownika, slajdy i inne operacje na iPhonie, może być odtwarzany w oknie, może filtrować tło i może być używany jak obraz PNG. Wideo zastępuje animację, a następnie obsługuje efekt maski tła, który może ujawnić obraz podstawowy, a także rozwiązuje problem ręcznego, automatycznego i niepełnego ekranu
okienkowanie iPhone'a
Rozwiązanie: Połącz przetwarzanie za pomocą płótna i tagów wideo
Zasada: Pobierz oryginalną ramkę obrazu wideo i narysuj ją na stronie za pomocą canavs
Tutaj bezpośrednio załączam kod źródłowy, kod jest ogólnie napisany, ale podkreśla kilka kluczowych punktów
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Wideo zamiast animacji
Jest to trochę uciążliwe. Musi być interaktywny i przeciągać płótno, aby osiągnąć cel kontrolowania obrazu. Nie skończyłem jeszcze pisać tego wszystkiego, a ogólne potrzeby firmy nie będą tego miały. Oto krótki opis, jest również przetwarzany przez płótno + wideo, ale buforowany kontener płótna jest wymagany do wykonania wstępnego przetwarzania. Dzięki wstępnemu przetwarzaniu uzyskaj piksele każdego obrazu, a zmieniając wartość każdego piksela RBG, może odfiltrować tło, dzięki czemu można go używać jak obrazu PNG. Napiszę to później i opublikuję~~
Nasze inne produkty:
