Как сделать видео iOS-приложения

Видео iOS приложения для промо-сайта

как у Рокетбанка

Мобильные приложения динамичны. Скриншоты не могут передать ощущения от использования: все эти красивые анимации, переключения экранов, загрузка элементов. Выход — видеозапись экрана. Как, например, на сайте Рокетбанка или у нас в портфолио (наведите мышкой на проект).

Для записи не потребуется дорогостоящих камер, программ для видеомонтажа и помощи программиста. Все, что нужно - это:

— 30 минут времени;
— Компьютер с MacOS или Windows;
— iPhone 4s+ или iPad 2+ с установленным приложением. Не обязательно из AppStore, тестовые сборки из TestFlight подойдут;
— Общая WiFi сеть для компьютера и смартфона;
— $13 (если планируете записывать много видео).

Записываем видео

Видео записывается с помощью программы Reflector. Она дублирует экран iPhone на вашем компьютере при помощи технологии AirPlay.

Программа работает бесплатно 10 минут после запуска, для одного видео этого достаточно. Для нескольких купите платную версию ($13).

Скачиваем, ставим и запускаем Reflector. На выезжающей нижней панели iPhone включаем AirPlay на компьютер с видео повтором. На экране монитора появится экран смартфона.

Запись видео стартует по нажатию Cmd + R или из меню Device → Start Recording.

Перед записью подготовьте приложение: введите тестовые данные, пройдите по всем экранам для подгрузки данных в кэш, откройте стартовый экран. Подготовьте сценарий ролика. Достаточно простых указаний. Пример для Trava.ru:

  1. Играет Lana Del Ray ’This Is What Makes Us Girls’.
  2. 5 секунд видно экран плеера.
  3. Переходим на Подборку, прокручиваем список новых.
  4. Переходим на таб популярных, прокручиваем список.
  5. Заходим в альбом Native от One Republic, включаем Counting Stars

После записи видео Reflector генерирует файл в формате MOV.

Стенд для презентации через AirPlay

Немного отойду от темы. Reflector можно использовать для эффектной демонстрации мобильного приложения на выставке, руководству или заказчику.

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

Размещаем на сайте

Видео разместим на сайте через HTML5-тег VIDEO. Нам понадобится два файла WebM (VP8 + Vorbis) и MP4 (H.264 + AAC). Этого хватит для поддержи всех современных мобильных и компьютерных браузеров. Почему так, читайте в подробнейшей статье.

Перекодируем видео в бесплатном приложении Miro Video Converter. Перетаскиваем MOV файл из Reflector в приложение, сначала кодируем WebM: Format → WebM SD, затем в MP4: Format → MP4. Полученные файлы заливаем на сервер и вставляем на страницу такой код:

<video id="trava-video">
<source src="/media/videos/trava_main.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
<source src="/media/videos/trava_main.webm" type="video/webm; codecs=vp8,vorbis">

</video>

Для старта видео по наведению мыши добавьте код (требуется jQuery):
<script>
$('#trava_video').mouseover(function(){this.play()});
$('#trava_video').mouseout(function(){this.pause()});
</script>


Для старта, когда пользователь прокрутил окно до видео, такой код:
<script>
function isScrolledIntoView(elem){
     var docViewTop = $(window).scrollTop();
     var docViewBottom = docViewTop + $(window).height();

     var elemTop = $(elem).offset().top;
     var elemBottom = elemTop + $(elem).height();

     return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
       && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
}
$(window).scroll(function(){
    if (isScrolledIntoView($('#trava_video')) {
        $('#trava_video').play();
    }
});

</script>

Готово!

Записываем видео на Android

В Android запись видео гораздо сложнее. Варианта два: Android версии 4.4 или rooted-устройство.

Для Android 4.4 требуется скачать SDK и ввести несколько консольных команд. Подробнее в инструкции.

Для версий Android меньше 4.4 требуется взломать устройство и скачать программу записи из Google Play. Или скачать программу, которая сразу умеет взламывать и записывать, например Benzul.


От редактора


Решил в конце письма давать несколько ссылок на мобильную тематику. Для рассылки недостаточно, но от этого они не менее интересны.В следующем выпуске посчитаем LTV во Flurry. До связи!

Все выпуски рассылки touchin.ru/letters
Рекомендуйте друзьям.
 
ООО «Тач Инстинкт»18 линия В.О. 29Санкт-Петербург 199034Russia 



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

×