ogg» type=»video/ogg»> Your browser does not support the video tag. </video>
Как это работает
Атрибут controls добавляет элементы управления видео, такие как воспроизведение, пауза и громкость.
Это хорошая идея, чтобы всегда включать width и height атрибутов. Если высота и ширина не заданы, страница может мерцать во время загрузки видео.
Элемент <source> позволяет указать альтернативные видеофайлы, которые могут быть выбраны обозревателем. Браузер будет использовать первый распознанный формат.
Текст между тегами <video> и </video> будет отображаться только в обозревателях, не поддерживающих элемент
<video>.
HTML <video> Автозапуск
Для запуска видео автоматически используется атрибут autoplay:
Пример
<video autoplay> <source src=»movie. mp4″ type=»video/mp4″> <source src=»movie.ogg» type=»video/ogg»> Your browser does not support the video tag. </video>
Атрибут автозапуска не работает в мобильных устройствах, таких как iPad и iPhone.
Поддержка HTML-видео-браузера
В HTML5 есть 3 поддерживаемых видео форматов: MP4, WebM и OGG.
Поддержка браузера для различных форматов:
Browser
MP4
WebM
Ogg
Internet Explorer
Да
Нет
Нет
Chrome
Да
Да
Да
Firefox
Да
Да
Да
Safari
Да
Нет
Нет
Opera
Да (from Opera 25)
Да
Да
HTML Video — Типы медиа
Формат файла
Тип медиа
MP4
video/mp4
WebM
video/webm
Ogg
video/ogg
HTML-видео-методы, свойства и события
HTML5 определяет методы, свойства и события DOM для элемента <video>
.
Это позволяет загружать, воспроизводить и приостанавливать видео, а также устанавливать длительность и громкость.
Есть также события DOM, которые могут уведомить вас, когда видео начинает играть, приостановлено и т.д.
Пример: использование JavaScript
Play/Pause
Big
Small
Normal
Your browser does not support HTML5 video.
Video courtesy of Big Buck Bunny.
Для полной справки по тегам перейдите к нашей справка аудио/видео в формате HTML5.
Теги видео HTML5
Тег
Описание
<video>
Определяет видео или фильм
<source>
Определяет несколько мультимедийных ресурсов для элементов мультимедиа, таких как <Video> и <Audio>
<track>
Определяет текстовые дорожки в проигрывателях мультимедиа
обзор нового тега и его атрибутов
От автора: приветствую вас, дорогой читатель. Сегодня мы разберемся с вопросом, как вставить видео в html5, а также я постараюсь отметить заметный прогресс во вставке медиафайлов на веб-страницу.
Что нам дает html5 для вставки видео?
Многие знают, что одним из главных нововведений в новой спецификации стало появление специальных тегов для вставки аудио и видеофайлов на странице. Они должны были значительно упростить этот процесс, потому что до их появления все было достаточно печально.
Теперь можно с уверенностью сказать – закончилось время старых, неправильных способов вставки подобных файлов.
Элементы video и audio позволили добавить на страницу нужный медиафайл без добавления всяких дополнительных плагинов, проще говоря, без проблем.
Почему тегом video стоит пользоваться?
Возможно, вы знаете, что некоторые возможности HTML5 еще очень мало поддерживаются. Так вот, тег video относится к той части спецификации, которая поддерживается практически полностью. Конечно, не в IE6, но кому он сейчас нужен? Если говорить о нормальных, более менее современных браузерах, то все они смогут понять этот тег и правильно обработать его.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
От теории к делу
Ладно, переходим к практике. Как вставить видео на сайт? Как я уже говорил, для этого нужно использовать парный тег video. Напомню вам, что перед использованием html5 элементов полезно делать следующее:
1. Указать правильный доктайп:
2. Указать тип новых элементов как блочный: Video (и другие новые теги)
Теперь мы сделали достаточно, чтобы нормальные браузеры нормально отобразили эти элементы.
Собственно, если говорить о вставке медиафайлов, то нужно как-то указать браузеру путь к самому файлу. Это мы сделаем, но проблема в том, что разные браузеры поддерживают разные форматы и то, что работают в одном, не работает в другом.
Например, Chrome (самый крутой браузер) поддерживает все форматы (ogg, mp4, webm), а IE только mp4. Так вот, если вы хотите кроссбраузерности, то придется указывать несколько форматов, то есть для начала нам нужно наше видео сконвертировать в 3 формата, потом забросить на сервер, и только после этого вставлять. Как? С помощью тегов source:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3 Узнать подробнее
В общем, вот такой достаточно привычный синтаксис, но все же в нем есть кое-что новое. Например, в атрибуте type сначала нужно указать MIME-тип файла, а после этого кодеки, которые нужны для его воспроизведения.
В целом, кодеки вам не нужно трогать – их просто копируем, тоже самое с типом MIME. Вам нужно лишь задать правильный путь к файлу, чтобы все заработало, как надо. На веб-странице появился наш ролик. Чтобы у него были элементы управления, нужно добавить пустой атрибут controls.
Атрибуты тега video
Этот элемент также поддерживает очень много полезных атрибутов, которые позволяют управлять им. Давайте коротко рассмотрим их все:
Autoplay – пустой атрибут без значения. Если его указать, то воспроизведение начнется автоматически после полной загрузки страницы. Такой трюк часто делают на продающих страницах, чтобы моментально привлечь внимание человека.
Controls – очень важный параметр, тоже без значения. Он добавляет элементы управления. Собственно, он используется практически всегда, потому что нужно предоставить человеку возможность ставить видео на паузу или перематывать.
Loop – если этот параметр активен, воспроизведение начнется сначала после того, как оно завершилось.
Иногда это вполне уместно. Например, если ролик очень интересный.
Preload – еще один интересный параметр, при его добавлении видео начнет загружаться вместе с загрузкой страницы. Таким образом, когда человек захочет его посмотреть, оно уже может быть частично или полностью загружено, что хорошо, поскольку человеку не придется ждать.
Это одна сторона медали. Но у многих сегодня проводной интернет и никаких проблем с загрузкой и так не возникнет. К тому же, важно помнить о пользователях, у которых не безлимитный трафик – автоматическая загрузка без их желания может их не обрадовать.
Poster – в качестве значения этому атрибуту передается путь к изображению, которое станет миниатюрой к ролику. В целом, это может иметь значение – красивая, привлекающая внимание картинка может побудить пользователя к просмотру. C помощью параметра poster можно задать путь к изображению, которое будет видно до начала воспроизведения нашего ролика. Например:
<video controls poster = «poster. png»>
<video controls poster = «poster.png»>
Все данные атрибуты записываются в контейнере video, а не в одинарных тегах source. В них нужно указывать только путь к файлу и типы MIME.
Я тут не указал еще два параметра – ширина и высота, но я считаю, что их правильнее будет настроить уже в css. Там же к тегу video можно применить много других свойств, хотя не все из них могут подействовать.
Как вставить видео с youtube
Но если видеоролик есть на youtube и его вам нужно вставить в свою запись, как это сделать? Тут я вижу как минимум два варианта. Во-первых, у самого ролика на youtube есть блок «Поделиться». Там можно взять html-код, который потом нужно вставить в редакторе (в режиме html).
Во-вторых, если у вас сайт на wordpress, то там можно просто по ходу записи в нужном месте вставить адрес видео, и движок автоматически встроит его на страницу в этом месте. Это самый простой способ и он работает. WordPress берет все на себя.
С появлением новых тегов вставка медиафайлов на веб-страницу значительно упростилась. Несомненно, любому веб-разработчику нужно знать, как это делается. К тому же, с помощью селектора video или стилевых классов вы можете дополнительно оформить свои ролики, добавить им рамку или какие-то другие декоративные элементы. На этом я заканчиваю данную статью, оставайтесь с webformyself, чтобы увеличивать свои знания в области сайтостроения.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотреть
Видео курс HTML 5, CSS и созданию сайтов. HTML5 формы. Теги video и audio
На сайтах часто размещаются видео материалы, а на некоторых сайтах необходимы инструменты для воспроизведения звуковых файлов. В HTML5 появляется ряд элементов, с помощью которых упрощается создание мультимедийных страниц с использованием аудио или видео. Для этого урока Вам потребуются базовые знания JаvaScript для того, чтобы контролировать воспроизведение мультимедийного контента в HTML5 странице. Также Вы узнаете, как можно кодировать звук и видео различными кодеками для поддержки воспроизведения в разных браузерах. Во второй части урока будут рассмотрены новые элементы форм, которые позволяют упросить создание страниц регистрации, авторизации и других элементов взаимодействия с пользователем.
Здравствуйте. Тема сегодняшнего урока: работы с формами, а также видео и аудио элементами. Наш урок будет разбит на 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, если мы сейчас попробуем отправить на сервер значение, браузер не дает нам отправить данные, он пишет что мы не соблюли формат данных, если мы напишес здесь [email protected] то теперь при нажатии отправить, браузер не указывает ошибку 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 файл, в котором находится видео в формате h364 и звук в формате mp3. Мы можем имея 1 файл, получить все необходимые для воспроизведения форматы и использовать для себя в приложении. На этом мы заканчиваем урок, посвященный формам и воспроизведение медиафайлов, спасибо за внимание. До новых встреч.
Какой бывает HTML5-стриминг (и почему mp4-стриминга не существует)
Нередко клиенты спрашивают, умеет ли наш сервер «mp4-стриминг в HTML5». В 99% случаев спрашивающий не понимает о чём говорит. В этом сложно винить клиентов: из-за путаницы с терминами, технической сложности и большого разнообразия вариантов стриминга запутаться очень легко.
В этой статье мы расскажем, какой бывает HTML5-стриминг, какие варианты хорошие, и почему, чёрт побери, нельзя говорит «mp4-стриминг».
Термины
HTML5-видео — это когда вы вставляете в веб-страницу тег <video> и указываете ему какой-то src. HTML5-стриминг — это то же HTML5-видео, но когда в src не готовый файл, а постоянно обновляющийся видеопоток. Ролик на Ютубе — это HTML5-видео, трансляция в Твитче — HTML5-стриминг.
Тегу <video> неважно, как видеопоток формируется и передаётся, и сможет ли браузер его проиграть. Главное, чтобы в src была ссылка на какой-то видеопоток. Говоря техническим языком, спецификация ничего не говорит о том, какие протоколы, транспорты и кодеки поддерживаются в HTML5-видео.
a Протокол — это то, как два участника видеосвязи (почти всегда это клиент и сервер) обмениваются данными с целью получения данных.Клиентом называют того, кто приходит к серверу и инициирует сессию связи. Видеопоток может течь от сервера к клиенту (тогда это обычное проигрывание) или от клиента к серверу (тогда это публикация). Даже когда гигантский шкаф, жрущий электричество как многоквартирный дом, приходит к маленькой IP-камере, то она будет сервером, а этот шкаф клиентом.
Протокол обычно подразумевает хотя бы команду Play (начать проигрывание), но иногда есть и расширенные варианты: пауза, продолжение, публикация, перемотка и т. п.
Примеры протоколов: RTSP, RTMP, HTTP, HLS, IGMP.
Транспорт, или транспортный контейнер, или контейнер — это то, как сжатое видео упаковывается в байты для передачи от одного участника к другому (по какому-то протоколу).
Примеры контейнеров: MPEG-TS, RTMP, RTP.
Обратите внимание, что RTMP оказался и в протоколах, и в транспортах. Это потому, что в описании RTMP есть спецификация и того, что должныслать друг другу стороны, чтобы видео потекло (т. е. протокол), и того, какупаковывать видео (т. е. транспорт). Так бывает не всегда. Например в протоколе RTSP видео упаковывается в транспорт RTP.
Кодек — многозначный термин. Здесь он означает способ сжать сырое видео. Разница между кодеком и транспортом в том, что кодек — это про подготовку видео, а транспорт — про передачу видео по протоколу. Видео, сжатое одним кодеком, можно пересылать по разными протоколам и разными транспортами. Большинство видеостриминговых серверов не залезают глубже кодированного видео и оперируют только протоколами и транспортами.
Примеры кодеков: h364, aac, mp3.
Из-за того, что термин многозначный, возникает путаница с названиями. Например, H.264 — это стандарт того, как упаковать поток огромных сырых видеокадров в очень мало > байтов, libx264 — это библиотека для сжатия по этому стандарту, а ещё есть одноимённый софт под Винду, который умеет декодировать h364 и проигрывать его на экране.
Итак, в спецификации HTML5 не описаны протоколы, транспорты и кодеки. Поэтому авторы браузеров сами выбирают, что поддерживать, а под «HTML5-стримингом» подразумевают разные вещи.
При этом есть комбинации, которые поддерживаются значительной частью браузеров. Рассмотрим самые перспективные.
HLS
HLS — это h364-видео и aac- или mp3-аудио, упакованное в транспорт MPEG-TS. Поток разбивается на сегменты, описанные в m3u8-плейлистах, и раздается по HTTP. HLS поддерживает мультибитрейтные потоки, Live/VOD. Вариант очень простой, но в то же время имеет много деталей, из-за чего на разных устройствах работает по-разному.
Разработали HLS в Эппле, поэтому изначально он работал только в Сафари на Айос и Маке. До сих пор даже Сафари на Винде не умеет играть HLS. Тем не менее, сейчас HLS умеют проигрывать все телевизионные приставки и даже почти все устройства на Андроиде.
Но не всё гладко. Производители сторонних плееров плюнули на стандарт Эппла в части донесения разных аудиодорожек и добавили проигрывание всего что есть в обычном MPEG-TS: mpeg2 video, mpeg2 audio и т. п. Из-за этого приходится отдавать разные форматы плейлистов для разных плееров.
MPEG-DASH
MPEG-DASH — обычно это h364/h365-видео и aac-аудио, упакованное в транспорт mp4, или vp8/vp9, упакованное в WebM, хотя стандарт и не привязан к конкретным кодекам, протоколам и транспортам. Как и в HLS, поток может разбиваться на сегменты, но это необязательно. Вместо плейлистов — MPD-манифест в XML.
MPEG-DASH во многом похож на HLS. Возможно, он даже популярнее, ведь такие гиганты как Ютуб и Нетфликс уже несколько лет используют его как основной способ раздачи контента.
MPEG-DASH хорош тем, что в большинстве браузеров работает нативно, через MSE (о том, что это такое, — чуть ниже). Для него даже нет реализации на Флеше — это честный, бескомпромиссный HTML5.
Определенно, MPEG-DASH — самый настоящий HTML5-стриминг, за ним будущее.
MSE
Когда стало ясно, что Флеш всё-таки умрёт (после сотни ложных похорон), ребром встал вопрос о том, что придёт ему на смену. Хорошо было бы получить в браузерах возможность проигрывать видео по качеству и удобству близко к тому, что умеет Флеш (а он это делает всё-таки хорошо).
Во Флеше давно появился очень удобный механизм для универсального проигрывания разных вариантов — appendBytes. Суть в том, что пользовательский код сам как хочет скачивает кадры сжатого видео, упаковывает в оговоренный контейнер (с Флешем это flv) и засовывает в видеопроигрыватель. Т. е. протокол и транспорт реализуются в пользовательском коде, запускаемом в браузере.
MSE (Media Sources Extensions) — это расширение спецификации HTML5, которое позволяет делать то же, что делает appendBytes во Флеше. К сожалению, MSE намного сложнее как в понимании, так и в реализации.
MPEG-DASH, созданный на его базе, ещё хитрее, поэтому работать с ними то ещё удовольствие: тонны XML, парсинг бинарных контейнеров в Яваскрипте, непродуманные на этапе дизайна вопросы нарезки на сегменты — всё как мы любим, всё что нужно для единой безглючной реализации во всех браузерах.
Интересно, что MSE работает не только с MPEG-DASH, но и с HLS. Существует реализация hls.js, которая скачивает HLS-плейлисты, скачивает MPEG-TS-сегменты, перепаковывает их в нужный для MSE формат и играет через MSE. Эппл даже сделала шаг в сторону совместимости с MPEG-DASH — использование mp4-контейнеров в HLS.
К концу 2017 года Флеш скорее всего умрёт окончательно, и уже сегодня можно смело начинать проект с MPEG-DASH.
WebRTC
Во Флеше была сделана годная попытка в одной технологии реализовать и риалтайм-общение, и массовый броадкастинг. К сожалению, в HTML5 так не вышло. Для просмотра трансляций у нас есть MSE, а для видеозвонков — WebRTC.
WebRTC — это SIP в браузере: способ организовать аудио- и видеоканал и канал данных между двумя браузерами при посредничестве сервера.
Технология не предназначена для стриминга, но в принципе может и его, так что было бы неправильно забыть про него. WebRTC тоже считается HTML5, потому что вроде как ничего кроме Яваскрипта в браузере не требует. Зато требует наличия последних версий обоих популярных браузеров, а с Эджем пока вообще не совместимо.
Путаницу в понимании WebRTC вносит его использование в торрент-доставке телевидения. Суть в том, что браузеры через WebRTC организуют сеть каналов данных, а дальше по этой сети раздаются HLS- или MSE-сегменты видео, а проигрывание происходит через Флеш или MSE. Т. е. WebRTC — для доставки, MSE — для проигрывания. Важно не путать это с использованием WebRTC для проигрывания видео.
Так что там с mp4-стримингом?
Любой современный браузер скорее всего сможет по протоколу HTTP запросить файл, упакованный в транспорт mp4 и содержащий внутри видео, сжатое кодеком h364/aac. И даже попытаться проиграть его. Это самый удобный, понятный и стандартный вариант проигрывания файлов. Лежит себе файлик на диске, nginx его отдает. Код, проигрывающий mp4 в браузерах достаточно хорош. Например, он умеет даже скачивать куски видео по необходимости (в отличие от Флеш-плеера, который скачивает видео целиком).
Вокруг h364 сложилось немало шумихи по поводу его «закрытости» и «несвободности». Так что есть «открытая» альтернатива, которую форсит Гугл — видеокодеки vp8 и vp9, упакованные в транспорт WebM. WebM — это подмножество транспорта mkv (a. k. a. Матрёшка), который очень похож на mp4 по сути, но отличается от него своей «бинарностью».
Именно отсюда растут ноги у такого явления как «mp4-стриминг», который устроен как WebM. Дело в том что в обычном mp4 в самом начале указывается размер всего контейнера. Поэтому, если мы хотим отдать по обычному mp4 прямой эфир, у нас ничего не получится. А чтобы всё-таки получилось и можно было создавать mp4 без фиксированного конца, придуман следующий ход: сначала пишется mp4 без кадров, а потом в конце подписываются блоками по несколько секунд фрагменты с кадрами. Это называется mp4 fragmented, или mp4 streaming.
По сути это никакой не стриминг, а костыль, позволяющий создать его видимость. Mp4 — отличный формат для скачивания видео, но негодный для стриминга, так что про него можно просто забыть и никогда не использовать термин «mp4-стриминг».
Выводы
Хорошие варианты HTML5-стриминга: MPEG-DASH и HLS. Они подходят и для мобильных устройств, и для ПК, и для приставок.
Флеш всё-таки умрет, и MSE уже сейчас занимает его место.
WebRTC — HTML5 технология, в первую очередь, для общения, а не для телевизионного вещания.
Не приносите в веб старые кодеки и не пытайтесь доставлять mp2video и mp2audio по HLS, даже если ваш плеер это умеет.
Никогда не говорите «mp4 стриминг». Пожалуйста.
Добавление видео и аудио с использованием HTML5
Буду с вами честен. Я всегда считал добавление мультимедиа на веб-страницы с использованием HTML 4.01 настоящей мукой. Это не сложный, а просто запутанный процесс. HTML5 делает все значительно проще. Необходимый для этого синтаксис очень похож на тот, что используется для добавления изображений:
<video src=»myVideo. ogg»></video>
Это глоток свежего воздуха для большинства веб-дизайнеров! Вместо того чтобы писать объемный код, необходимый для включения видео в страницу, можно поручить тегу <video></video> (или тегу <audio></audio> для аудио) всю тяжелую работу. Можно также вставить примечание между открывающим и закрывающим тегами для уведомления пользователей на тот случай, если они будут применять несовместимые с HTML5 браузеры. Кроме того, имеются дополнительные атрибуты, например height и width. Добавим их:
<video src=»video/myVideo. mp4″>What, do you mean you don’t understand HTML5?</video>
Теперь, если мы вставим приведенный чуть выше фрагмент кода в разметку нашей страницы, а затем взглянем на нее в браузере Safari, то увидим, что элементы управления воспроизведением отсутствуют. Чтобы они отобразились по умолчанию, нам необходимо добавить атрибут controls. Можно также добавить атрибут autoplay (но делать это все же не рекомендуется, поскольку никому не нравится, когда воспроизведение видео запускается автоматически). Добавление названных атрибутов демонстрируется в следующем фрагменте кода:
<video src=»video/myVideo. mp4″ controls autoplay>What, do you mean you don’t understand HTML5?</video>
Результат применения приведенного чуть выше фрагмента кода показан На рисунке 4. 6.
На нашей странице появилась область воспроизведения с загруженным видео.
К прочим атрибутам относится preload для управления предварительной загрузкой мультимедиа (разработчики, впервые использовавшие HTML5, должны обратить внимание на то, что атрибут preload пришел на смену autobuffer), loop для повторного воспроизведения видео и poster для определения кадра видео, который будет показан до начала воспроизведения. Последний атрибут окажется полезен, если в воспроизведении видео возможна задержка. Чтобы использовать тот или иной атрибут, нужно просто добавить его в соответствующий тег. Вот пример включения всех упоминавшихся чуть ранее атрибутов:
<video src=»video/myVideo. mp4″ controls autoplay preload=»auto» loop poster=»myVideoPoster. jpg»>What, do you mean you don’t understand HTML5?</video>
Обеспечение альтернативных файлов-источников.
Первоначальная HTML5-спецификация предусматривала поддержку всеми браузерами прямого воспроизведения (без плагинов) видео и аудио в контейнерах Ogg. Однако из-за споров между участниками рабочей группы HTML5 требование по поводу поддержки Ogg (включая Theora-видео и Vorbis-аудио) в качестве базового стандарта было удалено из более поздних версий HTML5-спецификации. По этой причине сейчас одни браузеры поддерживают воспроизведение одного набора видео и аудиофайлов, а другие — другого. Например, Safari поддерживает использование в сочетании с элементами <video> и <audio> только медиа MP4/H.264/ AAC, в то время как Firefox и Opera поддерживают лишь Ogg и WebM.
К счастью, есть способ обеспечить поддержку разных форматов в одном теге. Однако это не избавит нас от необходимости создавать разные версии нашего мультимедиа. Хотя мы все и держим пальцы скрещенными в надежде на то, что текущая ситуация со временем разрешится, между тем, вооружившись разными версиями нашего файла, мы можем разметить <video> следующим образом:
Если браузер поддерживает воспроизведение Ogg, то он будет использовать соответствующий файл; в противном случае браузер перейдет к следующему тегу <source>.
Резервные варианты для устаревших браузеров.
Использование тега <source> позволяет предусмотреть при необходимости несколько резервных вариантов. Например, наряду с обеспечением версий MP4 и Ogg мы, если потребуется включить подходящий резервный вариант для Internet Explorer версии 8 и ниже, можем добавить в качестве альтернативы Flash-видео. Более того, если у определенного пользователя не окажется подходящей технологии воспроизведения, мы можем предусмотреть для него ссылки на скачивание самих файлов:
Title=»No video playback capabilities, please download the video below» /> </object>
<p> <b>Download Video:</b>
MP4 Format: <a href=»myVideo. mp4″>»MP4″</a>
Ogg Format: <a href=»myVideo. ogv»>»Ogg»</a>
</p>
</video>
Теги <audio> и <video> работают почти одинаково.
Тег <audio> работает по тому же принципу и с теми же атрибутами, что и <video>, не поддерживая лишь атрибуты width, height и poster. Да, вы можете использовать теги <video> и <audio> почти как взаимозаменяемые. Основное различие между ними заключается в том, что <audio> не имеет области воспроизведения для видимого содержимого.
Вам также могут быть интересны следующие статьи:
Реализация video и audio в HTML5, шаблоны, schema.org микроразметка
В статье описаны строение audio и video контейнера HTML5, теги video, audio, source, track и их атрибуты с возможными значениями. Приведены HTML шаблоны и примеры реализации воспроизведения мультимедийных файлов на основе встроенных в браузер возможностей. Показано подключение к видео текстовой дорожки субтитров, заголовков, оглавления при помощи файлов формата WEBVTT с примерами. Представлены HTML5 шаблоны кода с микроразметкой по schema.org для аудио и видео. Указаны основные для web форматы аудио и видео файлов с их MIME типами и инструменты для конвертации видео и аудио в эти форматы.
В HTML5 присутствуют новые возможности, позволяющие выполнять проигрывание аудио и видео файлов напрямую браузером без использования сторонних программ. Пока, несмотря на то, что HTML5 уже не новость, имеются еще разногласие в том, как браузеры обрабатывают теги video и audio и как отображают сам плеер. Одни это делают все лучше с каждой новой версией, другие пока еще отстают. Глобально же, тенденция идет к тому, что браузеры будут предоставлять все больше функционала для проигрывания мультимедиа файлов.
Скринкаст: Видео обзор этой статьи
Смотреть на YouTube
HTML5 video не поддерживается вашим браузером. Скачать видео
Скринкаст: видео обзор статьи Реализация video и audio в HTML5, шаблоны, schema.org микроразметка на сайте Andew.ru
Автор: Andrey Boldyrev
org микроразметка — andew.ru»>Скринкаст: Пример использования шаблонов
HTML5 video не поддерживается вашим браузером. Скачать видео
Скринкаст: примеры использования шаблонов из статьи Реализация video и audio в HTML5, шаблоны, schema.org микроразметка — andew.ru
Автор: Andrey Boldyrev
В HTML5 воспроизведение браузером аудио и видео файлов реализуется посредством тегов <audio> и <video>, которые предоставляют управляемый сценариями объект. Использование этих тегов позволяет проиграть мультимедийный файл на web странице, управлять его воспроизведением путем задания атрибутов для тегов <audio> и <video>, и дополнительных, вложенных в них тегов. В простейшем варианте использования достаточно вставить на web страницу нужный вам тег <audio> или <video> и задать через их атрибуты несколько параметров. И это уже позволит проиграть мультимедиа файл на странице в HTML5 плеере. Также, поскольку элементы <audio> и <video> являются объектами для JS, у них доступны свойства, методы и события, что предоставляет расширенные возможности полного управления HTML5 плеером через JavaScript . Однако, ввиду того, что браузеры могут иметь различия в реализации управления объектами аудио и видео посредством JS, то более лучшим выбором для этих целей будет использование специальных кроссбраузерных JS библиотек. Одна из таких библиотек под названием videojs будет описана в отдельном посте. К тегам <audio> и <video>, как и к другим тегам HTML применима стилизация посредством CSS. Детальную спецификацию для аудио и видео в HTML5 можно посмотреть на сайте World Wide Web Consortium .
HTML5 видео и аудио развивающийся стандарт и он не связан ни с одним форматом аудио или видео, поэтому между браузерами существуют различия в поддерживаемых ими форматами аудио и видео файлов. Это различие сейчас компенсируют тем, что кодируют оригинальный файл несколькими разными кодеками и подключают все эти версии файлов к тегам <audio> или <video> через вложенные теги <source src=»URL»>. Однако среди поддерживаемых браузерами форматов аудио и видео файлов намечаются лидеры. Для видео это, конечно же, формат mp4 (H.264), и для аудио это формат mp3 и m4a. Сейчас уже, наверное, все браузеры способны проигрывать файлы этих форматов. Так же, браузеры Firefox, Chrome и Opera договорились поддерживать стандарт WEBM в качестве общего видео формата. С моей точки зрения, оптимальным на сейчас вариантом использования HTML5 видео и аудио будет схема основанная на использовании одного мультимедийного файла в формате mp4(H.264) для видео и m4a для аудио и JSHTML5 плеера. К аудио или видео контейнеру подключается только один файл в указанном формате. Сейчас большинство браузеров способны воспроизводить mp4 формат. Подключенная же JS библиотека выполнит стилизацию встроенного в браузер плеера. Если браузер не будет поддерживать формат mp4/m4a, то JS плеер, в таком случае, реализует подключение Flash плеера для воспроизведения мультимедийного файла. Учитывая, что mp4 формат стал сильно популярен, можно надеяться на низкую вероятность проблем с его воспроизведением в браузерах. Такая схема требует наличие всего одного мультимедийного файла в указанном формате, что экономит место на диске и ресурсы для обработки файлов. Также, такая схема будет стратегически более правильной, так как тенденция идет к тому, что браузеры все больше и лучше выполняют реализацию HTML5 видео и аудио.
Для указания HTML5 плееру проигрываемого файла нужно, помимо URL файла, передать и MIME тип файла, что бы браузер понимал какой кодек ему нужно использовать. Ниже в таблице привожу наиболее распространенные форматы файлов и их MIME типы.
Форматы файлов и их MIME типы
Файлы мультимедиа
Расширения
Mime тип
Аудио mp3
mp3
audio/mpeg
Аудио mp4
m4a
audio/mp4
Аудио webm
webm
audio/webm
Аудио ogg
ogg
audio/ogg
Видео mp4 (H. 264)
mp4
video/mp4
Видео webm
webm
video/webm
Видео ogg
ogv
video/ogg
Инструменты кодирования аудио и видео файлов
Для кодирования видео и аудио файлов в приведенные выше web форматы можно воспользоваться открытой программой Miro Video Converter , которая поддерживает конвертацию аудио и видео файлов в основные распространенные для веба форматы (MP4, WebM, Ogg Theora, MP3 и т.п.). Miro Video Converter доступен для разных операционных систем — Windows, Mac и Linux и является графической оболочкой для консольных утилит ffmpeg и ffmpeg2theora , которые удобно использовать на web сервере для обработки загружаемого видео и аудио в автоматическом режиме.
Пример стандартного использование HTML5 тега <audio>:
HTML5 код примера audio с микроразметкой schema.org:
<div itemscope itemtype="http://schema.org/AudioObject">
<h4 itemprop="name">Заголовок аудио</h4>
<meta itemprop="description" content="Описание аудио...">
<!-- additional schema.org data -->
<meta itemprop="isFamilyFriendly" content="true">
<meta itemprop="encodingFormat" content="mp3">
<meta itemprop="duration" content="PT04M59S">
<meta itemprop="uploadDate" content="2015-12-31">
<meta itemprop="image" content="Full URL to image.jpg">
<meta itemprop="alternateName" content="Альтернативный заголовок аудио">
<!-- end of additional data -->
<audio controls preload="none">
<source src="URL to file.mp3" type="audio/mpeg" />
<source src="URL to file. ogg" type="audio/ogg" />
<source src="URL to file.m4a" type="audio/mp4" />
<p>HTML5 audio не поддерживается вашим браузером.</p>
<p><a itemprop="contentUrl" href="URL to file.mp3">Скачать audio</a></p>
</audio>
<p itemprop="author" itemscope itemtype="http://schema.org/Person">
Автор
<a href="URL" itemprop="url"><span itemprop="name">Имя автора</span></a>
<meta itemprop="image" content="Full url to person.jpg">
</p>
</div>
Так будут выглядеть извлеченные из кода данные микроразметки для описанного выше шаблона аудио.
audioobject
itemType = http://schema.org/AudioObject
name = Заголовок аудио
description = Описание аудио...
isfamilyfriendly = true
encodingformat = mp3
duration = PT04M59S
uploaddate = 2015-12-31
image = Full URL to image. jpg
alternatename = Альтернативный заголовок аудио
contenturl
href = URL to file.mp3
text = Скачать audio
author
person
itemType = http://schema.org/Person
url
href = URL
text = Имя автора
name = Имя автора
image = Full url to person.jpg
Минимальная разметка аудио по schema.org должна включать itemprop=»name», itemprop=»description», itemprop=»contentUrl». Остальные свойства не являются обязательными.
Пример стандартного использование HTML5 тега <video>:
В демонстрации я применил для тега <video> через атрибут classCSS стили, делающие ширину области видео динамической в зависимости от размера экрана. По высоте плеер подстроиться сам. Попробуйте изменить размер окна браузера для того, что бы увидеть как это работает. Поэтому в источнике кода этой демонстрации нет атрибутов width и height для тега <video>, их заменяют CSS стили. Но в листинге кода шаблона этот примем не показан, т.к. является уже частностью.
HTML5 код примера video с микроразметкой schema.org:
<div itemscope itemtype="http://schema.org/VideoObject">
<h4 itemprop="name">Заголовок видео</h4>
<div itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<img itemprop="contentUrl" src="URL to video-thumbnail.jpg|png" />
<meta itemprop="width" content="100">
<meta itemprop="height" content="100">
</div>
<p><a href="URL">Смотреть на YouTube</a></p>
<meta itemprop="duration" content="PT14M59S">
<meta itemprop="isFamilyFriendly" content="true">
<meta itemprop="uploadDate" content="2015-12-31">
<meta itemprop="description" content="Краткое описание для видео. ..">
<video controls preload="none" poster="URL to video-poster.jpg|png">
<source src="URL to file.mp4" type="video/mp4" />
<source src="URL to file.webm" type="video/webm" />
<source src="URL to file.ogv" type="video/ogg" />
<track kind="subtitles" label="RU" src="URL to subtitles-ru.vtt" srclang="ru" default>
<track kind="subtitles" label="EN" src="URL to subtitles.vtt" srclang="en">
<p>HTML5 video не поддерживается вашим браузером.</p>
<p>Скачать видео: <a itemprop="url" href="URL to file.mp4">Заголовок видео</a></p>
</video>
<p itemprop="author" itemscope itemtype="http://schema.org/Person">
Автор видео
<a itemprop="url" href="URL to author web page"><span itemprop="name">author name</span></a>
<meta itemprop="image" content="Full URL to author.jpg">
</p>
<img itemprop="thumbnailUrl" src="URL to file. jpg|png" />
</div>
Так будут выглядеть извлеченные из кода данные микроразметки для описанного выше шаблона видео.
videoobject
itemType = http://schema.org/VideoObject
name = Заголовок видео
thumbnail
imageobject
itemType = http://schema.org/ImageObject
contenturl = URL to video-thumbnail.jpg|png
width = 100
height = 100
duration = PT14M59S
isfamilyfriendly = true
uploaddate = 2015-12-31
description = Краткое описание для видео...
url
href = URL to file.mp4
text = Заголовок видео
author
person
itemType = http://schema.org/Person
url
href = URL to author web page
text = author name
name = author name
image = Full URL to author.jpg
thumbnailurl = URL to file.jpg|png
Минимально необходимая для поисковиков разметка видео по schema. org должна включать все приведенные в коде примера свойства itemprop за исключением блока itemprop=»author», который является не обязательным для поисковиков и его можно удалить, если нет данных для его заполнения. Для video-thumbnail яндекс требует указывать микроразметку по schema.org как itemprop=»thumbnail» в виде ImageObject, а Google требует указывать как itemprop=»thumbnailUrl», поэтому приходиться вставлять video-thumbnail файл два раза, и поэтому второй тег img получил стиль display: none, что бы не отображаться в браузере. Можно вместо использования img тега с display:none передать это свойство тегом link через атрибут href. Также, несмотря на то, что микроразметку можно передавать через не показываемые пользователю теги meta и link, рекомендуется все же, по возможности, добавлять микроразметку преимущественно в теги, которые будут выводиться пользователю. Валидацию микроразметки schema.org можно сделать по этим ссылкам: yandex валидатор , google валидатор . Основное преимущество от использования микроразметки заключается в удобстве такого контента для поисковых роботов и роботов социальных сетей. Эти роботы извлекают размеченные данные и агрегирую их. Поэтому использование микроразметки улучшает SEO сайта и способствует автоматическому распространению данных в социальных сетях. Детальное описание микроразметки Schema.org для видео размеченных схемой VideoObject на сайте Яндекса в разделе Вебмастер . Так же, стоит заметить, что для случаев, когда вы делаете вставку на свой сайт видео не напрямую, а с помощью виджетов видео хостинга Яндекс.Видео или YouTube, то вы можете под блоком кода виджета добавить свой блок кода HTML с описанием видео и в него встроить микроразметку Schema.org для этого видео. При этом, в качестве параметра URL — ссылки на видеоролик, указать не прямую ссылку на статический файл, а задать ссылку полученную от видео хостинга. Хотя в спецификации Schema.org и написано, что ссылка должна быть именно на прямой файл, но поисковики обрабатывают и ссылки на видео от видео хостинга (см. в примерах на сайте Яндекса в разделе Вебмастер), несмотря на то, что по такой ссылке нельзя скачать файл и нельзя просмотреть его напрямую в своем HTML5 медиа плеере на странице, только в виджете видео хостинга.
Если перед вами стоит вопрос с какого хостинга загружать мультимедийные файлы аудио и видео, то посмотрите статью Yandex Disk REST API jQuery Plugin, в которой описан вариант вставки медиа файлов на WEB страницу с Яндекс Диска.
Атрибуты
<audio> и <video> тегов:
Атрибуты src, preload, autoplay, mediagroup, loop, muted, controls являются общими атрибутами для всех медийных элементов, в том числе и для тегов <audio> и <video>.
атрибут autoplay:
<audio autoplay> или <audio autoplay="autoplay">
<video autoplay> или <video autoplay="autoplay">
атрибут autoplay задается его присутствием в теге <audio> или <video> и для этого атрибута не нужно задавать значение, достаточно просто его присутствия. Для редакторов HTML, которые правят код элементов, можно задать этот атрибут как autoplay=»autoplay«, что равносильно просто присутствию атрибута. Наличие атрибута autoplay дает команду браузеру начать воспроизведение файла сразу после загрузки web страницы. Соответственно, атрибут autoplay отменяет значения атрибута preload, который управляет загрузкой видео в плеер, потому что видео должно сразу начать воспроизводиться, а значит и должно быть загружено. По умолчанию атрибут autoplay отсутствует.
атрибут controls:
<audio controls> или <audio controls="controls">
<video controls> или <video controls="controls">
атрибут controls дает команду браузеру показывать панель управления плеером, когда страница загрузилась, но воспроизведение записи на начато. Этот атрибут также как и атрибут autoplay задается только присутствием в теге <audio> или <video>, и не требует значения, достаточно только его присутствия. По умолчанию этот атрибут отсутствует, т.е. плеер не показывает панель управления до начала воспроизведения. Когда же проигрывание файла будет запущено, то панель управления будет появляться при наведении указателя мыши на область плеера.
атрибут loop:
<audio loop> или <audio loop="loop">
<video loop> или <video loop="loop">
атрибут loop заставляет плеер воспроизводить файл по кругу. Атрибут задается только его присутствием в теге <audio> или <video> и не имеет параметров. По умолчанию атрибут loop отсутствует.
атрибут preload определяет загрузку файла вместе с загрузкой web страницы и принимает одно из следующих трех значений:
none — не выполнять загрузку файла вместе с загрузкой web страницы. Это значит, что файл начнет загружаться в плеере только после нажатия кнопки воспроизведения. Это может быть удобным для ускорения загрузки страницы. Значение none является значением по умолчанию для атрибута preload, поэтому для него можно вообще не вставлять атрибут preload в тег <audio> или <video> для этого случая.
metadata — не выполнять загрузку файла вместе с загрузкой web страницы, но выполнять загрузку метаданных мультимедийного файла.
auto — выполнять полную загрузку файла вместе с загрузкой web страницы. В этом варианте браузеры будут автоматически подгружать медийный файл вместе с web страницей, но это не будет мешать загрузке самой страницы и ее отрисовки в браузере. Если в теге <audio> или <video> задан атрибут preload=«» с пустым значением, то будет использовано значение auto для него.
Значение атрибута preload будет отменено, если использован атрибут autoplay.
атрибут src:
<audio src="URL">
<video src="URL">
атрибут src тега <audio> или <video> позволяет сразу в теге задать путь к мультимедийному файлу. Путь может быть, как полным с указанием протокола и домена, так и относительно корня текущего сайта. Также путь к файлу можно задать и во вложенных в аудио или видео контейнер тегах <source src=»URL»>.
Атрибут poster тега video:
<video poster="URL">
атрибут poster используется только в теге <video> и задает URL изображения (gif, png, jpeg и т.п.), которое будет показано пока видео не доступно. Если атрибут poster не задан, то плеер браузера будет пытаться показать первый кадр видео.
Атрибуты width и height тега video:
<video>
<video>
атрибуты width и height применяются только к тегу <video> и задают, соответственно, ширину и высоту области воспроизведения видеоплеера. В качестве значения ожидают положительное целое число, указанное в пикселях или процентах. Задание этих атрибутов влияет на размер отображения видео, но не изменяет пропорции видео. Видео подстроиться под указанные размеры с сохранением его пропорций. Если указанные размеры не совпадают с пропорциями видео, то по верхним или/и по боковым краям видео будут темные полосы. Поэтому при задании этих параметров желательно подбирать их соотношение такое же, как у воспроизводимого видео, или задавать только width, а по высоте плеер подстроиться сам.
Если какой-либо из этих параметров или оба не будут заданы, то тогда не заданный(е) параметр(ы) будут браться от соответствующего размера картинки, указанной в атрибуте poster.
Если же атрибут poster будет отсутствовать, то эти параметры будут устанавливаться как: для width = 300px и для height = 150px. Что бы не высчитывать и не согласовывать размеры области видео под пропорции самого клипа, я бы рекомендовал задавать только одни параметр width, тогда высота (height) области воспроизведения будет выбрана автоматически исходя из пропорций видео.
Также, на размеры и оформление HTML5 плеера можно влиять через свойства CSS применяемые к тегам <audio> или <video>.
Атрибут muted:
<audio muted> или <audio muted="muted">
<video muted> или <video muted="muted">
атрибут muted устанавливает своим наличием в тегах <audio> или <video> звук в выключенное состояние в HTML5 плеере. По умолчанию атрибут отсутствует.
Атрибут crossorigin:
<video crossorigin="anonymous">
атрибут crossorigin указывает браузеру на необходимость выполнение CORS запроса для данного элемента. По умолчанию атрибут отсутствует, что значит не использовать CORS запросы вообще. При наличии атрибута возможны следующие значения: anonymous и use-credentials. CORS (Cross-origin resource sharing ) — это технология современных браузеров, которая позволяет управлять разрешениями на загрузку ресурсов на текущей web странице с других доменов, отличных от домена текущей страницы. Поддержка браузерами стандарта CORS позволяет реализовать безопасный кроссдоменный обмен данными через выполнение специального запроса (заголовка) к домену текущей страницы на предмет того, разрешается ли загружать на этой странице ресурсы с другого указанного домена. Сервер на такой запрос должен указать домены, с которых разрешена загрузка ресурсов.
атрибут mediagroup позволяет объединить управление несколькими медиафайлами в один MediaController через создание группы медиафайлов в разных местах страницы. Это группа будет управляться одновременно для всех входящих в нее файлов. Это удобно, например, если нужно проиграть и управлять одновременно одним и тем же роликом в разных местах страницы с разными субтитрами, или разными роликами.
Теги <audio> и <video> требуют наличие закрывающего тега.
Для тех случаев, когда браузер не поддерживает HTML5 <audio> и <video> теги, что сейчас большая редкость, пред закрывающим контейнер тегом пишут текстовое сообщение и обычно добавляют ссылку на скачивание файла. Если же встроенный в браузер HTML5 плеер будет дополнительно управляться JS библиотекой (JS плеером), то большинство из них выполняют подключение флэш плеера в случае невозможности воспроизведения в браузере HTML5 видео и аудио по причине не поддержки браузером тегов видео и аудио или формата мультимедийного файла.
Тег <source>:
Путь к проигрываемому файлу также можно задать и при помощи тега <source src=»URL»> с атрибутом src, размещенного внутри тегов <audio> или <video>. Тег <source> не имеет закрывающего тега.
В большинстве случаев тег <source>выглядит так:
<source src="URL to file.mp4" type="video/mp4">
<source src="URL to file.mp3" type="audio/mpeg">
и в нем присутствует всегда атрибут src и type, который в большинстве случаев имеет только MIME-тип.
Атрибуты тега <source>:
атрибут src=«URL» тега <source> задает URL к мультимедийному файлу. Путь может быть как полным с указанием протокола и домена, так и относительно корня сайта.
атрибут type=»MIME-тип» тега <source> или более полно type=’MIME-тип; codecs=»кодек»‘ указывает MIME-тип файла и кодек. Для аудио достаточно указать MIME-тип, например, для .mp3 — type=»audio/mpeg». Хотя по спецификации для видео в атрибуте type нужно указывать и кодек, но сейчас часто указывают только MIME-тип без кодека, предоставляя это на решение браузерам.
атрибут media=»all|braille|handheld|print|screen|speech|projection|tty|tv» тега <source> указывает тип устройства, для которого должен воспроизводиться файл. Значение по умолчанию all, поэтому этот атрибут в большинстве случаев не указывают вообще, если не хотят конкретно определить устройство для воспроизведения.
Тег <track>:
Для HTML5 видео возможно также отображать в плеере дополнительную дорожку с информацией, такой как субтитры (subtitles), заголовки (captions), главы (chapters), описания (descriptions – не поддерживаются пока) и метаданные (metadata – не поддерживаются пока). Эта возможность реализуется путем добавления внутри тега <video> тегов <track> с соответствующими атрибутами.
<track kind | src | srclang | label | default> - не имеет закрывающего тега.
Тег <track> позволяет подключать к видео дополнительные файлы-дорожки специального формата WebVTT (Web Video Text Tracks Format ), в которых указаны выводимые текстовые сообщения с их временной привязкой к видео файлу. Стандарт WebVTT поддерживает не просто вывод текстовых сообщений, но и предоставляет варианты его CSS стилизации и опции по размещению в области просмотра видео. На настоящий момент WebVTT файлы в основном используются для подключения к видео текстовых субтитров, что поддерживается почти всеми браузерами. Другие возможности WebVTT стандарта пока не полностью реализуются самими браузерами, поэтому, для более полного использования WebVTT, лучше применять JS плееры. Также, файлы WebVTT могут нестандартно использоваться JS плеерами для передачи дополнительных данных в JS плеер, таких как, например, URL превью картинок для фреймов видео. К вопросу о том, как показать превью кадров видео на шкале перемотки плеера (Scrub Bar Thumbnails) как это сделано на видео хостингах. Тут нужно сказать, что такой функционал пока отсутствует во встроенных в браузеры плеерах и поэтому реализуется через JS плееры как дополнение. Для этого подключают JS библиотеку (js плеер), которая берет на себя управление HTML5 видео и аудио объектом и выполняет его стилизацию. Такие JS плееры для показа превью кадров видео нестандартно используют файлы WEBVTT из тега <track> для передачи через него URL картинок превью.
Файл формата WebVTT является обычным текстовым файлом с расширением .vtt в котором, в виде построчного списка, прописаны временные метки с временем старта и временем окончания и текстовые сообщения для вывода к этим меткам. К <video> контейнеру можно подключить несколько файлов WebVTT с текстом на разных языках. Для каждого языка нужно создавать отдельный файл и подключать каждый через тег <track>. Теги <track> необходимо вставлять внутрь контейнера <video> после всех тегов <source>, но перед сообщениями об ошибках HTML5 видео. Тег <track> с файлом субтитров на языке по умолчанию нужно размешать первым среди тегов <track> в текущем контейнере <video>.
WEBVTT файл может содержать одну и более временных меток. Файл начинается со слова WEBVTT. Пустые строки отделяют между собой временные метки с принадлежащими к ним текстом и атрибутами. Текст может содержать элементы HTML и CSS разметки. Перед временной меткой может располагаться ID для нее, что бы при помощи специальных выражений обратиться к ней. Все эти детали описаны в стандарте WEBVTT.
00:00:01.000 —> 00:00:10.000 -это простой пример временной метки в формате hh:mm:ss.mmm
00:00:15.000 —> 00:00:20.000 A:middle T:50% — метка может содержать дополнительные атрибуты, указывающие на месторасположение текста для нее в области просмотра видео.
Пример файла формата WEBVTT для субтитров на ru
WEBVTT
00:00:01.000 --> 00:00:10.000
Это первая строка с 1-10 секунды
00:00:15.000 --> 00:00:20.000
Это вторая строка текста
разделенная на две линии
Пример файла subtitles.vtt
Пример файла captions.vtt
Пример файла chapters.vtt
Атрибуты тега <track>:
Атрибут kind тега <track> задает тип дорожки и может принимать значения:
subtitles — субтитры в виде текста, который выводиться поверх видео. Для проигрываемого файла можно задать субтитры на разных языках для предоставления их выбора в плеере, если он его поддерживает. В большинстве случаев используется именно этот тип так он поддерживается большинством браузеров.
captions – заголовки в виде текста и звука, которые выводятся поверх видео. Похожи на субтитры, но, помимо текста, могут включать звуковые эффекты и другую аудио информацию.
chapters – главы, которые отображаются текстом в виде меню списка и предназначены для быстрой навигации по медиафайлу.
descriptions – описание, это текстовые файлы с описанием видео для воспроизведения их в screenreader.
metadata – метаданные для передачи js скриптам.
Атрибут src тега <track> задает URL к файлу дорожки с дополнительной информацией. Подключаемый к тегу <track> файл имеет формат WebVTT и расширение . vtt.
Атрибут srclang тега <track> задает язык дорожки через код языка. Для русского языка будет равен «ru», для английского «en».
Атрибут label тега <track> задает название дорожки, которое будет показано в плеере. Если атрибут не будет задан, то браузер покажет свое служебное название.
Атрибут default тега <track> задает выбор данной дорожки по умолчанию при наличии других дорожек в контейнере video. Только один из нескольких тегов <track> может иметь default атрибут. Лучше дорожку по умолчанию располагать первой среди других подключаемых дорожек.
Пример тегов <track>:
<track kind="subtitles" label="EN" src="URL to subtitles.vtt" srclang="en" default>
<track kind="subtitles" label="RU" src="URL to subtitles-ru.vtt" srclang="ru">
Как использовать фоновые видео HTML5 на вашем сайте
Чтобы использовать фоновое видео, в идеале, файл должен быть представлен в трех форматах. Это MP4, OGV и WEBM. На самом деле, OGV не обязателен, только если вам не нужна поддержка старых браузеров Firefox 3.5 и 3.6, Opera 10.5 и Chrome 3, 4 и 5.
Для размещения фонового видео нужно использовать видеотэг HTML:
Вышеупомянутый код также устанавливает превью-изображение. Оно отображается во время загрузки видео или в браузерах, которые не могут воспроизводить видео. Чтобы создать превью, вы можете воспроизвести видео на своем компьютере, поставить его на паузу и использовать сочетание клавиш command + shift + 4 (MAC. На Windows вы можете использовать стандартный инструмент Snipping Tool.
Но мы отображаем фоновое видео только на более крупных устройствах, потому что на мобильных телефонах фоновое видео может отнимать слишком много системных ресурсов. Поэтому мы добавляем медиа-запрос (замените min-width: 62em на значение из вашего css-фреймворка, если хотите
: элемент вставки видео — HTML: язык разметки гипертекста
Элемент HTML Video () встраивает в документ медиаплеер, который поддерживает воспроизведение видео. Вы также можете использовать для аудиоконтента, но элемент может обеспечить более удобное взаимодействие с пользователем.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https: // github.com / mdn / interactive-examples и отправьте нам запрос на перенос.
В приведенном выше примере показано простое использование элемента . Аналогично элементу , мы включаем путь к носителю, который хотим отобразить, внутри атрибута src ; мы можем включить другие атрибуты, чтобы указать такую информацию, как ширина и высота видео, хотим ли мы, чтобы оно автоматически воспроизводилось и повторялось, хотим ли мы отображать элементы управления видео по умолчанию в браузере и т. д.
Содержимое внутри открывающих и закрывающих тегов отображается как резервный вариант в браузерах, которые не поддерживают этот элемент.
Как и все другие элементы HTML, этот элемент поддерживает глобальные атрибуты.
автозапуск
Логический атрибут; если указано, воспроизведение видео начинается автоматически, как только это возможно, без остановки для завершения загрузки данных. Примечание : Сайты, которые автоматически воспроизводят аудио (или видео со звуковой дорожкой), могут быть неприятными для пользователей, поэтому по возможности их следует избегать.Если вы должны предложить функцию автовоспроизведения, вы должны сделать ее включенной (требуя, чтобы пользователь специально ее включил). Однако это может быть полезно при создании мультимедийных элементов, источник которых будет установлен позже под контролем пользователя. См. Наше руководство по автозапуску для получения дополнительной информации о том, как правильно использовать автозапуск.
Чтобы отключить автовоспроизведение видео, autoplay = "false" не будет работать; видео будет воспроизводиться автоматически, если атрибут вообще присутствует в теге . Чтобы убрать автовоспроизведение, нужно полностью удалить атрибут.
В некоторых браузерах (например, Chrome 70.0) автовоспроизведение не работает, если отсутствует атрибут приглушен .
autoPictureInPicture Это экспериментальный API, который не следует использовать в производственном коде.
Логический атрибут, который, если true , указывает, что элемент должен автоматически переключаться в режим «картинка в картинке», когда пользователь переключается между этим документом и другим документом или приложением.
с буферизацией
Атрибут, который вы можете прочитать, чтобы определить временные диапазоны буферизованного носителя. Этот атрибут содержит объект TimeRanges .
органы управления
Если этот атрибут присутствует, браузер предложит элементы управления, позволяющие пользователю управлять воспроизведением видео, включая громкость, поиск и приостановку / возобновление воспроизведения.
controllist Это экспериментальный API, который не следует использовать в производственном коде.
Атрибут controlslist , если он указан, помогает браузеру выбрать, какие элементы управления отображать в медиа-элементе всякий раз, когда браузер показывает свой собственный набор элементов управления (например, когда указан атрибут controls ).
Допустимые значения: nodownload , nofullscreen и noremoteplayback .
Используйте атрибут disablePictureInPicture , если вы хотите отключить режим «Картинка в картинке» (и элемент управления).
перекрестное происхождение
Этот перечисляемый атрибут указывает, следует ли использовать CORS для выборки связанного видео. Ресурсы с поддержкой CORS можно повторно использовать в элементе , не будучи искаженным . Допустимые значения:
аноним
Отправляет запрос на другой источник без учетных данных. Другими словами, он отправляет HTTP-заголовок Origin: без cookie, сертификата X.509 или выполнения базовой проверки подлинности HTTP.Если сервер не предоставляет учетные данные исходному сайту (не задавая HTTP-заголовок Access-Control-Allow-Origin: ), изображение будет испорченным , и его использование будет ограничено.
учетные данные
Отправляет запрос на другой источник с учетными данными. Другими словами, он отправляет HTTP-заголовок Origin: с файлом cookie, сертификатом или выполняет аутентификацию HTTP Basic. Если сервер не предоставляет учетные данные исходному сайту (через HTTP-заголовок Access-Control-Allow-Credentials: ), изображение будет испорченным и его использование будет ограничено.
Если он отсутствует, ресурс извлекается без запроса CORS (то есть без отправки HTTP-заголовка Origin: ), что предотвращает использование незапятнанного ресурса в элементах . Если он недействителен, он обрабатывается, как если бы использовалось перечисленное ключевое слово анонимный . Дополнительную информацию см. В разделе Атрибуты настроек CORS.
текущее время
Чтение currentTime возвращает значение с плавающей запятой двойной точности, указывающее текущую позицию воспроизведения мультимедиа, указанную в секундах.Если воспроизведение носителя еще не началось, возвращается смещение времени, при котором оно начнется. Установка currentTime устанавливает текущую позицию воспроизведения на заданное время и выполняет поиск носителя в эту позицию, если носитель в данный момент загружен.
Если мультимедиа передается в потоковом режиме, возможно, что пользовательский агент не сможет получить некоторые части ресурса, если срок хранения этих данных из буфера мультимедиа истек. Другие носители могут иметь временную шкалу мультимедиа, которая не начинается с 0 секунд, поэтому установка currentTime на время до того, как это приведет к сбою. Метод getStartDate () может быть использован для определения начала точки отсчета медиа-временной шкалы.
disablePictureInPicture Это экспериментальный API, который не следует использовать в производственном коде.
Запрещает браузеру предлагать контекстное меню «Картинка в картинке» или в некоторых случаях автоматически запрашивать картинку в картинке.
disableRemotePlayback Это экспериментальный API, который не следует использовать в производственном коде.
Логический атрибут, используемый для отключения возможности удаленного воспроизведения на устройствах, подключенных с помощью проводных (HDMI, DVI и т. Д.) И беспроводных технологий (Miracast, Chromecast, DLNA, AirPlay и т. Д.).
В Safari вы можете использовать x-webkit-airplay = "deny" как запасной вариант.
продолжительность Только чтение
Значение с плавающей запятой двойной точности, которое указывает продолжительность (общую длину) мультимедиа в секундах на временной шкале мультимедиа. Если в элементе нет носителя или носитель недействителен, возвращается значение NaN . Если у медиа нет известного конца (например, для прямых трансляций неизвестной продолжительности, веб-радио, медиа, поступающих из WebRTC и т. Д.), Это значение равно + Infinity .
высота
Высота области отображения видео в пикселях CSS (только абсолютные значения; без процентов).
петля
Логический атрибут; если указано, браузер автоматически вернется к началу по достижении конца видео.
без звука
Логический атрибут, указывающий настройку звука, содержащегося в видео по умолчанию. Если установлено, звук будет изначально отключен. Его значение по умолчанию — false , что означает, что звук будет воспроизводиться при воспроизведении видео.
прослушиванийинлайн
Логический атрибут, указывающий, что видео должно воспроизводиться «в строке», то есть в пределах области воспроизведения элемента. Обратите внимание, что отсутствие этого атрибута не означает, что видео всегда будет воспроизводиться в полноэкранном режиме.
плакат
URL-адрес изображения, которое будет отображаться во время загрузки видео. Если этот атрибут не указан, ничего не отображается до тех пор, пока не станет доступен первый кадр, затем первый кадр отображается как кадр плаката.
предварительный натяг
Этот перечисляемый атрибут предназначен для того, чтобы дать браузеру подсказку о том, что, по мнению автора, приведет к наилучшему взаимодействию с пользователем в отношении того, какой контент загружается перед воспроизведением видео.Может иметь одно из следующих значений:
нет : указывает, что видео не должно быть предварительно загружено.
метаданные : указывает, что выбираются только метаданные видео (например, длина).
auto : указывает, что можно загрузить весь видеофайл, даже если пользователь не ожидает его использования.
пустая строка : синоним значения auto .
Значение по умолчанию отличается для каждого браузера.Спецификация рекомендует установить его на метаданных .
Примечание:
Атрибут autoplay имеет приоритет над preload . Если указано autoplay , браузеру, очевидно, потребуется начать загрузку видео для воспроизведения.
Спецификация не заставляет браузер следить за значением этого атрибута; это всего лишь намек.
SRC
URL-адрес видео для встраивания.Это необязательно; вместо этого вы можете использовать элемент внутри видеоблока, чтобы указать видео для встраивания.
ширина
Ширина области отображения видео в пикселях CSS (только абсолютные значения; без процентов).
Название события
срабатывает, когда
audioprocess Этот устаревший API больше не следует использовать, но он, вероятно, по-прежнему будет работать.
Входной буфер ScriptProcessorNode готов к обработке.
канплей
Браузер может воспроизводить мультимедиа, но оценивает, что было загружено недостаточно данных для воспроизведения мультимедиа до конца без необходимости останавливаться для дальнейшей буферизации содержимого.
может пройти через
Браузер оценивает, что он может воспроизводить мультимедиа до конца, не останавливаясь для буферизации содержимого.
полный
Отрисовка OfflineAudioContext прекращена.
изменение длительности
Атрибут длительности обновлен.
опорожнено
Носитель опустел; например, это событие отправляется, если носитель уже загружен (или частично загружен), и вызывается метод load () для его перезагрузки.
законченные
Воспроизведение остановлено, поскольку достигнут конец носителя.
загруженные данные
Завершена загрузка первого кадра носителя.
загруженные метаданные
Метаданные загружены.
пауза
Воспроизведение приостановлено.
играть
Воспроизведение началось.
играет
Воспроизведение готово к запуску после паузы или задержки из-за отсутствия данных.
прогресс
Периодически запускается, когда браузер загружает ресурс.
обмен
Скорость воспроизведения изменилась.
поиск
Операция поиска завершена.
ищу
Началась операция поиска .
остановлено
Пользовательский агент пытается получить мультимедийные данные, но данные неожиданно не поступают.
приостановить
Загрузка мультимедийных данных приостановлена.
timeupdate
Время, указанное атрибутом currentTime , обновлено.
изменение объема
Громкость изменилась.
ожидание
Воспроизведение остановлено из-за временного отсутствия данных
Не все браузеры поддерживают одни и те же видеоформаты; вы можете предоставить несколько источников внутри вложенных элементов , и тогда браузер будет использовать первый из них, который он понимает.
<элементы управления видео>
webm" type = "video / webm">
Ваш браузер не поддерживает видео в формате HTML5.Вот это
взамен ссылку на видео .
Мы предлагаем содержательное и подробное руководство по типам медиафайлов и руководство по кодекам, поддерживаемым для видео. Также доступно руководство по аудиокодекам, которые можно использовать с ними.
Другие примечания по использованию:
Если вы не укажете атрибут controls , видео не будет включать элементы управления браузера по умолчанию; вы можете создавать свои собственные пользовательские элементы управления с помощью JavaScript и HTMLMediaElement API.Дополнительные сведения см. В разделе «Создание кросс-браузерного видеопроигрывателя».
Чтобы обеспечить точный контроль над вашим видео (и аудио) контентом, HTMLMediaElement запускает множество различных событий. Эти события не только обеспечивают управляемость, но и позволяют отслеживать ход загрузки и воспроизведения мультимедиа, а также состояние и положение воспроизведения.
Вы можете использовать свойство object-position , чтобы настроить положение видео в кадре элемента, и свойство object-fit , чтобы управлять тем, как размер видео настраивается для соответствия кадру.
Чтобы показывать субтитры / подписи вместе с вашим видео, вы можете использовать некоторый JavaScript вместе с элементом и форматом WebVTT. См. Раздел Добавление подписей и субтитров к видео HTML5 для получения дополнительной информации.
Вы можете воспроизводить аудиофайлы с помощью элемента . Это может быть полезно, если, например, вам нужно выполнить аудио с расшифровкой WebVTT, поскольку элемент не позволяет использовать субтитры с использованием WebVTT.
Чтобы протестировать резервный контент в браузерах, которые поддерживают этот элемент, вы можете заменить несуществующим элементом, например несуществующим элементом, например .
Хорошим общим источником информации об использовании HTML является учебное пособие для начинающих по видео- и аудиоконтенту.
Стилизация с помощью CSS
Элемент является учебное пособие для начинающих по видео- и аудиоконтенту.
Стилизация с помощью CSS
Элемент является замещенным элементом — его значение display по умолчанию равно inline , но его ширина и высота по умолчанию в области просмотра определяются внедряемым видео.
Нет никаких особых требований к стилю ; распространенная стратегия — присвоить ему display value block , чтобы упростить позиционирование, размер и т. д., а затем при необходимости предоставьте информацию о стиле и макете. Основы стилизации видеопроигрывателя содержат некоторые полезные методы стилизации.
Обнаружение добавления и удаления дорожек
Вы можете определить, когда дорожки добавляются и удаляются из элемента ; распространенная стратегия — присвоить ему display value block , чтобы упростить позиционирование, размер и т. д., а затем при необходимости предоставьте информацию о стиле и макете. Основы стилизации видеопроигрывателя содержат некоторые полезные методы стилизации.
Обнаружение добавления и удаления дорожек
Вы можете определить, когда дорожки добавляются и удаляются из элемента , используя события addtrack и removetrack . Однако эти события не отправляются непосредственно в сам элемент . Вместо этого они отправляются в объект списка дорожек в HTMLMediaElement элемента . Вместо этого они отправляются в объект списка дорожек в HTMLMediaElement элемента , который соответствует типу дорожки, добавленной к элементу:
HTMLMediaElement.audioTracks
AudioTrackList , содержащий все звуковые дорожки медиаэлемента. Вы можете добавить слушателя для addtrack к этому объекту, чтобы получать оповещения, когда к элементу добавляются новые звуковые дорожки.
HTMLMediaElement.videoTracks
Добавьте прослушиватель addtrack к этому объекту VideoTrackList , чтобы получать информацию о добавлении видеодорожек в элемент.
HTMLMediaElement.textTracks
Добавьте прослушиватель событий addtrack в этот TextTrackList , чтобы получать уведомления, когда к элементу добавляются новые текстовые дорожки.
Например, чтобы определить, когда звуковые дорожки добавляются или удаляются из элемента , вы можете использовать следующий код:
var elem = document.querySelector ("видео");
elem.audioTrackList.onaddtrack = function (event) {
trackEditor.addTrack (event.track);
};
elem.audioTrackList.onremovetrack = function (event) {
trackEditor.removeTrack (event.track);
};
Этот код отслеживает добавление и удаление звуковых дорожек из элемента и вызывает гипотетическую функцию редактора дорожек для регистрации и удаления дорожки из списка доступных дорожек редактора.
Вы также можете использовать addEventListener () для прослушивания событий addtrack и removetrack .
Простой пример видео
В этом примере воспроизводится видео при активации, предоставляя пользователю элементы управления видео по умолчанию браузера для управления воспроизведением.
<элементы управления видео
src = "https://archive. org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
poster = "https://peach.blender.org/wp-content/uploads/title_anouncement.jpg? x11217 "
>
К сожалению, ваш браузер не поддерживает встроенные видео,
но не волнуйтесь, вы можете загрузить его
и смотрите в любимом видеоплеере!
Пока видео не начнется, вместо него будет отображаться изображение, указанное в атрибуте poster . Если браузер не поддерживает воспроизведение видео, отображается резервный текст.
Пример нескольких источников
Этот пример основан на последнем, предлагая три разных источника для медиа; это позволяет просматривать видео независимо от того, какие видеокодеки поддерживаются браузером.
<элементы управления видео
poster = "https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
<источник
src = "https://archive.org/download/ElephantsDream/ed_1024_512kb. mp4"
type = "video / mp4">
<источник
src = "https://archive.org/download/ElephantsDream/ed_hd.ogv"
type = "video / ogg">
<источник
src = "https://archive.org/download/ElephantsDream/ed_hd.avi"
type = "video / avi">
Ваш браузер не поддерживает видеотег HTML5.
Первая попытка WebM. Если это не может быть воспроизведено, то пробуется MP4. Наконец-то судят Огга. Резервное сообщение отображается, если элемент видео не поддерживается, но не в случае сбоя всех источников.
Некоторые типы медиафайлов позволяют предоставить более конкретную информацию, используя параметр кодеков как часть строки типа файла. Относительно простой пример — video / webm; codecs = "vp8, vorbis" , в котором говорится, что файл представляет собой видео WebM с использованием VP8 для своего видео и Vorbis для аудио.
Серверная поддержка видео
Если тип MIME для видео установлен неправильно на сервере, видео может не отображаться или отображать серое поле, содержащее X (если включен JavaScript).
Если вы используете веб-сервер Apache для обслуживания видео Ogg Theora, вы можете решить эту проблему, добавив расширения типа видеофайла к типу MIME «video / ogg». Наиболее распространенные расширения типов видеофайлов — это «.ogm», «.ogv» или «.ogg». Для этого отредактируйте файл «mime.types» в «/ etc / apache» или используйте конфигурационную директиву «AddType» в httpd.conf .
AddType video / ogg .ogm
Добавить тип видео / ogg .ogv
AddType video / ogg .ogg
Если вы обслуживаете свои видео как WebM, вы можете решить эту проблему для веб-сервера Apache, добавив расширение, используемое вашими видеофайлами (наиболее распространенным является «.webm»), к типу MIME «video / webm» через Файл «mime.types» в «/ etc / apache» или с помощью директивы конфигурации «AddType» в httpd.conf .
AddType video / webm .webm
Ваш веб-хост может предоставить простой интерфейс для изменения конфигурации типа MIME для новых технологий, пока не произойдет глобальное обновление.
Видео должны содержать как подписи, так и расшифровки, которые точно описывают его содержимое (дополнительные сведения о том, как их реализовать, см. В разделе Добавление подписей и субтитров к видео HTML5). Субтитры позволяют людям, страдающим потерей слуха, понимать аудиосодержание видео во время воспроизведения видео, в то время как расшифровки позволяют людям, которым нужно дополнительное время, иметь возможность просматривать аудиоконтент в удобном для них темпе и формате.
Стоит отметить, что, хотя вы можете подписывать только аудио носители, вы можете делать это только при воспроизведении звука в элементе , поскольку область видео элемента используется для представления подписей.Это один из особых сценариев, в которых полезно воспроизводить звук в элементе видео.
Если используются службы автоматического создания субтитров, важно просмотреть созданный контент, чтобы убедиться, что он точно представляет исходное видео.
Помимо разговорного диалога, субтитры и стенограммы должны также обозначать музыку и звуковые эффекты, которые передают важную информацию. Сюда входят эмоции и тон:
14
00:03:14 -> 00:03:18
[Драматическая рок-музыка]
15
00:03:19 -> 00:03:21
[шепотом] Что это на расстоянии?
16
00:03:22 -> 00:03:24
Это ... это ...
16 00:03:25 -> 00:03:32
[Громкий стук]
[Звон посуды]
Субтитры не должны загораживать главную тему видео.Их можно расположить с помощью параметра align VTT cue.
Категории содержимого
Потоковое содержимое, фразовое содержимое, встроенное содержимое. Если он имеет контролирует атрибут : интерактивное содержимое и осязаемое содержимое.
Разрешенное содержание
Если элемент имеет атрибут src : ноль или более элементов , за которыми следует прозрачный контент, не содержащий элементов мультимедиа — это не или
Иначе: ноль или более элементов , за которыми следует ноль или более элементов , за которыми следует прозрачный контент, который не содержит элементов мультимедиа — это не или .
Отсутствие тега
Нет, и начальный, и конечный тег являются обязательными.
Допущенные родители
Любой элемент, который принимает встроенное содержимое.
Неявная роль ARIA
Нет соответствующей роли
Разрешенные роли ARIA
заявка
Интерфейс DOM
HTMLVideoElement
Таблицы BCD загружаются только в браузере
Как встроить видео в HTML
До HTML5, чтобы воспроизводить видео на веб-странице, вам нужно было использовать плагин, например Adobe Flash Player.С появлением HTML5 вы теперь можете размещать видео прямо на самой странице.
Это позволяет воспроизводить видео на страницах, предназначенных для мобильных устройств, поскольку такие плагины, как Adobe Flash Player, не работают на Android или iOS.
Элемент HTML используется для встраивания видео в веб-документы. Он может содержать один или несколько источников видео, представленных с помощью атрибута src или элемента источника.
Чтобы встроить видеофайл, просто добавьте этот фрагмент кода и измените src на путь к вашему видеофайлу:
<элементы управления видео>
Ваш браузер не поддерживает элемент видео. Пожалуйста, обновите его до последней версии.
Элемент поддерживается всеми современными браузерами. Однако не все браузеры поддерживают один и тот же формат видеофайлов. Файлы MP4 являются наиболее широко распространенным форматом, а другие форматы, такие как WebM и Ogg, поддерживаются в Chrome, Firefox и Opera.
Чтобы ваше видео воспроизводилось в большинстве браузеров, рекомендуется кодировать их как в форматы Ogg, так и в MP4, и включать их в элемент поддерживается всеми современными браузерами. Однако не все браузеры поддерживают один и тот же формат видеофайлов. Файлы MP4 являются наиболее широко распространенным форматом, а другие форматы, такие как WebM и Ogg, поддерживаются в Chrome, Firefox и Opera.
Чтобы ваше видео воспроизводилось в большинстве браузеров, рекомендуется кодировать их как в форматы Ogg, так и в MP4, и включать их в элемент , как в примере выше. Браузеры будут использовать первый распознанный формат.
Если по какой-либо причине браузер не распознает какой-либо из форматов, вместо него будет отображаться текст «Ваш браузер не поддерживает видеоэлемент. Пожалуйста, обновите его до последней версии».
Вы также могли заметить контролирует в теге . Этот элемент включает множество полезных атрибутов для настройки воспроизведения.
. Этот элемент включает множество полезных атрибутов для настройки воспроизведения. атрибуты элементы управления
Элементы управления Атрибут определяет, отображаются ли элементы управления, такие как кнопка воспроизведения / паузы или ползунок громкости.
Это логический атрибут, то есть для него может быть установлено значение true или false. Чтобы установить значение true, просто добавьте его в тег . Если его нет в теге, для него будет установлено значение false, и элементы управления не появятся.
автовоспроизведение
«автовоспроизведение» может иметь значение true или false. Вы устанавливаете его в значение true, добавляя его в тег, если он отсутствует в теге, он устанавливается в значение false. Если установлено значение true, видео начнет воспроизводиться, как только будет сохранено достаточно видео, чтобы его можно было воспроизвести.Многие люди считают, что автоматическое воспроизведение видео мешает или раздражает. Так что используйте эту функцию экономно. Также обратите внимание, что некоторые мобильные браузеры, например Safari для iOS, игнорируют этот атрибут.
Это еще один логический атрибут. Если включить autoplay в тег , встроенное видео начнет воспроизводиться, как только его достаточно будет в буфере.
<автовоспроизведение видео>
Имейте в виду, что многие люди считают автоматическое воспроизведение видео мешающим или раздражающим, поэтому используйте эту функцию с осторожностью.Также обратите внимание, что некоторые мобильные браузеры, такие как Safari для iOS, полностью игнорируют этот атрибут.
плакат
Атрибут плакат — это изображение, которое отображается на видео до тех пор, пока пользователь не щелкнет для его воспроизведения.
Видео могут быть дорогими
Хотя добавить видео на свою страницу проще, чем когда-либо, часто лучше загрузить видео в службу, такую как YouTube, Vimeo или Wistia, и вместо этого встроить их код.Это связано с тем, что показ видео может быть дорогостоящим как для вас с точки зрения затрат на сервер, так и для ваших зрителей, если у них ограниченные тарифные планы.
Размещение ваших собственных видеофайлов также может привести к проблемам с пропускной способностью, что может означать заикание при медленной загрузке видео. Вдобавок ко всему, браузеры, как правило, различаются по качеству воспроизведения видео, поэтому сложно точно контролировать, что увидят ваши зрители. Также очень легко загружать видео, встроенные в тег , поэтому, если вас беспокоит пиратство, вы можете изучить другие варианты.
И с этим, вставляйте видео, сколько душе угодно. Или нет — это ваше дело.
Как встроить видео в HTML5
Из этого туториала Вы узнаете, как вставить видео в HTML-документ.
Встраивание видео в документ HTML
Вставить видео на веб-страницу было непросто, потому что веб-браузеры не имели единого стандарта для определения встроенных мультимедийных файлов, таких как видео.
В этой главе мы продемонстрируем некоторые из множества способов добавления видео на веб-страницы, от последнего элемента HTML5 до популярных видеороликов YouTube.
Использование элемента видео HTML5
Недавно представленный элемент HTML5 обеспечивает стандартный способ встраивания видео в веб-страницы. Однако элемент видео относительно новый, но он работает в большинстве современных веб-браузеров.
В следующем примере просто вставляется видео в HTML-документ с использованием набора элементов управления по умолчанию браузера с одним источником, определенным атрибутом src .
Видео с использованием набора элементов управления по умолчанию в браузере с альтернативными источниками.
Использование объекта Element
Элемент используется для встраивания различных типов файлов мультимедиа в документ HTML.Первоначально этот элемент использовался для вставки элементов управления ActiveX, но согласно спецификации объектом может быть любой медиа-объект, такой как видео, аудио, файлы PDF, Flash-анимация или даже изображения.
Следующий фрагмент кода встраивает Flash-видео в веб-страницу.
Это видео будет воспроизводить только браузеры или приложения, поддерживающие Flash.
Предупреждение: Элемент широко не поддерживается и очень сильно зависит от типа внедряемого объекта. Во многих случаях лучше использовать другие методы. Устройство iPad и iPhone не может отображать Flash-видео.
Использование элемента embed
Элемент используется для встраивания мультимедийного содержимого в документ HTML.
Следующий фрагмент кода встраивает Flash-видео в веб-страницу.
Предупреждение: Тем не менее, элемент очень хорошо поддерживается в текущих веб-браузерах и также определен как стандартный в HTML5, но ваше видео может не воспроизводиться из-за отсутствия поддержки браузером Flash или недоступности плагинов. .
Встраивание видео YouTube
Это самый простой и популярный способ встраивания видеофайлов на веб-страницы. Просто загрузите видео на YouTube и вставьте HTML-код, чтобы отобразить это видео на своей веб-странице.
Вот живой пример, за которым следует объяснение всего процесса:
Шаг 1. Загрузите видео
Перейдите на страницу загрузки видео на YouTube и следуйте инструкциям по загрузке видео.
Шаг 2. Создание HTML-кода для встраивания видео
Когда вы откроете загруженное видео на YouTube, вы увидите что-то вроде следующего рисунка внизу видео. Найдите и откройте загруженное видео на YouTube. Теперь найдите кнопку «Поделиться», которая расположена чуть ниже видео, как показано на рисунке.
Когда вы нажмете кнопку «Поделиться», откроется панель «Поделиться» с еще несколькими кнопками. Теперь нажмите кнопку «Вставить», он сгенерирует HTML-код для непосредственного встраивания видео в веб-страницы. Просто скопируйте и вставьте этот код в свой HTML-документ, где вы хотите отображать видео, и все готово. По умолчанию видео встроено в iframe.
Вы можете дополнительно настроить этот код внедрения, например, изменить размер видео, выбрав параметр настройки, указанный чуть ниже поля ввода кода внедрения.
В следующем примере просто вставляется видео с YouTube.Попробуем:
Видео YouTube
Как встроить видео HTML5 в электронное письмо
В этой статье вы узнаете, как встраивать видео HTML5, чтобы его можно было воспроизводить в почтовых клиентах, поддерживающих видео в электронной почте, в частности, в Apple Mail, iOS 10 и почтовом клиенте Samsung. В нем также будут рассмотрены различные методы отката для клиентов, которые не могут воспроизводить видео.
Щелкните здесь, чтобы увидеть полный код
Email on Acid позволяет предварительно просмотреть свой код в более чем 70 почтовых клиентах и устройствах, поэтому вы точно знаете, как будет выглядеть дизайн, когда он попадет в почтовый ящик. Поскольку видео может быть очень сложным, особенно важно проверить свою электронную почту, прежде чем отправлять ее подписчикам.
Но это того стоит. Статистика видеомаркетинга не лжет.
Поддержка клиентов электронной почты
Как видно из приведенной ниже таблицы, поддержка видео HTML5 ограничена.Однако клиенты, которые его поддерживают, составляют более половины доли рынка. Почтовые приложения, такие как собственный клиент iOS, Apple Mail и почтовый клиент Samsung, позволят получателям воспроизводить ваше видео в самом почтовом клиенте. Другие клиенты, такие как Gmail и устройства Android, будут отображать резервное изображение.
Клиент
Просмотр видео
Показывает запасной вариант
Android 4, собственный клиент
✔
Почта AOL
✔
Apple Mail *
✔
Gmail Веб-почта
✔
Gmail Android
✔
Gmail iOS
✔
Lotus Notes
✔
Outlook 2003-2016
✔
Outlook для Mac *
✔
Outlook Android
✔
Outlook iOS
✔
Outlook.com
✔
iOS 10+, собственный клиент
✔
iOS 9, собственный клиент
✔
Samsung Galaxy, собственный клиент
✔
Thunderbird
✔
Yahoo! Почта
✔
Yahoo! Почта Android
✔
Yahoo! Почта iOS
✔
* См. Ниже информацию о проблемах с почтовыми клиентами Apple Mac
Основной код видео
Ниже приведен основной код видео.Клиенты, которые будут отображать и воспроизводить видео, будут использовать атрибут плаката в качестве изображения обложки для видео, а файл, на который ссылается тег источника, в качестве видео. Клиенты, которые не поддерживают видео, будут отображать изображение в теге видео, заключенном в ссылку.
Отклонения для конкретного клиента
Однако многие почтовые клиенты не позволяют подписчикам воспроизводить ваше видео. Некоторые клиенты, такие как iOS 8 и Android 4, будут отображать обложку видео, но видео останется невоспроизводимым, что может вызвать путаницу у получателя. Таким образом, безопасная ставка — отображать отдельный резервный раздел по умолчанию и отображать только раздел видео в клиентах, которые могут воспроизводить видео.Посмотрите код ниже, чтобы узнать, как это сделать:
Видеоконтент: MP4
Резервное содержание
Начиная с Yahoo! Отображение почтовых полос: нет встроенных, вам также необходимо добавить это в
:
<стиль>
.video-wrapper {display: none;}
Отображение видео на клиентах, поддерживающих видео
iOS 10 и выше
Почтовый клиент iOS 7 поддерживал видео, но Apple удалила эту поддержку в iOS 8 и 9.Затем Apple снова добавила поддержку видео в iOS 10. К сожалению, почтовые клиенты iOS 8 и 9 по-прежнему будут отображать видео с помощью кнопки воспроизведения, но не будут воспроизводить видео.
Имея это в виду, нам нужен способ показывать видеоконтент только в iOS 10. Наш друг Реми Парментье обнаружил умный метод для отображения видео только в iOS 10 с помощью объявления @supports. Он нацелен на определенный CSS, который поддерживает iOS 10, но не iOS 9. Ознакомьтесь с его объяснением здесь.
Однако Yahoo! Почте не нравится объявление @supports, и он будет отображать любой CSS в блоке электронного письма. = резервное видео] {display: none! important; }
}
Клиенты Apple Mac: Apple Mail и Outlook для Mac
Для клиентов на базе Mac мы можем использовать медиа-запрос -webkit-min-device-pixel-ratio, чтобы включить видео. Однако нам также нужно запретить отображение видео в клиентах iOS 8. Исправление заключается в добавлении запроса min-device-width, который шире, чем ширина почтового клиентского устройства iPad. Интересно, что этот медиа-запрос будет активирован в AOL Mail (который не поддерживает видео) для браузеров webkit, таких как Chrome и Safari, но, к счастью, AOL Mail просто отобразит резервное изображение и ссылку, встроенную в тег видео.
Outlook для Mac требует щелчка правой кнопкой мыши для воспроизведения видео
К сожалению, у Outlook для Mac есть особенность, заключающаяся в том, что он не воспроизводит видео, когда пользователь нажимает кнопку воспроизведения. Читатель должен щелкнуть правой кнопкой мыши, чтобы открыть меню, а затем нажать «Играть» в меню. Это может сбить с толку читателей, которые не знакомы с этим ограничением.
Для работы с Outlook для Mac у нас есть следующие варианты:
Откат дисплея для клиентов на базе Mac
Если не включать вышеупомянутый медиа-запрос, клиенты на базе Mac будут отображать резервный контент.
Добавить инструкции на изображение плаката
Поскольку изображение плаката (атрибут плаката в теге видео) будет отображаться по умолчанию, вы можете добавить к изображению текст с инструкциями, например «щелкните правой кнопкой мыши для воспроизведения видео».Если вы не хотите, чтобы этот текст также отображался в iOS, вы можете создать отдельный видеоблок с настраиваемым постером (т. Е. Использовать другое имя класса .video-wrapper-mac) и настроить таргетинг на указанный выше медиа-запрос только для этого. блок.
Кроме того, вы можете разместить текст в
над или под видео, который будет отображаться только в клиентах Apple Mac.
Автозапуск
Добавив атрибут autoplay = ”autoplay”, вы можете заставить видео воспроизводиться автоматически в клиентах Mac.Это устраняет необходимость инструктировать получателя нажать опцию воспроизведения. Однако учтите, что некоторым получателям не нравятся видео, которые воспроизводятся автоматически, особенно если они содержат громкую музыку.
Видео не воспроизводятся автоматически в почтовых клиентах iOS на iPhone, но будут автоматически воспроизводиться на iPad, если для видео установлен атрибут отключения звука. Подробнее о документации Apple по видео на iOS можно прочитать здесь. (Статья относится к видео в Интернете, а не к электронной почте, и хотя в статье рекомендуется использовать встроенный медиа-запрос -webkit-video-playable-inline, он не распознается в iOS 10 (работает на iOS 11) или в клиенте Samsung для Android. )
Клиент электронной почты Samsung
Хотя это не часто обсуждается, почтовый клиент Samsung, который предустановлен в линейке телефонов Galaxy, поддерживает видео. Если вы хотите отображать видео в этом клиенте, вы можете использовать следующий CSS:
Полный код для встраивания видео HTML5 в электронную почту
Видео в тесте электронной почты Видео в тесте электронной почты
Видеоконтент
jpg" src = "https: //www.w3schools.ru / html / mov_bbb.mp4 ">
Резервное содержание
Щелкните здесь, чтобы увидеть код в CodePen
Видеоформаты для использования в электронной почте
HTML5 поддерживает три основных формата видео: MP4, OGG и WebM. Из-за проблем с интеллектуальной собственностью Apple решила поддерживать только MP4 в своих браузерах и почтовых клиентах, поэтому MP4 — единственный формат, который я рекомендую использовать для видео в электронной почте.
Вы также должны убедиться, что ваш сервер настроен для вывода правильного типа MIME, чтобы почтовый клиент мог определять правильный формат видео при получении видео. Прочтите эту статью для получения более подробной информации. Если вы используете веб-сервер Apache, убедитесь, что эта запись находится в вашем файле .htaccess:
AddType video / mp4 .mp4 .m4v
Следует ли использовать видео в электронной почте?
Хотя встроить видео в электронную почту несложно, это не так уж и тривиально. Некоторые маркетологи по электронной почте рекомендуют просто отображать фальшивую кнопку воспроизведения на изображении и открывать в браузере целевую страницу, на которой размещено видео. Другие предпочитают отображать анимированный GIF-файл, преобразованный из видео, поскольку анимированные GIF-файлы поддерживаются во всех почтовых клиентах, кроме Microsoft Outlook.
Лично я считаю, что это зависит от вашей аудитории и вашего бренда. Воспроизведение видео прямо в почтовом клиенте может добавить в ваши информационные бюллетени вау-фактор, и, если вы много используете видео, возможность воспроизведения видео без вывода пользователя за пределы браузера может повысить вероятность того, что получатели будут воспроизводить видео. . В любом случае, это ваш выбор.
Если вы решили использовать видео в своей электронной почте, убедитесь, что вы убедитесь, что ваша электронная почта будет хорошо отображаться в самых популярных почтовых клиентах.Электронная почта на Acid может помочь вам проверить свою электронную почту на более чем 70 клиентах и устройствах за секунды. Попробуйте нашу платформу бесплатно в течение семи дней и убедитесь в этом сами.
ТЕСТ СЕГОДНЯ!
Примечание редактора: Эта статья была обновлена 24 августа 2018 г. Ранее она была обновлена в декабре 2017 г.
Автор: Джастин Кху
Необыкновенный разработчик электронной почты и человек, стоящий за FreshInbox, блогом, посвященным интерактивным и передовым технологиям дизайна электронной почты и новостям.
Автор: Джастин Кху
Необыкновенный разработчик электронной почты и человек, стоящий за FreshInbox, блогом, посвященным интерактивным и передовым технологиям дизайна электронной почты и новостям.
HTML5 тег видео — Tutorial Republic
Тема: Справочник по тегам HTML5 Пред. | След.
Описание
Элемент используется для встраивания видеоконтента в документ HTML без необходимости использования каких-либо дополнительных плагинов, таких как Flash Player.
Поддержка элемента зависит от браузеров. На данный момент существует три основных формата видео, которые поддерживаются для элемента видео: MP4, Ogg и WebM.
В следующей таблице приведены контекст использования и история версий этого тега.
Размещение:
Блок
Содержимое:
<источник> , <трек> и текст
Начальный / конечный тег:
Начальный тег: требуется , Конечный тег: требуется
Версия:
Новое в HTML5
Синтаксис
Базовый синтаксис тега задается следующим образом:
HTML / XHTML: <видео>…
Пример ниже показывает действие тега .
Видео с использованием набора элементов управления по умолчанию в браузере с альтернативными источниками.
Совет: Вы можете разместить контент, такой как текст или ссылку для загрузки, внутри элемента видео, чтобы предоставить альтернативный контент в случае, если браузер не поддерживает видео контент или каким-то образом не смог загрузить исходный файл видео.
Атрибуты, специфичные для тегов
В следующей таблице показаны атрибуты, относящиеся к тегу .
Атрибут
Значение
Описание
автозапуск
автозапуск
Этот логический атрибут указывает, что воспроизведение видео начнется автоматически, как только оно станет возможным, без остановки для завершения загрузки данных.
органы управления
органы управления
Если указано, браузеры будут отображать элементы управления, позволяющие пользователю управлять воспроизведением видео, такими как воспроизведение / пауза, громкость и т. Д.
высота
пикселей
Устанавливает высоту области отображения видео.
петля
петля
Этот логический атрибут указывает, что видео будет автоматически начинаться заново по достижении конца.
без звука
без звука
Этот логический атрибут указывает, будет ли видео изначально отключено.Значение по умолчанию — false, что означает, что звук будет воспроизводиться при воспроизведении видео.
плакат
URL
Задает изображение, которое будет отображаться во время загрузки видео или пока пользователь не нажмет кнопку воспроизведения. Если этот атрибут не указан, ничего не отображается, пока не станет доступен первый кадр видео; тогда первый кадр отображается как плакат.
предварительный натяг
авто метаданные нет
Подсказывает браузеру, следует ли загружать само видео или его метаданные. Атрибут autoplay может переопределить этот атрибут, потому что, если вы хотите автоматически воспроизводить видео, браузеру, очевидно, потребуется его загрузить.
SRC
URL
Задает расположение видеофайла для встраивания.В качестве альтернативы вы можете использовать предпочтительный тег , поскольку он позволяет использовать несколько параметров.
ширина
пикселей
Устанавливает ширину области отображения видео.
Глобальные атрибуты
Как и все другие теги HTML, тег поддерживает глобальные атрибуты в HTML5.
Атрибуты событий
Тег также поддерживает атрибуты событий в HTML5.
Совместимость с браузером
Тег поддерживается во всех основных современных браузерах.
Базовая поддержка —
Firefox 3.5+
Google Chrome 4+
Internet Explorer 9+
Apple Safari 4+
Opera 10.5+
Дополнительная литература
См. Руководство по: HTML5 Video, HTML5 Audio.
Связанные теги: , , .
Что вам нужно знать о видео HTML5
HTML5 продолжает ошеломлять Интернет-сообщество революционными веб-функциями. Одно из ключевых усовершенствований HTML5 — расширенная поддержка видео. Благодаря новому стандарту HTML5 пользователям не нужны какие-либо специальные плагины для потоковой передачи видео в веб-браузерах как на ПК, так и на любом портативном устройстве.Тем не менее, несмотря на растущую популярность стандарта HTML5, большинство веб-разработчиков и дизайнеров не хотят переходить на новый язык разметки, возможно, из-за отсутствия полной спецификации HTML5 или отсутствия практической информации о кодировании HTML5. В этом посте я хотел бы более глубоко взглянуть на элемент видео HTML5 и объяснить его основные положения на простом английском языке.
mp4″ type=»video/mp4″>
Сегодня мы разберемся с вопросом, как вставить видео в html5, а также я постараюсь отметить заметный прогресс во вставке медиафайлов на веб-страницу.
Как? С помощью тегов source:
png»>
Это самый простой способ и он работает. WordPress берет все на себя.
Для этого урока Вам потребуются базовые знания JаvaScript для того, чтобы контролировать воспроизведение мультимедийного контента в HTML5 странице. Также Вы узнаете, как можно кодировать звук и видео различными кодеками для поддержки воспроизведения в разных браузерах. Во второй части урока будут рассмотрены новые элементы форм, которые позволяют упросить создание страниц регистрации, авторизации и других элементов взаимодействия с пользователем.
Заходим на сайт caniuse.com и первая тема, которую мы разбираем, это формы. Давайте мы в поиске введем form и посмотрим на результаты которые выдает нам поисковик. HTML5 form features, видите что картина не очень хорошая, в большинстве браузеров поддержка форм, элементов форм еще не до конца реализована. Если посмотреть на легенду, вы увидите такой грязно зеленого цвета элемент в диаграмме, который означает, что браузер имеет частичную поддержку функциональности. На самом деле если мы посмотрим на show all versions, посмотрим на все версии браузеров, которые у нас здесь зафиксированы, то увидим что поддержка HTML5 форм хорошо реализована в браузере опера, начиная с 9-той версии опера полностью поддерживает все возможности, которые анонсированы с появлением HTML5. Ну вот последняя версия, она частично поддерживает формы HTML5. Что имеется ввиду под частичной поддержкой. Вы увидите, что сейчас я открыл фаерфокс и указано, что не важно от версии этот браузер частично поддерживает форму. Что означает частичная поддержка форм? Давайте мы перейдем на другой сайт, который тоже разбирали на прошлом занятии, это сайт HTML5test.
com и в открывшемся окне мы с вами посмотрим немножко ниже по странице и найдем блог, который отвечает за элементы HTML5. Если мы посмотрим на вторую колонку, которая указывает поддерживает браузер возможности или не поддерживает, то мы увидим что половина функций в фаерфоксе не поддерживается, в половине пунктов везде стоят крестики.
Опера лучше всего поддерживает формы. Остальные браузеры имеют достаточно большой разброс. Некоторые поддерживают одни элементы, некоторые – другие. Мы с вами на сегодняшнем уроке посмотрим, как можно сделать так, чтобы даже если браузер не знает о некотором элементе HTML5 форм, он мог заменить этот элемент кодом java script, чтобы в любом случае функциональность была предостаточной, чтобы пользователь мог нормально взаимодействовать с формой.
Точно так же, перечень атрибутов и версия браузеров, начиная с которых вы можете эти атрибуты использовать. Сейчас в примерах мы с вами разберем элементы и атрибуты и увидим значение и то, как они работают. Первые 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 формах. Так же в этом примере показано использование элемента 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, если мы сейчас попробуем отправить на сервер значение, браузер не дает нам отправить данные, он пишет что мы не соблюли формат данных, если мы напишес здесь [email protected] то теперь при нажатии отправить, браузер не указывает ошибку 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 файл, в котором находится видео в формате h364 и звук в формате mp3. Мы можем имея 1 файл, получить все необходимые для воспроизведения форматы и использовать для себя в приложении. На этом мы заканчиваем урок, посвященный формам и воспроизведение медиафайлов, спасибо за внимание. До новых встреч.
В этом сложно винить клиентов: из-за путаницы с терминами, технической сложности и большого разнообразия вариантов стриминга запутаться очень легко.е. протокол), и того, какупаковывать видео (т. е. транспорт). Так бывает не всегда. Например в протоколе RTSP видео упаковывается в транспорт RTP.
е. протокол), и того, какупаковывать видео (т. е. транспорт). Так бывает не всегда. Например в протоколе RTSP видео упаковывается в транспорт RTP.
Поэтому авторы браузеров сами выбирают, что поддерживать, а под «HTML5-стримингом» подразумевают разные вещи.
п. Из-за этого приходится отдавать разные форматы плейлистов для разных плееров.
Хорошо было бы получить в браузерах возможность проигрывать видео по качеству и удобству близко к тому, что умеет Флеш (а он это делает всё-таки хорошо).
Зато требует наличия последних версий обоих популярных браузеров, а с Эджем пока вообще не совместимо.
Можно также вставить примечание между открывающим и закрывающим тегами для уведомления пользователей на тот случай, если они будут применять несовместимые с HTML5 браузеры. Кроме того, имеются дополнительные атрибуты, например height и width. Добавим их:
6.
Однако из-за споров между участниками рабочей группы HTML5 требование по поводу поддержки Ogg (включая Theora-видео и Vorbis-аудио) в качестве базового стандарта было удалено из более поздних версий HTML5-спецификации. По этой причине сейчас одни браузеры поддерживают воспроизведение одного набора видео и аудиофайлов, а другие — другого. Например, Safari поддерживает использование в сочетании с элементами <video> и <audio> только медиа MP4/H.264/ AAC, в то время как Firefox и Opera поддерживают лишь Ogg и WebM.
ogv» type=»video/ogg»>
ogv» type=»video/ogg»>
Одни это делают все лучше с каждой новой версией, другие пока еще отстают. Глобально же, тенденция идет к тому, что браузеры будут предоставлять все больше функционала для проигрывания мультимедиа файлов.
org микроразметка — andew.ru»>Скринкаст: Пример использования шаблонов
В простейшем варианте использования достаточно вставить на web страницу нужный вам тег <audio> или <video> и задать через их атрибуты несколько параметров. И это уже позволит проиграть мультимедиа файл на странице в HTML5 плеере. Также, поскольку элементы <audio> и <video> являются объектами для JS, у них доступны свойства, методы и события, что предоставляет расширенные возможности полного управления HTML5 плеером через JavaScript . Однако, ввиду того, что браузеры могут иметь различия в реализации управления объектами аудио и видео посредством JS, то более лучшим выбором для этих целей будет использование специальных кроссбраузерных JS библиотек. Одна из таких библиотек под названием videojs будет описана в отдельном посте. К тегам <audio> и <video>, как и к другим тегам HTML применима стилизация посредством CSS.
Детальную спецификацию для аудио и видео в HTML5 можно посмотреть на сайте World Wide Web Consortium .
С моей точки зрения, оптимальным на сейчас вариантом использования HTML5 видео и аудио будет схема основанная на использовании одного мультимедийного файла в формате mp4(H.264) для видео и m4a для аудио и JS HTML5 плеера. К аудио или видео контейнеру подключается только один файл в указанном формате. Сейчас большинство браузеров способны воспроизводить mp4 формат. Подключенная же JS библиотека выполнит стилизацию встроенного в браузер плеера. Если браузер не будет поддерживать формат mp4/m4a, то JS плеер, в таком случае, реализует подключение Flash плеера для воспроизведения мультимедийного файла. Учитывая, что mp4 формат стал сильно популярен, можно надеяться на низкую вероятность проблем с его воспроизведением в браузерах. Такая схема требует наличие всего одного мультимедийного файла в указанном формате, что экономит место на диске и ресурсы для обработки файлов.
Также, такая схема будет стратегически более правильной, так как тенденция идет к тому, что браузеры все больше и лучше выполняют реализацию HTML5 видео и аудио.
264)
ogg" type="audio/ogg" />
<source src="URL to file.m4a" type="audio/mp4" />
<p>HTML5 audio не поддерживается вашим браузером.</p>
<p><a itemprop="contentUrl" href="URL to file.mp3">Скачать audio</a></p>
</audio>
<p itemprop="author" itemscope itemtype="http://schema.org/Person">
Автор
<a href="URL" itemprop="url"><span itemprop="name">Имя автора</span></a>
<meta itemprop="image" content="Full url to person.jpg">
</p>
</div>
jpg
alternatename = Альтернативный заголовок аудио
contenturl
href = URL to file.mp3
text = Скачать audio
author
person
itemType = http://schema.org/Person
url
href = URL
text = Имя автора
name = Имя автора
image = Full url to person.jpg
Поэтому в источнике кода этой демонстрации нет атрибутов width и height для тега <video>, их заменяют CSS стили. Но в листинге кода шаблона этот примем не показан, т.к. является уже частностью.
..">
<video controls preload="none" poster="URL to video-poster.jpg|png">
<source src="URL to file.mp4" type="video/mp4" />
<source src="URL to file.webm" type="video/webm" />
<source src="URL to file.ogv" type="video/ogg" />
<track kind="subtitles" label="RU" src="URL to subtitles-ru.vtt" srclang="ru" default>
<track kind="subtitles" label="EN" src="URL to subtitles.vtt" srclang="en">
<p>HTML5 video не поддерживается вашим браузером.</p>
<p>Скачать видео: <a itemprop="url" href="URL to file.mp4">Заголовок видео</a></p>
</video>
<p itemprop="author" itemscope itemtype="http://schema.org/Person">
Автор видео
<a itemprop="url" href="URL to author web page"><span itemprop="name">author name</span></a>
<meta itemprop="image" content="Full URL to author.jpg">
</p>
<img itemprop="thumbnailUrl" src="URL to file.
jpg|png" />
</div>
org должна включать все приведенные в коде примера свойства itemprop за исключением блока itemprop=»author», который является не обязательным для поисковиков и его можно удалить, если нет данных для его заполнения. Для video-thumbnail яндекс требует указывать микроразметку по schema.org как itemprop=»thumbnail» в виде ImageObject, а Google требует указывать как itemprop=»thumbnailUrl», поэтому приходиться вставлять video-thumbnail файл два раза, и поэтому второй тег img получил стиль display: none, что бы не отображаться в браузере. Можно вместо использования img тега с display:none передать это свойство тегом link через атрибут href. Также, несмотря на то, что микроразметку можно передавать через не показываемые пользователю теги meta и link, рекомендуется все же, по возможности, добавлять микроразметку преимущественно в теги, которые будут выводиться пользователю.
Валидацию микроразметки schema.org можно сделать по этим ссылкам: yandex валидатор , google валидатор . Основное преимущество от использования микроразметки заключается в удобстве такого контента для поисковых роботов и роботов социальных сетей. Эти роботы извлекают размеченные данные и агрегирую их. Поэтому использование микроразметки улучшает SEO сайта и способствует автоматическому распространению данных в социальных сетях. Детальное описание микроразметки Schema.org для видео размеченных схемой VideoObject на сайте Яндекса в разделе Вебмастер . Так же, стоит заметить, что для случаев, когда вы делаете вставку на свой сайт видео не напрямую, а с помощью виджетов видео хостинга Яндекс.Видео или YouTube, то вы можете под блоком кода виджета добавить свой блок кода HTML с описанием видео и в него встроить микроразметку Schema.org для этого видео. При этом, в качестве параметра URL — ссылки на видеоролик, указать не прямую ссылку на статический файл, а задать ссылку полученную от видео хостинга.
Хотя в спецификации Schema.org и написано, что ссылка должна быть именно на прямой файл, но поисковики обрабатывают и ссылки на видео от видео хостинга (см. в примерах на сайте Яндекса в разделе Вебмастер), несмотря на то, что по такой ссылке нельзя скачать файл и нельзя просмотреть его напрямую в своем HTML5 медиа плеере на странице, только в виджете видео хостинга.
Атрибут задается только его присутствием в теге <audio> или <video> и не имеет параметров. По умолчанию атрибут loop отсутствует.
Путь может быть, как полным с указанием протокола и домена, так и относительно корня текущего сайта. Также путь к файлу можно задать и во вложенных в аудио или видео контейнер тегах <source src=»URL»>.
В качестве значения ожидают положительное целое число, указанное в пикселях или процентах. Задание этих атрибутов влияет на размер отображения видео, но не изменяет пропорции видео. Видео подстроиться под указанные размеры с сохранением его пропорций. Если указанные размеры не совпадают с пропорциями видео, то по верхним или/и по боковым краям видео будут темные полосы. Поэтому при задании этих параметров желательно подбирать их соотношение такое же, как у воспроизводимого видео, или задавать только width, а по высоте плеер подстроиться сам.
При наличии атрибута возможны следующие значения: anonymous и use-credentials. CORS (Cross-origin resource sharing ) — это технология современных браузеров, которая позволяет управлять разрешениями на загрузку ресурсов на текущей web странице с других доменов, отличных от домена текущей страницы. Поддержка браузерами стандарта CORS позволяет реализовать безопасный кроссдоменный обмен данными через выполнение специального запроса (заголовка) к домену текущей страницы на предмет того, разрешается ли загружать на этой странице ресурсы с другого указанного домена. Сервер на такой запрос должен указать домены, с которых разрешена загрузка ресурсов.
vid#track=Video&track=English" autoplay controls mediagroup=movie></video>
<video src="movie.vid#track=sign" autoplay mediagroup=movie></video>
</div>
</article>
Если же встроенный в браузер HTML5 плеер будет дополнительно управляться JS библиотекой (JS плеером), то большинство из них выполняют подключение флэш плеера в случае невозможности воспроизведения в браузере HTML5 видео и аудио по причине не поддержки браузером тегов видео и аудио или формата мультимедийного файла.
На настоящий момент WebVTT файлы в основном используются для подключения к видео текстовых субтитров, что поддерживается почти всеми браузерами. Другие возможности WebVTT стандарта пока не полностью реализуются самими браузерами, поэтому, для более полного использования WebVTT, лучше применять JS плееры. Также, файлы WebVTT могут нестандартно использоваться JS плеерами для передачи дополнительных данных в JS плеер, таких как, например, URL превью картинок для фреймов видео. К вопросу о том, как показать превью кадров видео на шкале перемотки плеера (Scrub Bar Thumbnails) как это сделано на видео хостингах. Тут нужно сказать, что такой функционал пока отсутствует во встроенных в браузеры плеерах и поэтому реализуется через JS плееры как дополнение. Для этого подключают JS библиотеку (js плеер), которая берет на себя управление HTML5 видео и аудио объектом и выполняет его стилизацию. Такие JS плееры для показа превью кадров видео нестандартно используют файлы WEBVTT из тега <track> для передачи через него URL картинок превью.
Текст может содержать элементы HTML и CSS разметки. Перед временной меткой может располагаться ID для нее, что бы при помощи специальных выражений обратиться к ней. Все эти детали описаны в стандарте WEBVTT.
Для проигрываемого файла можно задать субтитры на разных языках для предоставления их выбора в плеере, если он его поддерживает. В большинстве случаев используется именно этот тип так он поддерживается большинством браузеров.
vtt.
youtube.com/embed/gwrWBjkBshU» frameborder=»0″ allow=»autoplay; encrypted-media» allowfullscreen=»»/>
Чтобы создать превью, вы можете воспроизвести видео на своем компьютере, поставить его на паузу и использовать сочетание клавиш command + shift + 4 (MAC. На Windows вы можете использовать стандартный инструмент Snipping Tool.
Вы также можете использовать 
Чтобы убрать автовоспроизведение, нужно полностью удалить атрибут.
Допустимые значения:
Если он недействителен, он обрабатывается, как если бы использовалось перечисленное ключевое слово 
Метод 
Если в элементе нет носителя или носитель недействителен, возвращается значение 
Обратите внимание, что отсутствие этого атрибута не означает, что видео всегда будет воспроизводиться в полноэкранном режиме.
webm" type = "video / webm">
Однако эти события не отправляются непосредственно в сам элемент 
org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
poster = "https://peach.blender.org/wp-content/uploads/title_anouncement.jpg? x11217 "
>
К сожалению, ваш браузер не поддерживает встроенные видео,
но не волнуйтесь, вы можете 
mp4"
type = "video / mp4">
<источник
src = "https://archive.org/download/ElephantsDream/ed_hd.ogv"
type = "video / ogg">
<источник
src = "https://archive.org/download/ElephantsDream/ed_hd.avi"
type = "video / avi">
Ваш браузер не поддерживает видеотег HTML5. 
Сюда входят эмоции и тон:
Браузеры будут использовать первый распознанный формат.
Вы устанавливаете его в значение true, добавляя его в тег, если он отсутствует в теге, он устанавливается в значение false. Если установлено значение true, видео начнет воспроизводиться, как только будет сохранено достаточно видео, чтобы его можно было воспроизвести.Многие люди считают, что автоматическое воспроизведение видео мешает или раздражает. Так что используйте эту функцию экономно. Также обратите внимание, что некоторые мобильные браузеры, например Safari для iOS, игнорируют этот атрибут.
Также очень легко загружать видео, встроенные в тег 
Однако элемент видео относительно новый, но он работает в большинстве современных веб-браузеров.
Во многих случаях лучше использовать другие методы. Устройство iPad и iPhone не может отображать Flash-видео.
.
Теперь нажмите кнопку «Вставить», он сгенерирует HTML-код для непосредственного встраивания видео в веб-страницы. Просто скопируйте и вставьте этот код в свой HTML-документ, где вы хотите отображать видео, и все готово. По умолчанию видео встроено в iframe.
В нем также будут рассмотрены различные методы отката для клиентов, которые не могут воспроизводить видео.
Ниже информацию о проблемах с почтовыми клиентами Apple Mac 
Некоторые клиенты, такие как iOS 8 и Android 4, будут отображать обложку видео, но видео останется невоспроизводимым, что может вызвать путаницу у получателя. Таким образом, безопасная ставка — отображать отдельный резервный раздел по умолчанию и отображать только раздел видео в клиентах, которые могут воспроизводить видео.Посмотрите код ниже, чтобы узнать, как это сделать:
= резервное видео] {display: none! important; }
} 
Читатель должен щелкнуть правой кнопкой мыши, чтобы открыть меню, а затем нажать «Играть» в меню. Это может сбить с толку читателей, которые не знакомы с этим ограничением.
блок.
)
jpg" src = "https: //www.w3schools.ru / html / mov_bbb.mp4 ">
Прочтите эту статью для получения более подробной информации. Если вы используете веб-сервер Apache, убедитесь, что эта запись находится в вашем файле .htaccess:
. В любом случае, это ваш выбор.
