Форматы и источники видео

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

Всё дело в том, что в текущий момент существует несколько форматов видео, каждый из которых хорошо поддерживается лишь некоторыми браузерами. Вот три самых распространённых формата и их поддержка:

· MPEG-4/H.264

· OGG/Theora

· WebM

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

<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogv" type="video/ogg"> <source src="video.webm" type="video/webm"></video>

В атрибуте src указывается адрес видеофайла, а в атрибуте type его тип (также там могут указываться и кодеки). Браузер из списка видеофайлов выбирает первый, который может проиграть и загружает его.

Атрибут type не является обязательным, так как браузер умеет сам определять тип и кодеки, но указывая тип явно, мы помогаем ему не ошибиться.

Аудио. Тег audio

Работа с аудио в HTML5 очень похожа на работу с видео, только у тега для аудио чуть меньше параметров.

Для вставки звука предназначен тег <audio>. Его основные атрибуты:

controls	пустой атрибут, при наличии которого отображается панель управления проигрывателем
preload	задаёт режим предзагрузки аудио, имеет 3 возможных значения: · none — не загружать ничего; · metadata — загрузить служебную мета-информацию; · auto — можно загрузить весь файл. значение по умолчанию зависит от браузера
src	задаёт адрес аудиофайла
autoplay	пустой атрибут, при наличии которого воспроизведение звука начинается автоматически

Форматы и источники звука

У звуковых файлов с поддержкой форматов дела обстоят лучше, чем у видео.

Для охвата большинства современных браузеров, достаточно использовать всего два формата:

· MP3

· OGG

И снова мы не можем указать только один файл в атрибуте src у тега <audio>. Мы должны так же, как и в случае с видео, перечислить адреса звуковых файлов в разных форматах с помощью тегов <source>:

<audio controls> <source src="sound.mp3" type="audio/mpeg"> <source src="sound.oga" type="audio/ogg"></audio>

Теги <source> в аудио работают так же, как и в видео.

Формы и HTML5

Испытание: формы — вспомнить всё

Вы уже наверняка прошли вводный курс посвященный формам. Давайте быстро вспомним, чему мы научились.

Используйте для выполнения задания теги:

· input с разными значениями type

· select

· label

У одного поля ввода должен быть дополнительный класс. Не забывайте размечать подписи к полям. Большая часть подписей содержит только текст, но одна подпись оборачивает и поле, и текст подписи.

_________ предыдущий материал_______________________

Первая форма

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

Чтобы создать форму, нужно использовать парный тег <form>, внутри которого размещаются поля формы. У тега <form> есть два важных атрибута:

· action задаёт адрес, URL, отправки формы;

· method задаёт метод отправки формы.

Пример:

<form action="https://echo.htmlacademy.ru" method="get"> поля формы</form>

Для отправки формы обычно используют методы get или post. Если не указать атрибут method, то будет использован get.

Метод get посылает данные формы в строке запроса, то есть они видны в адресной строке браузера и следуют после знака вопроса. Например:

https://www.google.com/search?q=htmlacademy

Метод get лучше использовать в поисковых формах, потому что он позволяет получить ссылку на результаты поиска и передать её кому-то.

Метод post посылает данные в теле HTTP-запроса и используется, когда нужно отправить много данных и ссылка на результат обработки этих данных не нужна. Например, при редактировании личного профиля.

Текстовое поле ввода

Большинство полей форм создаётся с помощью одиночного тега <input>. У этого тега два обязательных атрибута:

· type задаёт тип поля;

· name задаёт имя поля.

Тип поля влияет на то, как оно будет отображаться и вести себя. Самый распространённый тип — это text, который обозначает текстовое поле. Он же используется по умолчанию. Пример:

<form action="https://echo.htmlacademy.ru" method="get"> <input type="text" name="search"></form>

Имя поля нужно, чтобы правильно обработать данные на сервере. Обычно, имя поля должно быть уникальным в пределах формы, хотя есть исключения. Для задания имени поля используют латинские буквы и цифры.

⇐ Предыдущая1234567Следующая ⇒

Поделиться: