Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 329 / 26 | Длительность: 11:36:00
Специальности: Программист
Лекция 4:

Использование локального HTML5 контента на мобильном устройстве

Основы работы с аудио- и видеоданными в языке HTML5

Возможность вставки звука на страницы позволяет разработчикам создавать самые разнообразные мобильные виджеты. Страницы, на которых есть музыка, несомненно, расширяют диапазон того, что можно сделать средствами языка HTML5. Один из наиболее интересных тегов в коллекции HTML5 - это тег <audio>. С его помощью можно воспроизводить аудиофайлы через гарнитуру мобильного устройства. Выбор звукового файла для воспроизведения имеет следующий формат:

<audio src=" jazz .mp3" </audio>

Атрибут src имеет то же назначение, что и в теге <img> - он служит ссылкой на источник файла. Однако для того чтобы аудиофайл воспроизводился на странице, нужно использовать присущие ему атрибуты. Список атрибутов для тега <audio>:

  • autoplay - звук начинает играть сразу после загрузки страницы.
  • controls - добавляет панель управления к аудиофайлу.
  • loop - повторяет воспроизведение звука с начала после его завершения.
  • preload - используется для загрузки файла вместе с загрузкой веб-страницы.
  • src - указывает путь к воспроизводимому файлу.

Добавляя атрибут autoplay, нужно быть уверенным, что пользователи не будут возражать против прослушивания того, что будет звучать на странице. Если вы хотите, чтобы пользователи гарантированно не вернулись на вашу страницу, вставьте в нее продолжительный звуковой файл, который будет включаться автоматически. Не принимая во внимание это предупреждение, рассмотрим следующий код, в котором демонстрируется создание простой страницы, на которой звук начинает воспроизводиться сразу после ее загрузки:

<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Основы работы со звуком</title>
</head>
<body>
Звук находится между линиями<br>
----------------------------------------
<br>
<audio src="jazz.mp3" autoplay></audio>
<br>
----------------------------------------
</body>
</html>

Работу этого кода также можно протестировать в любом браузере, мобильном или настольном, поддерживающим HTML5 (Примечание: замените в приведенной разметке файл "jazz.mp3" на тот, который есть у вас).

Тег <video> добавляет, воспроизводит и управляет настройками видеоролика на странице. Путь к файлу задается через атрибут src или вложенный тег <source>.

Атрибуты тега <video>:

  • autoplay - видео начинает воспроизводиться автоматически после загрузки страницы.
  • controls - добавляет панель управления к видеоролику.
  • height - задает высоту области для воспроизведения видеоролика.
  • loop - повторяет воспроизведение видео с начала после его завершения.
  • poster - указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
  • preload - используется для загрузки видео вместе с загрузкой веб-страницы.
  • src - указывает путь к воспроизводимому видеоролику.
  • width - задает ширину области для воспроизведения видеоролика.

В контейнерах <audio> и <video> можно разместить тег <source>, в котором указывается звуковой или видеофайл или его URL-адрес. Обобщенно такие файлы называются медийными. Атрибуты тега <source>:

  • media - определяет устройство, для которого будет воспроизводиться файл.
  • src - адрес файла.
  • type - MIME-тип медийного источника.

В одном контейнере можно использовать несколько тегов <source>. В этом случае браузер конкретного мобильного устройства сам выбирает наиболее предпочтительный для себя формат файла. Пример использования <source> для двух разных форматов видеофайлов:

<video controls="" preload="auto">
   <source src="Simple.mp4"></source>
    <source src="Simple.3gp"></source>
 </video>

Текстовый ввод

Текстовый ввод в формах требует от нас особого внимания. Ввод текста на мобильных устройствах не назовешь самым удобным для пользователя процессом, кроме того, используемые механизмы текстового ввода могут сильно отличаться на устройствах с цифровой клавиатурой, устройствах с QWERTY-клавиатурой или сенсорным интерфейсом.

Единственным типом устройств, которые не требуют для ввода текста открытия нового окна, являются устройства с QWERTY-клавиатурой: как только поле ввода получит фокус ввода, пользователь может начать ввод текста. На устройствах всех других типов, когда поле ввода обладает фокусом ввода, пользователю нужно либо выполнить щелчок (касание) по этому полю ввода, либо начать печатать; при этом откроется модальное всплывающее окно, предоставляющее все обычные возможности печати данной операционной системы (предиктивный режим, виртуальная клавиатура, распознавание символов, словарь, таблица символов и т.д.). Некоторые устройства отображают полноэкранное окно текстового ввода (скрывая весь веб-интерфейс), другие отображают окно меньшего размера внутри окна браузера. В первом случае следует предоставить для окна описательный заголовок, чтобы пользователь знал, что ему нужно ввести.

В HTML для ввода текста используется тег <input> с атрибутом "text". Пример разметки, содержащей этот тег для ввода текста размером не более 15 символов:

<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ввод данных в мобильное устроство</title>
</head>
<body>
<header>
 <h1>Секретные сведения</h1>
</header>
<section>
 <p>Введите Ваш пароль:</p> <br>
 <input type="text" name ="parol" maxlength ="15" />
</section>
</body>
</html>

Результат тестирования кода приведенной разметки в браузере эмулятора:

В мобильных устройствах следует крайне осмотрительно применять многострочные поля ввода (определяемые с помощью тега <textarea>. Нельзя допустить, чтобы пользователь ввел в форму слишком много текста. Однако, возможно использовать тег <textarea>, когда требуется предоставить пользователю больше места для ввода (например, при создании сообщения электронной почты). При этом, как правило, пользователю предоставляются обычные возможности текстового ввода. В мобильном мире не очень распространено использование элементов управления для форматирования текста, которые очень сложно реализовать из-за присущих мобильным браузерам ограничений. Единственное решение состоит в том, чтобы перехватывать нажатия клавиш, используя события JavaScript и эмулировать свои собственные элементы управления.

Дмитрий Белов
Дмитрий Белов

Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле
for (i = 0; i < 3; i++) {
for (j = 0; j < 4; j++) {
sx = 300 * i; sy = 350 * j;
contextNow.drawImage(img, sx, sy);}
поставить точку останова, то при запуске отладки проекта точка становится пустой окружностью с сообщением: В настоящий момент попадание в точку останова не произойдет. Нет загруженных символов для этого документа. Как все-таки создать точку останова и пройти по шагам весь код?