Материал: Отличия HTML5 от предыдущих версий

Поддержка геолокации.

Во многих популярных телефонах существует два метода определения местонахождения. Первый метод не точный, но быстрый. Он вычисляет положение на основе различных операторных вышек по близости. Метод не требует GPS оборудования.

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

На примере можно рассмотреть поиск местоположения на Google Maps на iPhone и других поддерживаемых устройствах. Сначала мы видим большой круг, который уточняет местоположение путём ближайших операторных вышек, после уточнения идёт получение точных координат через спутники GPS.

У функции getCurrentPosition() есть необязательный третий аргумент, объект PositionOptions. Его свойства могут быть не заданы или заданы как все, так и по одному.

Свойства:

EnableHighAccuracy - если true, то устройство пользователя поддерживает функцию и соглашается указать своё местонахождение, а дальше устройство пытается обеспечить высокую точность. False обеспечивает нахождение не точной позиции.

Timeout - высчитывает время в миллисекундах, в течение которого приложение будет ожидать для получения данных. Таймер не начинает отсчёт, пока сам пользователь не даст разрешение об определении его местонахождения. Он следит за сетью, а не за пользователем.- позволяет устройству отправлять данные о местонахождении незамедлительно из закэшированной раннее позиции.

Если требуется постоянный поиск геолокации, то используют функцию watchPosition(), которая имеет ту же структуру, что и getCurrentPosition(). Она имеет две функции, для успеха и ошибок. Так же может включать в себя и необязательный объект PositionOptions, имеющий те же свойства, описанные раннее. Разница лишь в том, что функция будет вызываться каждый раз при смене положения пользователя и нет необходимости постоянного опроса позиции, устройство само определит оптимальный интервал опроса и вызовет функцию при изменении местоположения.

Сама функция watchPosition() возвратит число, которое следует где-то хранить. Что бы остановить слежение за пользователем, то вызывается метод clearWatch() и передаётся ему это число.

.5 HTML5 видео

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

Как бы мы поступили, если бы не знали о существовании HTML5.

Существовало несколько способов добавить видео на веб-страницу:

Использовался элемент <object>, который представлял из себя универсальный контейнер для внешних объектов. Недостатками это метода была малая степень интерактивности и взаимодействия с другими элементами этой веб-страницы.

Второй подход напрямую связан с использованием подключаемого дополнительного модуля браузера, такого как Flash или Silverlight. Хотя и подобные технологии позволяли создавать или использовать уже готовый видеоплеер, видеофайлы нуждались в кодировке, а html-код становился громоздким.

Стив Джобс в апреле 2010 года отдал своё предпочтение HTML5, упомянув, что Flash «уже не нужен», что несомненно повлияло на решения веб-разработчиков. Перспективы HTML5 в видео и создания веб-сайтов выглядят довольно позитивно.

Отличия HTML5 от Flash.

Первое, на что стоит обратить внимание, это применимость в мобильной среде и наличие семантической среде. На сегодняшний момент распространенно использование мобильных устройств для выхода в интернет, покупки в интернет магазинах и развлечения что отлично подходит для открытой структуры HTML5. Flash готовиться занять своё почётное место в прошлом.оптимизация. Применение в мобильной среде является очевидным преимуществом, но не единственным над Flash. Структура сайта, созданного при помощи Flash для поисковиков представляет из себя «чёрный ящик» с непонятным содержимым, тогда как HTML5 позволяет заглянуть внутрь поисковым системам и тем самым индексировать страницу для лучших поисковых запросов.

Разметка.предлагает вам два способа подключения видео на веб-страницу и оба они связанны с элементом <video>, к тому же очень похоже на добавление картинки через тег <img scr="..">.

Пример: <video src="vi.webm"> </video>

И подобно изображению, вы всегда должны указать атрибуты width и height в теге <video>. Атрибуты могут не совпадать с высотой и шириной видео, которую вы указали в процессе кодирования. И в этом нет ничего страшного, браузер будет центрировать видео внутри прямоугольника, заданного тегом <video>, пропорции видео не будут затронуты.

Пример: <video src="vi.webm" height="240" width="320"> </video>

По умолчанию для элемента <video> не добавляются элементы управления. Можно создать собственные элементы с использованием CSS, HTML и JavaScript. Для этого существуют такие методы как pause (), play () и свойства currentTime, muted и volume. Всё это пригодится для создания собственного интерфейса.

Но для того что бы браузер выводил встроенные элементы управления, необходимо в тег <video> включить атрибут controls.

Пример: <video src=" vi.webm" width="320" height="240" controls> </video>

Пример видео со встроенными элементами управления в браузере Google Chrome версии 39

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

<video src="vi.webm" width="320" height="240" preload></video>

А вот пример видео, которое не загружается при загрузке страницы:

<video src="vi.webm" width="320" height="240" preload="none"></video>

Атрибут autoplay делает именно то, как и звучит. Загрузка видео начинается при загрузке страницы и воспроизводит его при возможности. Рекламодатели от этого в восторге, в то время как другие это просто ненавидят.

Пример автоматического воспроизведения на сайте:

<video src="vi.webm" width="320" height="240" autoplay> </video>

И для того, чтобы не тратить сетевой трафик впустую, пока браузер пытается воспроизвести каждое видео, следует сообщить браузеру информацию о каждом видео. Это делается внутри тега <source> с помощью атрибута type. Посмотрим на примере, как это выглядит.

<video width="320" height="240" controls>
<source src="vi.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="vi.mp4" type=''video/mp4; codecs="avc1.42E01E, mp4a.40.2">
<source src="vi.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

Разберём подробнее. Элемент <video> определяет не ссылку на видеофайл, а высоту и ширину видео. Внутри элемента <video> есть три элемента <source>, каждый из которых ссылается на отдельный видеофайл с атрибутом src. Атрибут type даёт информацию о видеоформате.

Тип атрибута состоит из трёх частей: формат самого файла, видеокодек и аудиокодек. Для видеофайла .ogv форматом контейнера будет ogg, в примере он выглядит следующим образом «video/ogg» и является MIME-тип для видеофайлов ogg. Видеокодек Theora и аудиокодек Vorbis. Само значение должно быть заключено в кавычки, для этого необходимо использовать различные виды кавычек, чтобы окружить значение целиком.

Пример: type='video/ogg; codecs="theora, vorbis"'

Достоинством всех сложностей будет то, что браузер проверит атрибут type в первую очередь, а дальше определит, сможет ли он воспроизвести видеофайл. Если браузер решит, что не сможет его воспроизвести, то не будет, даже частично, скачивать его. Несомненно получится сэкономить на пропускной способности.тип. Вы сколько угодно можете быть разочарованы неправильно настроенным веб-сервером, на котором у вас располагается сайт с видео, которое никак не хочет запускаться, но на локальном компьютере идёт без претензий. Скорее всего это ошибка в MIME-типах.

Всё рассказанное выше является лишь частью того, как правильно залить видео на сайт. Нужно убедиться, что ваш веб-сервер включает в HTTP-заголовок Content-Type соответствующий ему MIME-тип.

Если вы используете веб-сервер Apache или его производные, то сможете пользоваться директивой AddType в httpd.conf или файле .htaccess.В случае использования другого веб-сервера, необходимо обратиться к его документации о том, как установить HTTP-заголовок Content-Type для определённых типов файлов.

Пример:

«AddType video/mp4 .mp4video/ogg .ogvvideo/webm .webm».

Все три строки предназначены для видео в соответствующих контейнерах. Следует установить это один раз и забыть. В случае если эти директивы не указаны, видео может не проигрываться, даже если включены MIME-типы в атрибуте type вашего HTML кода.

.6 Сравнение браузеров

Сравнение и анализ популярных браузеров Chrome 39, Opera 24, Firefox 32 по мнению сайта www.html5test.com

По итогам сравнения трёх браузеров, Chrome набрал наибольшее количество баллов в поддержке новых элементов HTML5.

Заключение

Пояснения:

Консорциум всемирной паутины (англ. World Wide Web Consortium, W3C) - организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины. Консорциум возглавляет сэр Тимоти Джон Бернерс-Ли, автор множества разработок в области информационных технологий.(англ. Web Hypertext Application Technology Working Group) - это быстрорастущее сообщество людей, заинтересованных в развитии Интернета. Оно было основано в 2004 году производителями браузеров: Apple, Mozilla Foundation и Opera Software. Основным направлением сообщества является развитие HTML и API, необходимого для веб-приложений. Причина создания подобного сообщества заключается в отсутствии заинтересованности в HTML и явном пренебрежении к реальным потребностям пользователей со стороны W3C, которое уже довольно давно отказалось от HTML в пользу XML. На данный момент идёт разработка HTML5. В январе 2011 года WHATWG приняла решение отказаться от упоминания версии HTML5, заменив её простым названием HTML, по которому стандарт определяется по мере его развития.