Здравствуйте. Тема сегодняшнего урока: работы с формами, а также видео и аудио элементами. Наш урок будет разбит на 2 части. В первой части мы рассмотрим какие новые элементы и атрибуты будут появились для создания форм, для валидации данных, которые пользователь вводит в формы, а во второй части урока мы научимся создавать страницы, которые умеют воспроизводить аудио и видео записи. Давайте перед тем как приступить к рассмотрению презентации, откроем с вами браузер и зайдем на один из сайтов, которые мы разбирали с вами на прошлом уроке, сайт позволяющий проверить поддержку некоторой функциональности в разных браузерах. Заходим на сайт caniuse.com и первая тема, которую мы разбираем, это формы. Давайте мы в поиске введем form и посмотрим на результаты которые выдает нам поисковик. HTML5 form features, видите что картина не очень хорошая, в большинстве браузеров поддержка форм, элементов форм еще не до конца реализована. Если посмотреть на легенду, вы увидите такой грязно зеленого цвета элемент в диаграмме, который означает, что браузер имеет частичную поддержку функциональности. На самом деле если мы посмотрим на show all versions, посмотрим на все версии браузеров, которые у нас здесь зафиксированы, то увидим что поддержка HTML5 форм хорошо реализована в браузере опера, начиная с 9-той версии опера полностью поддерживает все возможности, которые анонсированы с появлением HTML5. Ну вот последняя версия, она частично поддерживает формы HTML5. Что имеется ввиду под частичной поддержкой. Вы увидите, что сейчас я открыл фаерфокс и указано, что не важно от версии этот браузер частично поддерживает форму. Что означает частичная поддержка форм? Давайте мы перейдем на другой сайт, который тоже разбирали на прошлом занятии, это сайт HTML5test.com и в открывшемся окне мы с вами посмотрим немножко ниже по странице и найдем блог, который отвечает за элементы HTML5. Если мы посмотрим на вторую колонку, которая указывает поддерживает браузер возможности или не поддерживает, то мы увидим что половина функций в фаерфоксе не поддерживается, в половине пунктов везде стоят крестики.

Давайте посмотрим какая картина в браузере опера так как сайт caniuse.com сказал, что опера имеет полную поддержку, это не обновленная опера, версии 12, поэтому здесь мы можем зайти по адресу HTML5test.com и можем увидеть, что опера полностью поддерживает формы. Если фаерфокс у нас набрал 61 из 115, то в опере у нас все 115 баллов набраны и вы видите, что напротив всех элементов у нас стоят галочки. Получается, что опера у нас лучше всех поддерживает HTML5 формы. Если вы начинаете тестировать какую то функциональность HTML5 форм, если вы хотите увидеть как работает та или иная конструкция в разметке вашей страницы, то для того чтобы точно быть уверенными, что разметка будет функционировать, попробуйте открыть свою страницу в опере. Опера лучше всего поддерживает формы. Остальные браузеры имеют достаточно большой разброс. Некоторые поддерживают одни элементы, некоторые – другие. Мы с вами на сегодняшнем уроке посмотрим, как можно сделать так, чтобы даже если браузер не знает о некотором элементе HTML5 форм, он мог заменить этот элемент кодом java script, чтобы в любом случае функциональность была предостаточной, чтобы пользователь мог нормально взаимодействовать с формой.

Теперь давайте перейдем к презентации и посмотрим первые 2 слайда. На этих слайдах мы еще раз посмотрим на те браузеры, которые поддерживают HTML5 формы. Эти слайды вы можете использовать для того чтобы проверять какой именно браузер поддерживает тот элемент, который вы собрались добавить к себе на страницу. Видите, что на первом слайде у нас перечислены HTML5 элементы, слева в строчках, а каждая колонка определяет определенную версию браузера в которой определенный HTML5 поддерживается или поддерживается частично. На следующем слайде у нас показаны HTML5 атрибуты. Точно так же, перечень атрибутов и версия браузеров, начиная с которых вы можете эти атрибуты использовать. Сейчас в примерах мы с вами разберем элементы и атрибуты и увидим значение и то, как они работают. Первые 2 слайда можете использовать как справочники. Давайте теперь перейдем в Visual Studio и вначале мы рассмотрим с вами формы и элементы форм вообще. Не HTML5, а которые использовались ранее, а потом начнем с вами разбирать как работают HTML5 элементы и атрибуты. В первом файле мы разберем с вами все инпуты, которые вы можете применять. Для начала давайте обсудим, для чего нужен элемент form. Элемент input вы можете размещать в любой части страницы. В первую очередь этот элемент нужен для того, что бы пользователь мог предоставить некоторые данные, провести какой-то выбор, после чего данные могли быть отправленными на сервер. Если вы собираетесь разработать страницы для авторизации, регистрации или другую страницу, требующую от пользователя ввода. Вам нужно будет на странице разместить элемент form, а в этот элемент набросать уже необходимые элементы управления. Сам по себе элемент form нужен для того, что бы все инпуты которые в нем находятся, могли быть отправленными на серверную сторону. В этом уроке мы с вами не разбираем как работает серверная сторона и не рассматриваем, как нужно правильно конфигурировать элемент form. Если его корректно настроить, то в нем должен быть определен еще атрибут action где будет определена страница на стороне сервера, которая будет принимать данные, введенные пользователем. И так же мы можем указать атрибут method, в котором будет указан http глагол, с которого данные будут отправлены на сервер. Если мы строку настроим вот таким образом, укажем 2 атрибута, это будет значить что все инпуты, все значения, которые находятся в этой форме, они будут отправлены на страницу test.aspx , с помощью глагола post. Страница сможет прочитать все значения, которые находятся в инпутах и что то с этими значениями сделать. Например добавить пользователя в базу данных или проверить пользователя и выделить пользователю специальные куки, что бы пользователь считался авторизированным на сайте. Вот как будет выглядеть полная настройка формы. Но пока мы свое внимание сконцентрируем на клиентской стороне и рассмотрим как настраивать саму форму, как настраивать ее содержимое. Форма в себе может содержать любую HTML разметку, но если мы создаем форму, то в любом случае в форме будет несколько инпутов. На 9 строке у нас создается первый input, если вы его определяете, то для него вам необходимо установить несколько атрибутов. Первый атрибут – type, который будет указывать сто именно из себя представляет input. Второй атрибут – name, который необходим для того, что бы на стороне сервера код, который будет читать информацию из полученных данных, со стороны клиента, мог к чему то привязаться, то есть на сторону сервера при отправке данной формы, будет уходить набор ключей и значений, привязанных к этому ключу. Вот получается name это ключ, а value – значение, привязанное к этому ключу. Дальше мы постараемся рассмотреть, как этот функционал будет работать, для чего нужно 2 эти атрибута. В атрибуте type, мы определяем как именно будет работать элемент и в первых примерах мы разберем какие новые элементы атрибута HTML5, появились в HTML5. Если мы удалим значение button в visual studio и нажмем комбинацию клавиш ctrl+пробел, то нам покажут возможные значения для атрибута HTML5. Если мы создаем вот такой вот элемент ввода, он превращается в обычную кнопку. Для этой кнопки не задается никакого поведения. Если мы хотим, что бы при нажатии по кнопке что нибудь происходило, нам нужно добавить java script код. Иначе эта кнопка просто будет бездействовать. Следующий элемент, это элемент с типом checkbox. Давайте посмотрим как будет выглядеть этот контрол. Первый контрол у нас кнопка, второй контроль checkbox. Если мы поставим галочку, то тогда пойдет на сервер значение, что имя со значением true, если мы галочку снимем, то на сервер никакие данные отправляется не будут. Так же мы можем задавать атрибут как checked=checked. Это будет указывать, что элемент при загрузке страницы, должен быть выбранным. Видите, сейчас при загрузке страницы галочка снята, если мы страницу перезагружаем, то вы видите, что галочка у нас автоматически устанавливается. Следующий элемент, который у нас показан в разметке, вы видите у нас есть кнопка browse и сообщение selected. Если мы кликаем по этой кнопке, у нас открывается окно, к котором мы можем выбрать файл и отправить на сервер. Для того что бы сделать такого рода элемент ввода, нам нужно задать input и определить для него type = file. На сервере, используя имя file 1, мы сможем получить доступ ко всем байтам файла, который здесь выбран. Следующий элемент, это элемент hidden. Если вы создаете type = hidden, это означает что данные существуют, но пользователь эти данные не видит и не может их редактировать. Вы видите, что после элемента file, у нас сразу идет элемент для ввода пароля. Но между этими элементами находится скрытая информация. Если мы откроем исходный код страницы, то мы увидим, что у нас есть input с типом hidden. Он будет отправляться на сервер, если пользователь сделает методы формы. На сервер будет отправляться имя и пустое значение. Вот такой вот элемент ввода. Следующий элемент ввода, это пароль. Если мы определяем type password, это значит, что мы получим обычный текстбокс, но при этом все введенные символы, будут заменятся на точечки для ввода пароля. Если мы хотим, что бы пользователь мог выбрать 1 из 2-х вариантов, элементы которые называется радиобаттоны. Вы можете использовать inpyt с тайпом radio. Когда мы создаем радиобаттоны, у нас есть есть смысл создавать несколько радиобаттонов. Один радиобаттон не будет играть никакой роли на нашей странице. Вы видите, что мы создаем 2 радио, чо бы они считались одним целым. Мы указываем для радиобаттонов 2 одинаковых имени. Если вы виполните такое именование радиобаттонов, то в таком случае только один из радиобаттонов будет выбранным. Сейчас нажимаем radio2 и с radio1 снимается точка и наоборот. Если мы имена укажем разные, то у нас оба радиобаттона могут быть выбранными. Они будут выбираться независимо друг от друга. Радиобаттоны в HTML форме группируются по имени. Если мы хотим сделать кнопку, которая будет очищать пользовательский ввод, мы можем сделать input с типом reset. Посмотрите сейчас на форму. Для того, что бы поменять текст, который находится на самой кнопке, мы можем использовать атрибут value. Какая задача у элемента reset, кода мы по нему кликаем, то все данные которые находятся в форме, сбрасываются на свои дефолтные значения. Если мы заполняем поля вводов, заполняем пароль, нажав на кнопку reset, вся информация у нас сбрасывается. Следующий элемент, это элемент дающий возможность создать выпадающий список на странице. Для этого используется элемент select. Для этого элемента задаются имя, это имя будет использоваться для того, чтобы определить имя – значение, которое отправляется на сервер. Для того что бы пользователю предоставить возможность сделать выбор, подключается несколько элементов option. У каждого опшина есть текст, который видит пользователь. Если мы создаем вот такой вот элемент разметки. Если пользователь выберет второй пункт, то на сервер будет отправлено сообщение, что элемент select1 со значением value2. То что находится между открывающим и закрывающим элементом option, тот текст, который пользователю будет доступен, то что пользователь будет видеть. А значение атрибута, это уже служебные данные, которые будут использоваться либо java script кодом, либо на стороне сервера C# кодом, php либо в зависимости от того, какая спецификация серверной стороны. Если мы сейчас запустим пример, вы видите есть выпадающий список, в котором есть тексты, определенные в опшинах, но когда мы выбираем 1 из элементов, если мы сделаем отправку формы на сервер, то на сервер будет отправляться value, который будет привязан к этому тексту. Так же элемент select можно превратить в текстбокс, для этого возле элемента нам нужно добавить такое значение как multiple=multiple. Атрибут size, указывает количество элементов, которые видны пользователю. Если мы создаем элемент с таким атрибутом, видите он ничем по сути не отличается от пред идущего элемента, но сейчас у нас мы можем вибрать несколько элементов внутри листбокса. На сервер точно так же будет отправлена информация, информация будет привязана к имени multiple=multipleselect1, а значения будут использоваться как атрибуты value тех элементов, которые будут использоваться. Если вы добавляете инпуту type1, это значит что будет кнопка с особым значением. Кликнув по этой кнопке, вся информация которая будет использоваться, будет отправлена на серверную сторону. Давайте проведем вот такой эксперимент. Вот мы заполнили некоторые данные, смотрите что происходит. Так как у нас форма настроена не до конца, по сути нажатие на кнопку submit, отправляет запрос на ту же страницу. Смотрите как они по умолчанию отправляются. В адресной строке у нас есть адрес текущей страницы и после этого адреса у нас установлен знак вопроса, а дальше идут все значения, которые пользователь заполнял. Получается, что вся информация которая находится внутри формы, она уходит на серверную форму, либо эти же данные могут находится в теле запроса. Если мы создаем элемент type=text, по умолчанию сервер всегда рисует поле ввода. Если мы здесь не укажем никакого значения и обновим браузер, то вы увидите, что все равно рисуется текстбокс. Если мы здесь укажем не существующий type. Сохраним и откроем браузер, обновим его, видите все равно рисуется поле ввода. Если вы начинаете использовать в своей HTML разметке элементы HTML5 форм, а эти элементы браузером не поддерживаются, то ничего страшного не произойдет, пользователь просто увидит поле ввода. Например фаерфокс не поддерживает элемент color, для выбора цвета. Другие браузеры, например опера, нарисуют поле ввода, в котором будет возможно выбрать из палитры цветов определенный цвет. Вот в чем заключается особенность, которую вы должны знать. Если вы определяете несуществующий тип или вообще не указываете никакой тип, то браузер по умолчанию будет брать тип text. Если вы хотите создать на странице большой блок для ввода текста, например для того что бы пользователь мог поставить комментарий или большое текстовое описание, вы можете использовать textarea, для того что бы на стороне сервера можно было получить доступ к тексту, который пользователь ввел, мы указываем атрибут name. А атрибуты rows, cols позволяют нам настроить высоту и ширину этого документа. Вот в этом примере мы разобрали все HTML4 элементы, которые любой веб разработчик должен знать. Без которой вы не сможете сделать полноценную форму, с которой будет работать посетитель вашего сайта.

Теперь давайте посмотрим на HTML5 атрибуты и элементы. Во втором примере показан элемент с типом search. Если мы создаем вот такой элемент ввода, то отображается он в браузере как обычный текстбокс, но при получении данных этот текст бокс добавляет в правом углу крестик, по котором можно удалить текст, находящийся в текстбоксе. Для того что бы внести новый элемент ввода, для того что бы вводить поисковые фразы, у вас есть возможность быстро удалить все содержимое, которое вы вводили для поиска. Но если мы откроем пример в гугл хром, то введя текст у нас пояится крестик, кликнув по которому мы очистим текстовое содержимое. Для мобильных телефонов это очень удобный элемент ввода. Для того, что бы легко удалить содержимое, нам достаточно нажать на крестик. В браузере мы легко можем выделить весь текст и удалить его. Вот первый элемент, который мы разсмотрели в HTML5 формах. Так же в этом примере показано использование элемента label, если вы создаете форму, то старайтесь что бы текст, который привязан к элементам управления был не просто текстом, который вы определили на странице, а текстом который помещен в элемент label. Если вы создаете элемент label вот таким вот способом, определяете его и помещаете и текст и элемент ввода, это будет означать, что когда вы загружаете страницу, если вы кликаете по тексту, то сразу же получаете фокус в элемент ввода. Если вы не хотите, что бы input находился непосредственно в label, вы можете провести вот такую настройку, вы можете label вынести выше, сказать что он предназначен для элемента search и этот id установить для инпута. Это точно так же срабатывает, если мы кликаем по лейблу то попадаем в элемент ввода. Но если мы откроем пример в гугл хром, то введя текст у нас пояится крестик, кликнув по которому мы очистим текстовое содержимое. Для мобильных телефонов это очень удобный элемент ввода. Для того, что бы легко удалить содержимое, нам достаточно нажать на крестик. В браузере мы легко можем выделить весь текст и удалить его. Вот первый элемент, который мы разсмотрели в HTML5 формах. Так же в этом примере показано использование элемента label, если вы создаете форму, то старайтесь что бы текст, который привязан к элементам управления был не просто текстом, который вы определили на странице, а текстом который помещен в элемент label. Если вы создаете элемент label вот таким вот способом, определяете его и помещаете и текст и элемент ввода, это будет означать, что когда вы загружаете страницу, если вы кликаете по тексту, то сразу же получаете фокус в элемент ввода. Если вы не хотите, что бы input находился непосредственно в label, вы можете провести вот такую настройку, вы можете label вынести выше, сказать что этот label назначен для элемента с id search и этот айдишник установить для инпута. Видите точно так же срабатывает, если мы кликаем по лейблу, то попадаем в элемент ввода, но при этом у нас нету вложенности в label. Так же мы можем привязать комбинацию клавиш. Если мы выберем accesskey, и установим что хотим получать доступ к поиску при нажатии комбинации клавиш alt+s например. Мы указываем горячую клавишу и теперь, когда мы нажимаем горячу клавишу, мы получаем элемент ввода, который был привязан к лейблу. Единственное, очень часто мы можем натолкнутся на горячие клавиши, которые привязаны к самим браузерам. Например, если нажать alt+s, в хроме появляются настройки. Некоторые комбинации клавиш не будут работать, так как браузер на них вешает свои собственные команды. Мы должны проdерять, будет ли работать наша комбинация клавиш. Вот есть возможность создать вот такую структуру. Давайте посмотрим пример номер 3, в котором сразу разбирается несколько новых эелементов HTML5, это элемент email, url, tel. Назначение элемента email, я думаю понятно. Для того что бы наша страница могла автоматически проверять правильность введенных пользователем данных, что бы данные считались email адресом, мы можем установить атрибут type, получается что мы просим браузер проверять те значения, которые пользователь вводит в элемент на 17-й строчке. Мы хотим что бы данные были email адресами. Если мы хотим что бы браузер проверял наличие в поле ввода правильного url фдреса, мы можем использовать тип url. Давайте мы сейчас запустим пример и проверим 2 первых поля ввода. Смотрите, если мы сейчас введем просто test и test, нажмем на кнопку отправить. Кнопка отправки в нашем примере это элемент submit, если мы сейчас попробуем отправить на сервер значение, браузер не дает нам отправить данные, он пишет что мы не соблюли формат данных, если мы напишес здесь test@test.com то теперь при нажатии отправить, браузер не указывает ошибку email, зато теперь неправильны адрес сайта, потому что это некорректный формат для url. Если мы напишем http://test.com браузер пропустит данные, видите теперь отправились на сервер, на эту же страницу, вы видите в адресной строке. Что касается последнего элемента ввода, элемента tel. Браузер не будет делать никаких проверок, потому что форматы телефонов достаочно разные в разных странах, в разных ситуациях мы по разному записываем телефонные номера. По этому все, что сделает браузер, это покажет специальную экранную клавиатуру, если мы кликнем по полю ввода с типом tel. Естественно в самом браузере никакая клавиатура появлятся не будет. У нас здесь обичная клавиатура, если загрузите любой мобильный браузер, который пддерживает HTML5. У вас появится клавиатура, на которой будут цифры. Если вы нажемте по полю email, у вас появится клавиатура, на которой будут буквы, цифры и символы, для того чтобы вы могли символ легко найти и внести. Например нажав по элементу Сайт, у вас появится клавиатура, в которой будет кнопка ".com". Конечно это все зависит от того, каким устройстом вы пользуетесь и какие экранные клавиатуры находятся в этом устройстве. Но впринципе большинство мобильных приложений будет рисовать клавиатуры, на которых есть специальные клавиши, для того, что бы пользователям удобнее было вводить данные. По этому атрибут никак не влияет на то, как у нас отображается формочка. Следующий пример показывает использование импутов для получения даты и времени. Посмотрите на 16-ю строчку. Мы создаем input и определяем тип datetime, мы хотим что бы этот input давал пользователю возможность ввести как время так и дату. Если посмотреть на 31-ю строчку, то input будет просить у пользователя введение даты. Обратите внимание, что у инпута появляется 2 таких атрибута как min и max. Мы не хотим, что бы дата которую вводил пользователь была меньше этой либо больше этой. Если мы хотим указать диапазон. И строка 40-я у нас есть input с типом time, это будет элемент для получения пользователем времени. И точно так же мы можем определить минимальное и максимальное значение. Запустим этот пример в хроме, то мы увидим что первое поле ввода, которое использовало datetime, вот он у нас использован на строке 16. Datetime у нас не срабатывает, никакого специального контрола у нас не появляется. Но зато срабатывает date и time. Мы можем выбрать дату, при этом вы видите, диапазон у нас от 2011 до 2012 года, в соответствии с настройками которые мы указали в атрибутах min max. Вот мы выбрали какую то дату, она у нас отобразилась в элемента ввода. То же самое касается времени, мы можем указать время, вы видите меньше восьми или больше 18 мы поставить не можем. Потому что у нас явно указаны настройки. Если мы нажмем кнопку отправить, данные уйдут на сервер и серверная сторона сможет выбрать установленное нами значение. Для того что бы увидеть как работает элемент datetime мы можем переключиться на браузер опера. В опере все эти типы инпутов реализованы, здесь мы можем выбрать дату, здесь мы можем выбрать время. По сути datetime, это склееный элемент date и time. Это примеры использования элементов, для получения от пользователя даты. Следующий пример использования элемента number. Посмотрите сейчас на 2 инпута, которые есть на текущей странице. Input на 11 строчке, который определен как элемент number и input на 21 строчке, который у нас number, но дополнительно к нему добавляется 2 атрибута: минимальное значение, максимальное значение и шаг. Сейчас мы увидим для чего нужен атрибут step. Запустим этот пример, допустим у нас смотрите как опера отображает type number. У нас появляется поле ввода, а рядом с полем ввода кнопкы позволяющие увидедить и увеличить или уменьшит значение, определенное для поля ввода. Если мы добавили атрибуты min и max, вы видите как данные будут отображаться, в каком элементе ввода. Мы не можем опустится ниже 2 и поднятся выше 20. При этом обратите внимание, что кликая по кнопкам у нас значение увеличивается или уменьшается на 2 в соответствии с атрибутом step. Вот такой элемент ввода, для получения пользователем целочисленных значений. Следующий тип элемента, это элемент range. На строке 11 мы создаем input с типом range, и как и в пред идущем примере устанавливаем значения min, max, step, value. Если мы создаем такой элемент, то в браузере будет отображаться как слайдер. При этом обратите внимание, когда мы страницу загружаем, клетка в этом слайдере находится на позиции 5, максимальное значение у нас 10, минимальное 1. И шаг, который мы можем делать, это шаг равный единице, потому что мы указали step=1. Вот такой элемент HTML5, но если мы откроем его в другом браузера, например в фаерфоксе, у нас срабатывать не будет. Будет отображаться как текстбокс со значением 5. Следующий элемент ввода используется для получения от пользователя цвета, что бы пользователь мог выбрать цвет из страницы. На строке 11 мы создаем элемент с типом color, и строка 16 то же самое. Есть 2 элемента для выбора цвета. Но если мы сейчас запускаем это пример в фаерфоксе, элемент у нас рисуется как обычный текстбокс. Если мы откроем его в опере, то смотрите как у нас рисуется палитра с цветами, мы можем любой элемент выбрать, используя стандартное окошко операционной системы. И выбрав какой нибудь элемент из цветов, этот цвет у нас отображается в самом контроллере. Ну и так же с помощью java script кода мы можем получить hex значение этого цвета и использовать его для своих целей нашего приложения. Если не ошибаюсь, в хроме у нас тоже будет отображаться этот элемент, только немножко по другому будет работать. Видите у нас нету стандартных цветов, сразу открывается окно браузера. Теперь давайте перейдем к следующему примеру. На строке 18 мы создаем элемент datalist, который будет неким источником данных для выпадающего списка. Для datalist ми задали id и строка 19-21 определили несколько опшинов. Для опшина есть текст и есть значение, которое будет использоваться программой. На 14 строке мы создаем input, обычное текстовое поле ввода. И добавляем к этому инпуту атрибут list, где указываем id элемента datalist. Если мы сейчас запустим этот пример в гугл хроме, то вы видите если мы нажимаем стрелочку вниз на клавиатуре, то у нас отображается список тех значений, которые определены в datalist. Мы можем выбрать одно из них и значение попадет в поле ввода. Точно так же этот элемент будет работать в фаерфоксе. Тоже если мы нажимаем стрелку вниз, у нас появляется перечень тех значений, которые мы можем вносить. Либо если мы начнем вводить данные с клавиатуры, у нас показываются те значения, которие у нас привязаны к даталисту. Это подсказка, возможные значения, которые могут вводится в поле ввода. Получается что сейчас мы уже подошли с вами к атрибутам. Если до этого мы показывали эелементы, то сейчас мы смотрим на то, как работают атрибуты. Следующий атрибут, который использууется в HTML5, это атрибут required. С его помощью мы легко можем указать, что некоторый элемент формы является обязательным для заполнения. Смотрите на 14 строчку, видите мы делаем формочку для авторизации пользователю, у нас есть элемент для ввода логина и элемент для ввода пароля. Авторизироваться на сайте невозможно, не введя вот этих данных. По этмоу мы здесь указываем required=required. И на 19 строчке точно такой же атрибут. Если сейчас мы попробуем отправить форму на сервер, перед отправкой формы, мы нажмем кнопку submit, браузер произведет проверку для значений тех элементов, которые помечены данным атрибутом. Если мы запускаем пример, нажимаем кнопку отправить, форма не отправляется и браузер нам подсказывает, что в 2-х элементах ввода допущены ошибки. Если мы заполняем форму и нажимаем отправить, то данные уходять на сторону сервера. Вот такой атрибут для валидации. Следующий атрибут, это атрибут autofocus. С его помощью мы можем указать, какой элемент в форме должен получить ввод в фокус, когда страница будет загружена. Если сейчас взять пример, у нас есть input с типом search. Второй input, когда страница будет загружена, сразу же получит фокус, потому что у него установлен атрибут autofocus. Если мы запустим пример, видите 2 элемента ввода и во втором уже мигает курсор. Это благодаря атрибуту autofocus. Следующий очень удобный атрибут, которого раньше не хватало, это атрибут placeholder, позволяющий определить подсказку внутри текстбокса. В формочке сейчас на 16 строке, в элементе email находится атрибут placeholder, с определенным значением. То же самое на 20 строчке, placeholder с текстом для примера и на 26 строчке. Если мы запустим форму, то увидим что у нас у всех элементах находится watermark. Если мы кликаем по текстбоксу, watermark в зависимости браузера, которым мы пользуемся. В фаерфоксе watermark не исчезает до тех пор, пока мы не начнем вводить какие то значения. Если мы попробуем запустить этот пример в опере, мы кликаем по элементу и сразу же watermark исчезает. Другие браузеры его держать до тех пор, пока мы не начнем вводить данные в поле ввода. Вот атрибут placeholder, который позволяет делать форму более понятной, более удобной для пользователей. Пример с использование атрибута autocomplete. Атрибут нужен в тех ситуациях, когда мы хотим запретить браузеру сохранять критическую информацию в своей памяти либо в файлах локальных данных. Если мы хотим, что бы браузер не кешировал данные, введенные пользователем. Мы добавляем атрибут autocomplete с параметром off. Вы видите, что в нашем случае 2 элемента ввода на странице используют этот атрибут. Давайте запустим сейчас этот пример и посмотрим как пример будет работать. Мы вводим имя пользователя, мы вводим пароль пользователя. Если мы нажимаем отправить, то введенные данные у нас просто уходят на сервер и форма у нас очищается. Если же мы вводим данные и вместо нажатия на кнопку отправить, переходим по этой ссылке, кстати по этой ссылке находится сайт, показывающий текущие возможности браузера в HTML5 формах. Видите мазила фаерфокс, что поддерживается, и что не поддерживается этим браузером. Input с типом color не срабатывает. И если мы нажимаем на backspace и возвращаемся обратно, видите у нас данные исчезли. Видите, мы запретили браузеру сохранять информацию, которую мы вводили в поля ввода. Просто для больщей безопасности. Если мы данные вписываем, переходим по ссылке, а потмо возвращаемся обратно, никаких данных у нас нету. Если мы поставим значение on, и запустим такой пример. Вводим здесь данные, вводим данные для пароля и если переходим на страницу, возвращаемся обратно, данные для текста сохранились, а для пароля они никогда не сохраняются. Элемент с типом password, всегда использует autocomplete=off. Вот пример использования атрибута autocomplete. Если у вас есть важные данные, которые для большей безопасности вы не хотите сохранять в браузере, вы можете эти данные удалить из памяти браузера, используя autocomplete. В следующем примере показано использование атрибута pattern. С помощью этого атрибута мы можем указать, с помощью регулярного выражения, какой формат данных нам требуеться в элементе ввода. Посмотрите сейчас на 15 строке мы создаем элемент с типом tell. Мы хотим определить, что значения которые должен вводить пользователь должны быть вот в таком вот формате. +38, код оператора и номер телефона. Посмотрите, как мы делаем ограничения на формат данных, которые использует пользователь. Мы указываем в атрибуте, что вот этот синтаксис, синтаксис регулярного выражения. Для того что бы правильно пользоваться атрибутом, вы должны найти регулярное выражение в сети либо знать сам синтаксис регулярных выражений, что бы определить вот такое правило. Если вы прослушивали курс java script углубленный или С# для профессионалов, то в этих курсах рассматривалась тема создания регулярных выражений. Первй символ указывает на то, что мы хотим определить символ +, потом 38, это значит что от пльзователя мы хотим получить вот такие данные, мы хотим вот такой буквальный текст получить. \( - эти символи значат, что пользователь должен ввести (, а потом \d{3}, этот набор символов указывает на то, что мы хотим получить под ряд 3 цифры. После цифр у нас должна быть), потом пробел, потом 3 цифры, черточка, 2 цифры черточка, 2 цифры. Если текст, который будет находится внутри элемента tel, то браузер выдаст сообщение об ошибке. Давайте проверим, если мы вводим сюда просто обычный текст, нажимаем отправить, видите фаерфокс нам показывает сообщение, что у нас не соответствует формат. И так же фаерфокс у нас читает значение атрибута title и добавляет атрибут в подсказку, что бы мы понимали, что нужно ввести в поле ввода. Если же мы вводим правильный формат, если мы сейчас нажмем отправить, видите данные ушли на сервер, потому что номер телефона соответсвовал шаблону. Вот такой атрибут, который есть в HTML5, очень упрощающий валидацию данных, которые ввел пользователь. Как мы видели вначале текущего урока, мы видели что очень большое количество браузеров поддерживают HTML5 формы и атрибуты не на полном уровне. Сейчас только есть частичная поддержка всех этих фич, по этому для того что бы форма у нас корректно валидировала данные, которые ввел пользователь, корректно отображалась пользователю, нам нужно все таки делать дополнительные проверки. Конечно со временем все браузеры начнут одинаково сопровождать HTML5 возможности, но на сегодняшний день еще не все функции доступны. По этому для того, что бы сделать свое приложение кроссбраузерным, нам нужно добавить еще некоторые роверки. Вот сейчасмы посмотрим с вами на маленькие примеры использования библиотеки modernizer, позволяющие сделать так что бы работало приложение, даже если браузер не знет о HTML5 атрибутах. Вот посмотрите, на стркое 14 мы определили input с типом search и указали что этот input - autofocus. Для того что бы этот элемент ввода получил сразу же фокус. И на строке 23 мы указываем, что мы хотим сделать проверку, если modernizer.iput.autofocus, если это значение false, мы меняем значение на противоположное, в случае если у нас поддержки нету, мы попадаем в условие и находим в документе элемент с id query и вызываем на нем функцию focus. Если мы запустим браузер, который не знает сто такое autofocus=focus, то у нас выполнится java script код, который поставит фокус вот сюда. В нашем случае сейчас java script код не выполнялся, потому что фаерфокс знает о том, как работает атрибут autofocus. Другой пример. В другом примере показано использование атрибута placeholder. Как будет работать браузер, если placeholder у нас неизвестный атрибут. Кроме использования самого атрибута placeholder в библиотеке modernizer, мы используем еще jquery framework, для того что бы упростить разработку скрипта. На строке 14 и 15 у нас определены 2 инпута, элемент с атрибутами placeholder с каким то текстом. В строке 23, после того как браузер запустит документ, мы сделаем проверку. Если инпуты не поддерживают атрибут placeholder, в текущем браузере, мы добавляем достаточно такой большой блок java script кода. По сравнению с предидущим примером. На 25 стркое мы находим все инпуты, в которых содержится атрибут placeholder и указываем, что все эти найденные инпути должны быть ориентированы на focus. Когда мы кликаем по инпуту, у нас должна срабатывать эта функция на событие focus. Что делает вот эта форма. У нас текущий input, его значение и сравнивает это значение с тем значением, которое находится в атрибуте placeholder. У нас значения одинаковы, это значит что при клике по элементу ввода, значение которое находится внутри инпута, должно быть удалено. Если текст, который сейчас введен в input и тот, который находится в плейсхолдере одинаковый, это значит что пользователь еще ничего не вводил. По этому мы очищаем очищаем значение, которое есть в текстбоксе. Строка 31, если мы находим все инпуты с плейсхолдером и указываем, что хотим обработать все события blur. Событие blur, это когда элемент теряет свой фокус. Что мы делаем в таком случае, если при потери фокуса текущий элемент, который потерял фокус в текущем элементе ничего не содержит, мы в текст записываем то значение, которое ранее у нас было в плейсхолдере. Вот такое поведение. 16 пример- использование библиотеки modernizer и библиотеки jquery ui. На 15 строке мы создаем input, который используется для получения от пользователя даты. Вы помните, что браузер хром, опера отображают календарик, для того что бы пользователь мог выбрать дату. Но другие браузеры не поддерживают элемент type. Для того что бы можно было отобразить пользователю календарик, мы подключили на 6 строчке библиотеку jquery framework. На 7 строчке подключили jquery ui, в этой библиотеке находятся различные виджеты для построения пользовательского интерфейса. И 8 строчка, подключили стили определяющие то, как виджеты будут отображаться пользователю. 22 строка, модернайзером проверяем. Если у нас inputtypes.date не поддерживается, как раз этот input мы на 15 стркое использовали. Если найти элемент с id #dob и вызвать на этом элементе функцию datepicker. Задача этой функции немного видоизменить элемент input и этому элементу добавить календарь. Если мы запустимся в фаерфоксе, если мы кликаем по дате рождения, добавляется календарь и он корректно работает. Если мы попробуем запустится в опере, условия в 22 строке не срабатывают и смотрите как работает опера, в ней рисуется стандартный календарь. На этом ы заканчиваем первую часть урока, посвященную HTML5 формам. Мы разсмотрели новые элементы и просмотрели ряд атрибутов, которые упрошают валидацию данных, которые вводит пользователь. Вторая част нашего урока, это работа с элементами видео и аудио. Вначале давайте посмотрим на то, как браузер поддерживает элемент видео. С помощью этого тега в разметке мы можем воспроизводить видео файлы. Видите что практически все современные браузеры поддерживают этот тег. Вот видите общий процент поддержки 84, достаточно высокий результат. Давайте првоери элемент аудио, впринципе такая же картина, 84% браузеров полностью поддерживают этот элемент и позволяют им пользоваться. Это то что касается элементов разметки, но когда мы воспроизводим аудио или видео файл, у нас есть проблема связанная с кодеками. Не все кодеки могут читать браузеры. Вы должны учитывать возможности конкретных браузеров и форматы файлов, которые вы будете предоставлять. Давайте еще зайдем на сайт html5test.com, и посмотрим для фаерфокс, какие форматы он может воспроизводить. Если мы попробуем отркть оперу, то увидим, что опера поддерживает только ogg и webm. То же самое касается аудио, у нас есть ряд кодеков и каждый браузер может воспроизводить только определенный формат аудио. Давайте перед тем как перейти к самим примерам, разберем такую терминологию, которая пригодится нам для понимания того, какие файлы у нас воспроизводятся, а какие не воспроизводятся в браузерах. Вот если вернуться к презентации, на 4 слайде перечислены видеоконтейнеры, аудио кодеки и видеокодеки. Видеоконтейнеры или медиаконтейнеры это формат хранения мультимедийных данных в файловой системе. Если мы берем файл с расширением avi, то в этом файле находится аудиодорожка, видеодорожка, аудио и видео кодированы каким либо кодеком. Потому что если ифнормацию хранить без сжатия, то фалы будут занимать очень большой обьем. По этому, когда мы пользуемся медиафайлами, контент этих видеофайлов всегда обрабативаеься специальными кодеками, что бы файлы не занимали много места. И вот получается что медиаконтейнеры это формат как хранятся данные, а аудиокодеки и видеокодеки, это алгоритмы которыми были обработаны мультимедийные данные, перед тем как были помещени в медиаконтейнер. В свою очередь в этих файлах могут находится видеодорожки, котоыре были закодированы с использованием кодека или видеодорожки, которые были закодированы вот такими кодеками. Вы можете в википедии ввести запрос "медиаконтейнеры" и посмотреть форматы и увидите, что кодеков достаточно много. У них есть свои особенности , есть свои преимущества и недостатки. И по этому когда мы разрабатываем сайт мультимедийныйы, когда мы на сайте планируем отображать аудио и видео, мы должны предусмотреть различные файлы, в которых использовались различные аудио и видео кодеки. Потому что одни браузеры поддерживают одни аудиокодеки, другие браузеры - другие. Соответствено что бы мультимедийный контент был доступен для всех пользователей, нам нужно предусмотреть различные форматы в своем приложении. Давайте сейчас перейдем в visual studio и посмотрим несколько примеров, которые показывают как мы можем отображать мультимедийный контентк в HTML5 документе. Примеры очень простые, работать с мультимедийным контентом достаточно просто. Мы сейчас в этом убедимся. Открываем первый пример и посмотрите как мы можем пользователю отображать плеер на странице. Для этого не нужно подключать никаких внешних плагинов, никаких встраиваемых модулей. На 11 строке мы определяем элемент аудио, в атрибуте определяем адрес медиа файла, в котором находится звуковая дорожка. Мы определяем такие атрибуты как controls autoplay. Controls необходим, что бы этот эелемент был виден пользователю. Если мы его уберем, тогда на странице никакого контента отображаться не будет. Кнопочка play, pause, слайдер позволяющий спозиционировать на любую часть дорожки. Все эти эелементы будут у нас отсутствовать. Если мы добавляем controls, то браузер отображает свой собственный элемент управления. Атрибут autoplay нужен для того, что бы как только страница была заружена, мы сразу начали воспроизведение этого видеофайла. А если браузер не знает что такое элемент аудио, он будет это элемент воспринимать как обычный div. Раз это он будет делать, то на 12 строчке отобразится вот такой вот текст мы сразу можем показать пользователю информацию, что его браузер не поддерживает аудиоэлемент. Например внутри элемента аудио нужно определить несколько ссылок на скачивание последних версий браузеров. Ниже на странице перечислен перечень мультимедийных контейнеров, которые используються для хранения звуковых дорожек. Запустим этот пример и посмотрим что у нас получится. Видите открылась страница и сразу же началось воспроизведение звука. Благодаря тому, что у нас есть атрибут controls, вот элементы управления, они у насотобразились в документе. Если мы сейчас возьмем и удалим controls и запустим в таком варианте. Видите звук воспроизводится, но мы не можем контролировать, не можем его установить, сделать громче или тише. Каждый браузер рисует свой собственный формат, совве собственное оформление для элементов аудио. Если перейти к следующему примеру, то в следующем примере мы посмотрим как можно проверить, что браузер поддерживает ту или иную звуковую дорожку. Вот например во втором примере у нас есть на строке 18 элемент аудио, теже самые настройки как и в пред идущем варианте, но сейчас мы в адресе видеофайла указали vivaldi.ogg Ксли в преди идущем примере у нас был mp3 файл, то теперь вот такой вот формат дорожки. Если открыть папку аудио, у нас есть 2 заготовленых аудиофайла с различными кодеками. Теперь 22 строка как мы проверяем, может ли браузер воспроизвести кодек в котором закодирована звуковая дорожка. С помощью модернайзера мы проверяем есть ли поддержка аудио. Вот этот кусочек кода показывает, как с помощью модернайзера можно убедится что кодек работает в браузере. Если он не работает мы алертом отображаем, что аудио воспроизвести невозможно. Иначе строка 27 мы находим на странице элемент по айдишнику audio, получаем обьект, дальше 28 строчка на обьекте audio вызываем функцию canplaytype. Эта функция используется для того, что бы определить, поддерживает ли браузер какой то определенный формат аудио или видео файлов. Мы сейчас указываем параметр, который говорит что мы собираемся воспроизводить аудио в аудиоконтейнере ogg и кодек в котором был сжат аудиоконтент, это кодек vorbis. Если браузер знает как воспроизвести такой формат файлов, браузер сюда вернет обьект в котором будет находится текст. Если браузер не знает как воспроизводить такой формат, тогда в переменную будет записано значение null. И вот строка 29, мы проверяем. Если существует, мы алертом отображаем информацию. Значение, которое лежит в обьекте плюс текст. Иначе выводит вот такое сообщение. Давайте мы запустим пример,видите у нас сообщение probably. Достаточно такая страння реализация, если браузер может воспроизводить вот такие медиа данные, то в переменную записываеться вот такое сообщение. Если такой формат поддерживается. Вы увидели, что звук сразу еж запустился, потому что у нас идет параметр autoplay. Следующий пример показывает как мы можем сделать так, что бы аудиоэлемент позволил воспроизводить звуковую дорожку в любом браузере. Даже в том, который не поддерживает например mp3 файл. Когда вы создаете страницу, использующую аудио, постарайтесь в этой странице предусмтреть всевозможные кодеки, которые воспроизводяться всем браузерами. Вы должны сделать так, что бы ваша звуковую дорожка была в mp3, ogg, aac и других форматах. Закодирована любыми кодеками, что бы любой браузер мог воспроизвести файл. Если вы хотите предоставить перечень звуковых файлок, из которых браузер должен выбрать себе подходящий. Вы должны переключится на такой синтаксис. Вы создаете элемент аудио, но не указываете атрибут src. Вместо этого строка 14, вы указываете 2 вложенных элементов source с атрибутами src. Браузер начнет последовательно проверять эти пути, для того что бы определить, какой файл подходит для воспроизведения аудиодорожки. Если файл с расширением mp3 браузеру не подойдет, он попытается скачать ogg, если он подойдет то он начнет его воспроизводить. Если и этот файл не подойдет, браузер нарисует контрол, но он не будет воспроизводить звук. В итоге отобразится 15 строчка, что браузер не поддерживает элементы. Вот такой вот вариант позволит указать несколько звуковых дорожек и браузер выберит себе подходящую звуковую дорожку. Сейчас мы установили autoplay в элементе audio. Звук будет запущен, если мы нажмем кноку play. Следующий пример показывает как мы можем контролировать воспроизведение аудио с помощью java script кода. Сейчас на странице у нас есть элемент input с id playbutton и элемент аудио для которого заготовлено 2 source, что бы большинство браузеров могло воспроизвести звук. Дальше строка 14 по завершение аудио, когда браузер уже загрузить элемент, мы определяем элемент script, в котором будем контролировать этот элемент. Первое что мы делаем, это 15 строчка мы находим на странице элемент с id playbutton и указивае что на событие onclick, будет запускаться функция playsound. Длина у нас на 17 строчке, она в переменную music записывает элемент audio, а в переменную button записывает кнопку которая находится на 7 строке. На самом деле тут можно было немного по другому это сделать, но мы не будем переписывать этот пример. Дальше 23 строка, у нас идет проверка если элемент music в свойстве paused содержит значение true, это значит что плеер не запускался. Если это условие срабатывает мы на переменной music запускаем функцию play. Это значит что мы начинаем воспроизведение аудиодрожки, при этом значение кнопки меняется на значени stop. Если мы повторно нажимаем по кнопке, когда звуковая дорожка уже воспроизводится, то стркоа у нас не срабатывает, мы попадаем в блок else и мы вызываем функцию pause, при этом звуковая дорожка останавливается. И меняем знаечние текста кнопки stop на play, что бы при повторном нажатии мы можем воспроизводить. Получается теперь никакого оформления, которое дает браузер, у нас нету, но на жав на кнопу play у нас воспоизводится музыка, нажав на stop - останавливается. Вы можете стилизовать звуковать звуковые элементы и точно так же элементы видео. Вы можете стилизовать их как вам понравится, с помощью любих кнопок, изображений, добавив к статике java script код, который будет контролирова работу невидимого аудио или видео элемента в вашем документе. Следующий пример показывает как мы можем указывать, в какой части видеодорожки мы хотим начать воспроизведение. Давайте мы сейчас запустим этот пример, у нас есть 2 кнопки - начать воспроизведение с 30 секунды звуковой дорожки и остановить воспроизведение. Нажав на кнопку мы чутились в средине звукового файла, нажав на stop, мы остановили воспроизведение звука. Как такое поведение реализовано в java script коде. Опять элемент аудио мы размещаем где нибудь в документе. Его месторасположение неважно, потому что он никак не визуализируется пользователю. Естественно он должен находится до java script кода. 15 строка - есть функция playat, эта фунцкия принимает параметр second и в этой функции мы находим первый элемент аудио на странице, используем java script код getelementsbytagname, береме первый элемент аудио и используем currenttime этого элемента, записываем значение, которое было передано через параметры. Currenttime, это свойство которое определяет текущее расположение воспроизведения звукового или видео файла. Мы вводим значение, которое у нас в параметрах и запускаем функцию play. Получается, что теперь запукаем аудио не со значения 0, а со значения которое у нас находилось в переменной. На 13 стркое у нас есть кнопка, видите что в этой кнопке на нажатие мы указали запуск функции playat, со значение 30. Если мы нажимаем на кнопку stop, то вызивается функция stopaudio, очень похожая на playat, находим тот же элемент на странице, но currenttime указываем 0, и вызываем функцию pause, для того что бы остановить воспроизведение. Вот как мы можем контролироват ьвоспроизведение звукового файла с помощью java script кода. Перед тем как переходить к примерам с использованием видео элемента, давайте быстро разберем несколько слайдов, которые обобщают те примеры, которые только что мы посмотрели. На слайдах, которые есть в презентации у нас перечислены свойства, которые используются при работе с аудио и видео элементами. То что вы сейчас видите на слайде будет применяться не только для воспроизведения звука но и для воспроизведения аудио. Вот у нас есть несколько управляющих функций. Первая функция load, если мы запускаем эту функцию, это значит что мы просим браузер начать загрузку медифайла и начать его буферизировать. Если у пользователя слабый интернет, он может прослушивать аудио хотя он еще не нажал кнопку play. Еслы мы загружаем play, это значит что мы начинаем воспроизведение звуковой или видеозаписи, pause - остановка звука или записи. Если мы вызываем функцию canplaytype, мы в качестве параметра в эту функцию должны передать mime type аудио или видео контента и браузер нам вернет сообщение определяющее, может он воспроизводить такую запись или нет. Следующий слайд показывает основные свойства, эти свойтсва доступны нам только для чтения. Мы не можем менять эти свойства. Есть свойство duration, доступно как для аудио так для видео элемента. В этом свойстве хранится в секундах продолжительность мультмедийного файла. Свойство paused указывает на то, что воспроизведение аудиодорожки приостановлено. Свойство ended значит что медифайл мы до конца проиграли. Starttime это свойство содержащее в себе информацию о том в какой момент может быть введен буферизированый контент браузера, тоисть та секунда с которой может быть начато воспроизведение скачаного ранее контанта. Свойство error это информация оь ошибке, если она возникла при загрузке аудио или видео файла. Currentsrc это свойство с текущим адресом мультимедийного контента, который воспроизводится. Свойства, которые есть у аудио и видео элементов, доступны уже для чтения и записи, это свойство autoplay, которое казывает, что элемент нужно сразу же начать воспроизводить, как только же страница будет загружена. Сразу же начать играть аудио и видео. Мы это свойство не раз встречали в соих примерах. Loop, если этому свойству задать значение true, то это привведет к тому что аудио или видео файл, доигравший до конца автоматически начнет воспроизводится с самого начала. Currenttime, с помощью этого свойства можем менять текущее положение в видео или аудио файле. Controls для отображения элементов. Volume для настройки громкости, при этом мы можем указать значение от 0 до 1. Muted, если мы зададим этому свойству значение true, то звук у нас отключится. Autobuffer, если мы хотим что бы браузер начал закачивать аудио и видеофайфл еще до начала воспроизведения, мы можем поставить такой параметр, но этот параметр не будет срабатывать с autoplay. Эти 2 атрибута нельзя ставить одновременно. Ну и сейчас мы перейдем с вами к примерам, показывающим работу видео. Для видео есть несколько атрибутов это poster, с помощью такого атрибута мы можем указать картинку, которая будет видима бользователю до того как вивдео начнет воспроизводится. Width, heighth это значения которые мы устанавливаем что бы определить размеры вьюпорта той области в которой будет воспроизводится видео. А videowidth и videoheight это ширина и высота самого контента в видеофайле. Давайте сейчас перейдем к оставшимся примерам и посмотрим как настраивается видео эелемент. На 7 строке, мы точно так же как и создавали аудио, создаем видео. Указываем что хотим отображать элементы управления, что бы пользователь мог позиционироваться на интересующую часть файла. Что бы он мог его останавливать. С помощью loop мы указываем, что хотим повторно воспроизводить видео, когда доиграем до конца. С помощью атрибута poster, мы указываем изображение которое будет отображаться перед тем как видео начнет воспроизводится. Строка 9-11 указываем несколько разных форматов видеофайлов, для того что бы браузер начал воспроизводить тот файл, кодек которого он может прочитать и воспроизвести. Давайте запустим пример. Видите видеоэлемент, видим постер, видим контролы, можем расширить на весь экран, можем уменшить звук, видим общую продолжительность видеофайла. Если нажмем на плей, видим как у нас воспроизводится видеозапись. Если она дойдет до конца, она автоматически начнет воспроизводится сначала, так как у нас установлен параметр loop. В этом примере мы посмотрим как можно управлять воспроизвведением видео элемента с помощью java script кода. На 7 строке мы создаем элемент видео, даем ему id, если вы обратите внимание что атрибута control у нас нет. По этому управлять пользователь этим видеовоспроизведением не сможет через стандартное управление. Так же обратите внимание что видео эелемент поддерживает стилизацию через обычные scc стили, как и любой другой элемент разметки. На стркое 14 мы указываем что когда окно будет загружено, мы добавляем функцию, когда она запустится мы находим видео на странице и записываем его в переменную. Строка 18-19, мы уменьшаем размер этого вьюпорта, через который будет просматриваться видеозапись. Как у нас запись начнет воспроизводится, в какой момент мы хотим запускать видеодорожку. Когда курсор мышки зайдет на область videoelem у нас произойдет событие ommouseoven. Когда мышка выйдет за предели области, произойдет событие onmouseout. На 2 этих события мы повесили обработчики и в каждом обработчике мы пишем ключевое слово this и вызываем функцию play. Ключевое слово будет ссылатся на обьект в котором в данный момент будет находится функция. Функцию мы помещаем в событие onmouseout. На самом деле событие это обычное свойство обьекта. Получается вот эта функция находится в свойстве onmouseout. Свойство принадлежит обьекту videoelem. Соттветственно ключевое слово this дает нам доступ к обьекту videoelem и play и paused относятся к эелементу на который зашла мышка и с которого мышка уходит. Посмотрим как будет работать этот пример. Как только наводим мышку на серый прямоугольник, видео начинает воспроизводится, останавливается как только мышка выходит за пределы элемента. Вот приме контролирования видео посредством java script кода. Мы можем добавить где нибудь кнопки и указать что при нажатии на одну видео запускается, при нажатии на другую - останавливается. Стилизовать эти кнопки и сделать так, что бы плеер был с таким оформлением, которое необходимо для нашего сайта. В следующем примере мы посмотрим как можно создавать небольшие preview для видеофайлов. Что бы вы понимали что показывает этот пример, мы засупсить пример. У нас есть 3 блока, здесь будет отображаться реальное видео, здесь уменшенное, здесь будет копия еще более уменьшенная. Смотрите, мы сейчас нажимаем создать превью, видите одновременно у нас играет несколько видеофайлов. Для того что бы сделать такое поведение на странице нам нужно использовать новый для нас элемент, который называется canvas. На пошлом уроке мы обсуждали с вами, что в HTML5 появляется элемент canvas, задача котрого создавать растровую графику в HTML документе. Детальнее canvas мы разберем с вами на следующих занятиях, но сейчас мы минимально рассмотрим, что нужно сделать что бы видео могло дублироваться в канвасе. Рассмотрим то, как выглядит наша HTML разметка. У нас есть кнопка "создать превью" в обработчике на событие onclick, запускается функция generatepreview. И есть видео эелемент с высотой, шириной, стилем, что бы мы видели этот элемент на странице. Айдишник у этого элемента orig video. Строка 19-20 мы создаем 2 элемента canvas. Эти элементы имеют id previewmed и previewsm. Мы будем брать вот это видео, которое воспроизводится и дублировать его в первый и второй canvas. Это непосредственно область, где мы можем рисовать растровую графику. Теперь смотрите как работает функция generatepreview. Первое что мы делаем, это находим видео элемент по айдишнику. Вторая операция, мы находим первый canvas. Для того что бы получить доступ к канвасу и начать на канвасе отображать какие либо данные, нам нужно использовать функцию getcontext. Нужно получить контекст, с помощью которого будет воспроизводится рисование. Конекст мы получаем с параметром 2D, потому что мы стараемся рисовать двумерное изображение. Получив эту переменную мы будем ею пользоваться для того, что бы изменять значение в канвасе. То же самое мы делаем для второго канваса. Находим вначале эелемент, а потом извлекаем контекст. Самыйе важные переменные, это переменные контексты, в которые мы будем производить изменения в канвасе. Теперь 35, 37 строчка, мы задаем канвас размеры. И ниже на 41 строчке мы добаляем обработчик события начала воспроизведения видеозаписи. Мы берем элемент выдео. Мы вешаем в качестве обработчика функцию, запускающую еще одну функцию drawvideo. В эту функцию передается параметр this, это по сути ссылка на элемент видео в котором находится обработчик. Context1 и context2 это контекст, который мы получили получили из канвасов и которыми мы будет пользоваться при рисовании превьюшек. Сама функция на 49 строчке принимает 3 аргумента. Первое - проверяем не остановлено ли видео и не завершилось ли оно. Если хотя бы одно из этих значений будет true, то мы прекращаем воспроизведение и делаем return false. Если же видео еще не остановилось или не закончилось, то строка 57. Мы на канвасе1 рисуем изображение, это функция drawimage, предначзначена для того, что бы копировать картинки на канвас. Мы выдим что картинка которую мы рисуем, это будет элемент видео. Иуказываем размер этой картинки, которую мы хотим скопировать в канвас. Получаеться благодаря этим двум функциям, мы элемент видео переносим на канвас. Так как у нас видео постоянно воспроизводится, нам нужно постоянно делать копирование новых кадров, которые есть в видеоэлементе, по этому на 63 строчке мы запускаем функцию settimeout. В качастве первого параметра указываем функцию drawvideo. Каждые 25мс мы планируем запуск drawvideo, функция запускается и еще раз планирует свой запуск. И так у нас будет происходить до тех пор, пока мы не попадем в эту область и не закончится воспроизведение звуковой дорожки. А когда мы планируем запуск функции через интервал, мы указываем параметры которе нам попали в качестве аргумента. Просто повторно запускаем с периодичностью в 25мс. Вот такой пример, показывающий как можно пользоваться канвасом и совмещать канвас с видео. И последний пример, относящийся к видео это пример который показывает как можно контролировать то место, с которого мы начинаем воспроизведение видео. Если мы запусти 9 пример, у нас есть кнопка play pause, которые запускают и останавливают видео и кнопки 1.2.3, позволяющие воспроизвести первую, вторую и третюю часть видео. Нажимаем play, и нажимая на эти кнопки мы переходим на соответствующие части видеозаписи. Как этот код у нас реализован. Точно так же опередел элемент видео, есть несколько кнопок. У каждой кнопки есть свой айдишник, который привязан с java script кодом. На строке 39 мы указываем, что хотим запустить функцию когда данное окно будет загружено. Функция, которая будет запускатся найдет элемент видео и строка 31 расчитает какая продолжительность 1/3 данного видео. Теперь то что касается аудио и видео кодеков. Вы заметили что в данных примерах, когда мы создаем либо видео либо аудио элемент, мы определяем несколько элементов source. С помощью различных програмных продуктов вы можете создавать медиаконтент, используя кодеки. Один из вариантов, как вы можете подготовить для себя файл с различными форматами, это использование проигрывателя, который называется vlc. Вы можете указать какой файл вы собираетесь конвертировать. Вот наши файлы, которые мы смотрели в предидущих примерах. Нажимаем на кнопку convert. проигрватель показывает какой файл он собирается конвертировать. Мы указываем, где мы хотим сохранить файл. Далее у нас есть набор настроек. Если мы создаем видео, мы можем использовать 2 кодека, создать mp4 файл, в котором находится видео в формате H264 и звук в формате mp3. Мы можем имея 1 файл, получить все необходимые для воспроизведения форматы и использовать для себя в приложении. На этом мы заканчиваем урок, посвященный формам и воспроизведение медиафайлов, спасибо за внимание. До новых встреч.