Достался мне проект по адаптации флеш-курса электронного обучения под iPad.
Хотел поделиться некоторыми моментами.
Медиа
Проект должен был позволять играть видео/аудио файлы, причем без лишний движений со стороны пользователя.
Видео на iPad можно проиграть только путем нажатия пользователем на что-нибудь, т.е. автоматически проиграть медиа файл, например, при загрузке страницы не получится, или получится, но далеко не во всех версиях iOS.
Так что первый раз проиграть видео/аудио приходится по клику пользователя. Дальше, если тому же тегу менять атрибут src, отлавливая событие onended, проигрывание можно делать автоматически.
С этой частью проекта было несколько проблем:
1. Перед тем, как файл загрузился, у тега video показывался логотип QuickTime.
display:none или visibility:hidden не срабатывали. Помог -webkit-transform: translateX(-2048px).
2. Какое-то дерганье звука имело место перед тем, как видео догрузилось и готово для проигрывания. Проблема решилась путем проверки свойства readyState у тега видео.
3. По каким-то причинами, иногда, по клику пользователя, вместо нужного видео файла проигрывался аудио файл. Прочитал, что в iOS медиа объект реализован как синглтон, т.е. может быть только один экзезмпляр на странице. Вобщем это все теория и мне от этого легче не стало. Пробовал удалять атрибут src или делать его пустым — эффекта никакого. Путем экспериментов помог src=".." (src="." все равно не помогал). Наверное, можно было придумать что-то и по-красивее, но т.к. нельзя было удалять медиа теги и я тогда очень устал от этого глюка, то оставил все именно так.
Итак, проигрывание видео файла делаем так:
Еще момент насчет видео — клик по нему не получится отловить, нужно поверх ставить слой и на нем уже отслеживать событие.
События окна
1. ononline, onoffline – нужно было отследить соединение с интернетом, чтобы показывать пользователю какие-то предупреждения и по возможности продолжать работу.
2. onpageshow – отрабатывает, когда пользователь окно не закрыл, нажал на кнопку «home» на самом устройстве, а потом вернулся назад в safari.
3. onorientationchange – отрабатывает при переходе между режимами portrait и landscape самого устройства. Здесь можно отловить window.orientation значение для определения режима.
4. onbeforeunload – это, казалось бы, стандартное событие на iPad не работает. Пришлось все приложение загружать во внешний iframe и у него отслеживать событие onunload.
Анимация
1. Лучше делать с помощью css, используя -webkit-transition. Работает гораздо быстрее, а это очень важно, особенно для iPad1.
2. Вместо анимирования свойств top и left используем translate3d.
3. Хорошо анимируется scale, это может пригодиться при переходе между portrait и landscape режимами.
4. Плохо анимируется opacity, width, height, особенно, если у элемента заданы -webkit-box-shadow.
CSS
Здесь все очень хорошо, один браузер и много полезных свойств.
1. Насколько возможно, нужно избежать загрузки картинок. Градиенты, круги, треугольники – все можно сделать стилями.
2. Быстрее всего элементы скрывать с помощью translate3d или translateX свойств.
3. Нужно изучить –web-kit css свойства, может очень сэкономить время. Тут можно посмотреть http://css-infos.net/properties/webkit.
Touch события
1. Использовал jQuery Mobile, правда пришлось его подковырять немного, а то он лишние теги на страницу добавлял. В свзяке с плагином scrollview получается мощный скроллер. Пробовал также http://cubiq.org/iscroll
2. Для Drag’n’Drop использовал вот это плагин http://www.gotproject.com/blog/post2.html, правда пришлось его допиливать, т.к. он не учитывал значение scale у элементов.
3. Вместо click по возможности использовал touchstart – гораздо быстрее.
Производительность
1. iPad1 и iPad2 очень отличаются по производительности, так что лучше вести разработку пользуясь iPad1.
2. Хорошо бы избегать серьезных манипуляций с добавлением\удалением DOM элементов – iPad1 у меня иногда просто загибался.
3. Также файлы в шапке приложения лучше подключать, используя, скажем, headjs.com, без этого у меня иногда вылетал браузер ни о чем не предупреждая.
Вообще, впечатление от работы осталось смешанное – постоянно приходилось искать какие-то хаки, и из-за этого часто возникало чувство, что все идет не так, как должно быть. В своей оценке проекта ошибся в два раза из-за того, что до этого вообще не работал с iPad устройствами.
Но, когда в конце работы смотрел на результат, — было приятно.
Хотел поделиться некоторыми моментами.
Медиа
Проект должен был позволять играть видео/аудио файлы, причем без лишний движений со стороны пользователя.
Видео на iPad можно проиграть только путем нажатия пользователем на что-нибудь, т.е. автоматически проиграть медиа файл, например, при загрузке страницы не получится, или получится, но далеко не во всех версиях iOS.
Так что первый раз проиграть видео/аудио приходится по клику пользователя. Дальше, если тому же тегу менять атрибут src, отлавливая событие onended, проигрывание можно делать автоматически.
С этой частью проекта было несколько проблем:
1. Перед тем, как файл загрузился, у тега video показывался логотип QuickTime.
display:none или visibility:hidden не срабатывали. Помог -webkit-transform: translateX(-2048px).
2. Какое-то дерганье звука имело место перед тем, как видео догрузилось и готово для проигрывания. Проблема решилась путем проверки свойства readyState у тега видео.
3. По каким-то причинами, иногда, по клику пользователя, вместо нужного видео файла проигрывался аудио файл. Прочитал, что в iOS медиа объект реализован как синглтон, т.е. может быть только один экзезмпляр на странице. Вобщем это все теория и мне от этого легче не стало. Пробовал удалять атрибут src или делать его пустым — эффекта никакого. Путем экспериментов помог src=".." (src="." все равно не помогал). Наверное, можно было придумать что-то и по-красивее, но т.к. нельзя было удалять медиа теги и я тогда очень устал от этого глюка, то оставил все именно так.
Итак, проигрывание видео файла делаем так:
$(video).css("-webkit-transform", "translateX(-2048px)"); //убирает квик-тайм лого перед проигрыванием видео
/* пресекаем глюки с дераганием видео перед тем, как оно нормально начнет проигрываться */
video.play();
if(video.readyState !== 4){
setTimeout(function(){
video.pause();
}, 1);
}
/* отлавливая нужное событие, возвращаем тег видео и начинаем проигрывание */
$(video).bind("canplaythrough", function(){
$(video).css("-webkit-transform", "translateX(0)");
video.play();
});Еще момент насчет видео — клик по нему не получится отловить, нужно поверх ставить слой и на нем уже отслеживать событие.
События окна
1. ononline, onoffline – нужно было отследить соединение с интернетом, чтобы показывать пользователю какие-то предупреждения и по возможности продолжать работу.
2. onpageshow – отрабатывает, когда пользователь окно не закрыл, нажал на кнопку «home» на самом устройстве, а потом вернулся назад в safari.
3. onorientationchange – отрабатывает при переходе между режимами portrait и landscape самого устройства. Здесь можно отловить window.orientation значение для определения режима.
4. onbeforeunload – это, казалось бы, стандартное событие на iPad не работает. Пришлось все приложение загружать во внешний iframe и у него отслеживать событие onunload.
Анимация
1. Лучше делать с помощью css, используя -webkit-transition. Работает гораздо быстрее, а это очень важно, особенно для iPad1.
2. Вместо анимирования свойств top и left используем translate3d.
3. Хорошо анимируется scale, это может пригодиться при переходе между portrait и landscape режимами.
4. Плохо анимируется opacity, width, height, особенно, если у элемента заданы -webkit-box-shadow.
CSS
Здесь все очень хорошо, один браузер и много полезных свойств.
1. Насколько возможно, нужно избежать загрузки картинок. Градиенты, круги, треугольники – все можно сделать стилями.
2. Быстрее всего элементы скрывать с помощью translate3d или translateX свойств.
3. Нужно изучить –web-kit css свойства, может очень сэкономить время. Тут можно посмотреть http://css-infos.net/properties/webkit.
Touch события
1. Использовал jQuery Mobile, правда пришлось его подковырять немного, а то он лишние теги на страницу добавлял. В свзяке с плагином scrollview получается мощный скроллер. Пробовал также http://cubiq.org/iscroll
2. Для Drag’n’Drop использовал вот это плагин http://www.gotproject.com/blog/post2.html, правда пришлось его допиливать, т.к. он не учитывал значение scale у элементов.
3. Вместо click по возможности использовал touchstart – гораздо быстрее.
Производительность
1. iPad1 и iPad2 очень отличаются по производительности, так что лучше вести разработку пользуясь iPad1.
2. Хорошо бы избегать серьезных манипуляций с добавлением\удалением DOM элементов – iPad1 у меня иногда просто загибался.
3. Также файлы в шапке приложения лучше подключать, используя, скажем, headjs.com, без этого у меня иногда вылетал браузер ни о чем не предупреждая.
Вообще, впечатление от работы осталось смешанное – постоянно приходилось искать какие-то хаки, и из-за этого часто возникало чувство, что все идет не так, как должно быть. В своей оценке проекта ошибся в два раза из-за того, что до этого вообще не работал с iPad устройствами.
Но, когда в конце работы смотрел на результат, — было приятно.