Подробное объяснение проблем и решений мобильных аудио и видео HTML5.

В последнее время мы изучаем использование видео для замены анимации, а также использование видео для замены спрайтовой анимации. Мы называем этот вид видео интерактивным видео.

1. Большое дисковое пространство, медленная загрузка, особенно онлайн-воспроизведение, будет еще медленнее.
2. Слишком много файлов. При онлайн-игре слишком большое количество HTTP-запросов приведет к медленному ответу или ненормальному поведению.

Поэтому существует острая необходимость разработки комплекса технологий замены спрайтовой анимации видео. Мы называем такое видео интерактивным видео.

1. Традиционные видео можно воспроизводить только в квадратной зоне.
2. Традиционные видеоролики на iPad воспроизводятся в окне, а на iPhone их можно воспроизводить только в полноэкранном режиме.
3. Традиционные видеоролики обязательно будут появляться впереди при воспроизведении.

1. Под iPhone нет необходимости играть на весь экран, можно играть в регионе
2. Интерактивные видеоролики могут появляться под обычными графическими объектами.
3. Интерактивные видео можно замаскировать, при этом фон видео удаляется и видео смешивается с обычными графическими объектами.

Исследования поначалу дали результаты. Кстати, я обобщу практические проблемы, возникшие в области аудио и видео в ходе разработки мобильного H5 за последние несколько лет, и приведу собственные решения.

Взгляните на окончательный фактический эффект: совместимость с ПК (>IE9), iPhone, iPad, Android 5.0.

Он решает проблемы ручного, автоматического, оконного управления и т. д. на iPhone и может быть использован в реальном производстве.

Справа — оригинальный видеофайл в формате mp4.

Видео слева заменяет анимацию и поддерживает эффект маски фона, который может раскрывать базовое изображение и поддерживать ряд интерактивных операций.

Каждый раз, когда аудиообъект передается через новый Audio, вы можете видеть, что в IOS создается новый поток. Это отвратительно.

Решение. Используйте новый объект Audio, чтобы не открывать больше потоков путем замены разных аудиоадресов.

Решение. Проблема в более ранних версиях Android не решена. Как правило, при гибридной разработке можно настроить базовый интерфейс, например телефонную связь.

Решение: автоматическое воспроизведение на iPhone — это процесс, реализованный при разработке IOS. Похоже, он предназначен для предотвращения автоматической кражи трафика.

Проще говоря, вам нужно смоделировать пользователя, чтобы он активировал его вручную, поэтому нам нужно вызвать этот фрагмент кода в начале:

Это из моего проекта, я его просто вычел.

 //Решаем проблему, связанную с тем, что браузер iOS не может автоматически воспроизводить звук. Создайте новый звук при загрузке и замените src при его использовании. Xut.fix = Xut.fix||{};if (Xut.plat.isBrowser && Xut. plat. isIOS) {вар isAudio = ложь вар fixaudio = функция () { если (!isAudio) { isAudio = true; document.removeEventListener('touchstart', fixaudio, false); } }; document.addEventListener('touchstart', fixaudio, false);}

Если привязать такой код к телу: создать аудиообъект посредством ручного запуска, а затем сохранить его в глобальном

При использовании это происходит следующим образом

 //Если вы используете Xut.fix.audio для указания инициализации src для браузера iOS, см. app.jsif (Xut.fix.audio) { audio = Xut.fix.audio; audio.src = url;} else { audio = new Audio(url);}audio.autoplay = true;audio.play();

Просто замените аудиообъект напрямую. Проще говоря, если он должен создаваться автоматически, он должен быть объектом, запущенным пользователем, прежде чем его можно будет воспроизвести.

Тег видео может редко использоваться на мобильных устройствах. Поддержка Android ужасна. В версии 5.0 она улучшилась.

Старая проблема iPhone заключается в том, что он не может воспроизводиться автоматически (сохраните данные, спасите сестру!!!), а по умолчанию установлено полноэкранное управление воспроизведением.

Долгое время я игнорировал эту обработку видео. Android использует нижний уровень, а iPhone напрямую использует VideoJS. У него есть встроенный Flash, и у Flash также есть проблемы с поддержкой.

Некоторое время назад у моего начальника был запрос. У нас слишком много анимаций приложений, каждая из которых представляет собой комбинацию анимаций маршрутов спрайтов. Размер одного приложения может варьироваться от сотен до сотен мегабайт.

Поэтому существует острая необходимость в решении для сжатия изображений.

Окончательное решение — использовать видео вместо анимации, поскольку технология сжатия видео разрабатывалась в течение многих лет и стала очень зрелой. Современная технология сжатия видео позволяет легко сжимать фильмы высокой четкости 720P до 10 М/мин или 160 К/с. Он как минимум в десятки раз меньше размера файла последовательности изображений. В то же время большинство устройств поддерживают аппаратную распаковку видео. Таким образом, потребление процессора при воспроизведении видео очень низкое, расход заряда батареи также очень низкий, а скорость воспроизведения по-прежнему высокая. Можно легко добиться даже полноэкранного воспроизведения с частотой 25 кадров.

После завершения разработки плана необходимо решить несколько проблем.

1. Все видео, включая определенные объекты в видео, может реагировать на клики, слайды и другие действия пользователя.

2. Под iPhone можно играть в окне.

3. Возможность отфильтровать фон, чтобы его можно было использовать как изображение PNG.

Окончательный эффект также показан в начальной gif-анимации:

Видео заменяет анимацию и поддерживает эффект маскировки фона, который может раскрыть базовое изображение.

В то же время это также решило проблему ручного, автоматического и не полноэкранного режима.

Решение:

Обрабатывается с помощью комбинации холста и тега видео.

Принцип: Получите исходный кадр видео и нарисуйте его на странице через canav.

Здесь непосредственно прикрепляю исходники. Код в целом написан, но выделено несколько ключевых моментов.

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

Это немного хлопотно. Вам нужно взаимодействовать и перетаскивать холст, чтобы управлять изображением. Я еще не закончил писать все это. Это простое описание. видео, но для этого требуется кэшированный контейнер холста для предварительной обработки. Благодаря предварительной обработке получаются пиксели каждого изображения. Изменяя значение RBG каждого пикселя, фон можно отфильтровать, чтобы его можно было использовать как PNG. image В будущем Написано, опубликуем~~.

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.