Нещодавно ми вивчаємо використання відео замість анімації та відео замість анімації спрайтів. Цей тип відео ми називаємо інтерактивним відео.
Традиційна анімація спрайтів: великий простір на диску, повільне завантаження, особливо онлайн-відтворення, буде повільнішим
Забагато файлів, занадто багато запитів http під час гри в Інтернеті спричинять повільну реакцію або ненормальну поведінку. Тому існує нагальна потреба у розробці набору технологій, які замінюють спрайт-анімацію відео. Ми називаємо цей тип відео інтерактивним відео
Проблеми з традиційним відео:
1. Можна грати лише на ділянці квадратної форми
2. Під iPad це вікно для відтворення, а під iPhone його можна відтворювати лише на весь екран.
3. Під час гри він точно з’явиться на передньому плані
Інтерактивне відео має такі характеристики:
Під iPhone повноекранне відтворення не потрібно, його можна відтворювати в одній області
Інтерактивне відео може з’являтися під звичайними графічними об’єктами
Інтерактивне відео може мати маску, так що фон відео може бути видалений, а відео та звичайні графічні об'єкти можуть бути інтегровані
Основна інформація: Для відео, що використовується для відтворення, ми встановимо його як традиційне відео. Для відео, які потрібно використовувати для певних цілей, ми встановлюємо їх як інтерактивні відео. Дослідження дало попередні результати. До речі, він узагальнює фактичні проблеми, з якими стикаються аудіо- та відеорозвиток мобільного H5 у найближчі кілька років, та пропонує власні рішення. Погляньте на остаточний фактичний ефект: сумісний з ПК (> IE9), iphone, ipad, Android 5.0
Вирішіть проблеми ручного, автоматичного та створення вікон на iPhone, і це можливо в основному використовуються у фактичному виробництві. Справа - оригінальний файл mp4 з відео, відео зліва замінює анімацію, а потім підтримує ефект фонової маски, може розкрити базову карту та підтримує серію інтерактивних операцій
Звук H5
Кожного разу, коли аудіооб’єкт проходить через новий аудіо, на IOS можна побачити новий потік.
Рішення: Новий аудіооб’єкт, замінюючи різні аудіо адреси, досягає мети не відкривати більше потоків.
Підтримка погана на Android
Рішення: Проблема нижчої версії Android не вирішена. Як правило, змішану розробку можна впоратись, налаштувавши базовий інтерфейс, такий як фонегап
Не вдається автоматично відтворити на iphone
Рішення: Автоматичне відтворення на iphone - це процес, який виконувався під час розробки IOS. Здається, це запобігання автоматичному розкраданню дорожнього руху.
Простіше кажучи, його потрібно запускати вручну, імітуючи користувача, тому нам потрібно викликати цей фрагмент коду на самому початку:
Скопіюйте код
// Вирішення проблеми, через яку браузер ios не може автоматично відтворювати звук. Створюйте нове аудіо під час завантаження та замінюйте src при його використанні.
Xut.fix = Xut.fix || {};
якщо (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = false
var fixaudio = function () {
if (! isAudio) {
isAudio = істина;
Xut.fix.audio = новий звук ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Скопіюйте код вище
Якщо ви прив'язуєте такий код до тіла: створіть аудіооб'єкт, запускаючи його вручну, а потім збережіть у глобальному
При використанні наступним чином:
Скопіюйте код
// Якщо ви використовуєте Xut.fix.audio, щоб вказати src для браузера ios, зверніться до app.js для ініціалізації
якщо (Xut.fix.audio) {
аудіо
=
Xut.fix.audio;
audio.src = url;
} Ще {
audio = новий звук (url);
}
audio.autoplay = правда;
audio.play ();
Просто замініть звуковий об'єкт. Простіше кажучи, це повинен бути об’єкт, створений користувальницьким тригером для відтворення.
H5 відео аудіо
Відеотеги можуть рідко використовуватися на мобільному терміналі, підтримка Android дуже погана, візуально краще 5.0. Стару проблему на iPhone не можна відтворити автоматично (Збережіть дані, збережіть свою сестру !!!), а за замовчуванням це повноекранне управління. Довгий час я ігнорував цю обробку відео. Android використовує нижній шар, iPhone безпосередньо використовує VideoJS, вбудований спалах та перемикач h5, спалах також має проблеми з підтримкою. Деякий час тому у боса був попит. Ми застосували занадто багато анімацій, усі вони були комбінованою анімацією спрайт-маршрутів, коливаючись від сотень мегабайт до сотень мегабайт під одним додатком, тому існує нагальна потреба у вирішенні стиснення зображень. Остаточне рішення - використовувати відео замість анімації, оскільки технологія стиснення відео розробляється протягом багатьох років і є дуже зрілою. Тепер технологія стиснення відео може легко перетворити 720P. Відео високої чіткості, стиснене до 10 М / хв або 160 К / с. Розмір файлу послідовності зображень принаймні в кілька десятків разів менший. У той же час більшість пристроїв підтримують апаратну декомпресію відео, так що споживання процесора при відтворенні відео дуже низьке, споживання батареї також дуже низьке, а швидкість відтворення також висока. Навіть повноекранне відтворення 25 кадрів можна легко досягти.
План доопрацьовано, і тут є кілька проблем, які потрібно вирішити.
Повне відео, включаючи деякі об'єкти у відео, може реагувати на натискання користувача, слайди та інші операції під iPhone, може відтворюватися у вікні, фільтрувати фон і може використовуватися як зображення PNG. Відео замінює анімацію, а потім підтримує ефект фонової маски, який може розкрити базове зображення, а також вирішує проблему ручного, автоматичного та неповного екрану
iphone вікна
Рішення: Об’єднайте обробку через полотно + відеотеги
Принцип: Отримайте оригінальний кадр зображення відео та намалюйте його на сторінці через канали
Тут я безпосередньо додаю вихідний код, код написаний загалом, але виділяє кілька ключових моментів
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Відео замість анімації
Це трохи громіздко. Він повинен бути інтерактивним і перетягувати полотно, щоб досягти мети управління зображенням. Я ще не закінчив писати все це, і загальні потреби компанії цього не матимуть. Ось короткий опис, він також обробляється canvas + video, але для попередньої обробки потрібен кешований контейнер полотна. Завдяки попередній обробці отримайте пікселі кожного зображення, і, змінивши значення кожного пікселя RBG, він може відфільтрувати фон, щоб його можна було використовувати як зображення PNG. Я напишу це пізніше і опублікую ~~
Наш інший продукт:
