Что означает атрибут poster для тега video
HTML5 Video — от А до Я
Пишем код
video >
source src =»movie.mp4″ type =’video/mp4; codecs=»avc1.42E01E, mp4a.40.2″‘ />
source src =»movie.webm» type =’video/webm; codecs=»vp8, vorbis»‘ />
video > >
Само собой есть и более простой вариант вставки видео:
Остается надеется, что в ближайшем будущем для всех браузеров будет достаточно именно такого варианта.
Если же вы работает с Google App Engine, то для каждого видео формата в файл app.yaml вам надо добавить запись вида:
— url: /(.*\.ogv)
static_files: videos_folder/\1
mime_type: video/ogg
upload: videos_folder/(.*\.ogv)
И еще одна очень важная вещь, о которой стоит упомянуть. Надо указывать значения параметра type в тэге source, для того чтобы браузер автоматически смог распознать нужный формат и подгрузить именно его, что позволит увеличить производительность.
Форматы видео
На момент написания статьи (август 2010) наиболее правильным и полным кодом, для вставки видео является следующий:
Буря восторга пронеслась по интернету, когда вышел новый IE 9. Однако пока есть счастливые обладатели IE 6, приходиться изощряться. Пара возможных решений.
Chrome Frame
Преимущество использования плагина Chrome Frame состоит в том, что его можно поставить один раз, а все новые фишки HTML, JavaScript и CSS будут обязательно поддерживаться без какого-либо обновления. Этот плагин является спасением для веб-разработчиков, которые не будут заморачиваться и тратить время на написание IE-совместимой версии сайта. (Немного спорное заявление, особенно если вспомнить какой шум был в сети, когда вышел этот плагин.)
Назад к Flash
Шифруемся, или надо перекодировать видео
Плюшки
Так как видео мы встраиваем полноценным html способом, то значит мы можем использовать всю мощь веба для наших целей. Ниже опишу в чем это мощь состоит. (К сожалению опять без наглядных примеров, так что идем на сайт оригинала)
Video + HTML
Для начала, мы можем использовать различные HTML атрибуты. К примеру, параметр tabindex позволит задать положение. Есть пара параметров, которые есть и в аудио, это loop и autoplay. В параметре poster можно указать картинку, которая будет отображаться во время загрузки видео. Указав controls мы скажем браузеру — «Используй нативные контролы, мы тут ничего не придумали». Ну и еще есть preload, который позволяет подгружать видео фоном. В итоге получаем нечто подобное:
video poster =»star.png» autoplay loop controls tabindex =»0″ >
source src =»movie.webm» type =’video/webm; codecs=»vp8, vorbis»‘ />
source src =»movie.ogv» type =’video/ogg; codecs=»theora, vorbis»‘ />
video >
video poster =»star.png» autoplay =»autoplay» loop =»loop» controls =»controls» tabindex =»0″ >
source src =»movie.webm» type =’video/webm; codecs=»vp8, vorbis»‘ />
source src =»movie.ogv» type =’video/ogg; codecs=»theora, vorbis»‘ />
video >
Video + JS
Тэг video обладает рядом параметров, управлять которыми можно с помощью яваскрипта. Пример можно увидеть на сайте W3.
Для начала, как и любой html компонент, видео реагирует на все стандартные события, как например наведение мыши, перетаскивание и так далее. Но помимо них оно обладает рядом собственных, позволяющих определить, когда видео было запущено, остановлено и прочее. Уже с момента загрузки видео мы можем использовать целый ряд событий, связанных как с работой по сети (loadstart, progress, suspend, abort, error, emptied, stalled), так и с буферизацией (loadedmetadata, loadeddata, waiting, playing, canplay, canplaythrough). Простой пример, показывающий как можно настроить воспроизведение видео в тот момент, когда оно готово к проигрыванию:
В сети выложена уже появились уже и кастомные настройки, позволяющие управлять например скоростью воспроизведения или добавлять взаимодействие между 2 видео.
Video + CSS
Тут практически без комментариев — видео как элемент веб-страницы воспринимает всевозможные css штуки — начиная от border, opacity и заканчивая masks, gradients, transforms, transitions и animations. Тут все уже зависит исключительно от вашей фантазии.
Video + canvas
HTML5 принес в этом мир еще одну мощную вещь — canvas. И что же мешает нам использовать два этих нововведения вместе? Правильно — ничего.
Пример совместного использования canvas и video может быть следующим — получение скриншотов из проигрываемого видео. У canvas есть метод drawImage, позволяющий получать видео из 3х источников: из изображения как такового, из другого canvas и из video! А с помощью другого метода — toDataURL мы уже экспортируем изображение в нужно нам формате. Следующий листинг показывает как снимать скриншоты из видео каждые 1,5 секунды:
Я думаю люди с богатой фантазией уже представили, что можно тут придумать. Для них и все кого интересует возможность получения фреймов видео есть интересная вещь — WebGL.
Video + SVG
SVG предоставляет нам возможность программного управления отображения векторной графики. Но помимо этого есть такая замечательная штука как SVG filter effects. С помощью этих фильтров можно накладывать определенные эффекты на отдельные элементы веб-страницы. Выглядит это примерно таким образом:
svg id =’image’ version =»1.1″ xmlns =»http://www.w3.org/2000/svg» >
defs >
filter id =»myblur» >
feGaussianBlur stdDeviation =»1″ />
filter >
defs >
svg >
style >
video < filter:url(#myblur); border: 2px solid red; >
style >
Подобный inline-вариант обработки работает в Firefox 4 и IE9, для остальных браузеров уже необходим яваскрипт и css.
Заключение
Без сомнения уже многие сумели оценить плюсы от нового html компонента. В интернете (и на хабре — прим. пер.) выложена уже масса примеров (1, 2, 3, 4, 5, 6)
Радует то, что на достигнутом никто не собирается останавливаться и возможно в будущем нас ждет возможность работы с микрофоном и камерой и поддержка вещания.
Добавление медиа-контента
Мы просматриваем Интернет в поисках интересной и познавательной информации, которую обычно находим в виде простого текста. Для его сопровождения HTML предлагает способы внедрить мультимедиа в виде изображений, аудио и видео, а также включить контент с другой веб-страницы в виде встроенного фрейма.
Возможность включать изображения, звук, видео и встроенные фреймы на сайты существует уже некоторое время. Браузеры поддерживают изображения и встроенные фреймы в целом очень хорошо. И хотя добавлять звук и видео на сайт можно уже много лет, этот процесс был довольно громоздким. К счастью, он совершенствуется и стал гораздо проще с прямой поддержкой из HTML.
Сегодня мы можем свободно использовать изображения, аудио, видео и встроенные фреймы, зная что они поддерживаются всеми основными браузерами.
Добавление изображений
Наряду с атрибутом src должен быть применён атрибут alt (альтернативный текст), который описывает содержимое изображения. Значение атрибута alt собирают поисковые системы и вспомогательные технологии, это помогает им донести назначение изображения. Альтернативный текст будет отображаться вместо изображения, если по какой-то причине изображение не доступно.
Демонстрация добавления изображения
Рис. 9.01. Альтернативный текст показан на месте отсутствующего изображения
Поддерживаемые форматы изображений
Изображения поступают в разных форматах файлов и каждый браузер может поддерживать (или не поддерживать) различные форматы. По большому счёту, наиболее типовые поддерживаемые форматы изображений в Интернете — это gif, jpg и png. Из них наиболее широко используемыми сегодня форматами являются jpg и png. Формат jpg обеспечивает качество изображения с высоким количеством цветов, сохраняя скромный размер файла, идеально подходящего для быстрой загрузки. Формате png отлично подходит для изображений с прозрачностью или малым числом цветов. Мы обычно видим что изображения в jpg используются для фотографий, а изображения в png — для иконок или фоновых узоров.
Размеры изображений
Важно определить размер изображения, чтобы сказать браузеру, насколько большой должна быть картинка до загрузки страницы. Таким образом браузер может зарезервировать место для изображения и отображать страницы быстрее. Есть несколько разных способов задать размер изображений, которые хорошо работают на странице. Одним из способов является использование атрибутов width и height непосредственно в теге в HTML.
Кроме того, для указания размеров изображения могут быть использованы свойства width и height в CSS. Когда одновременно применяются свойства CSS и атрибуты HTML, то свойства CSS будут иметь приоритет над атрибутами HTML.
Указание только ширины или высоты настроит другой размер автоматически, чтобы сохранить пропорции изображения. В качестве примера, если мы хотим, чтобы изображение было 200 пикселей в высоту, но ширина нас не особо беспокоит, то мы можем установить height как 200 пикселей, а ширина изображения подстроится соответственно. Одновременная установка width и height также будет работать, однако это может нарушить пропорции изображения, в результате чего появятся искажения.
Демонстрация размеров изображения
Хотя с помощью атрибутов width и height непосредственно в HTML сохраняется некоторое смысловое значение в виде исходного размера изображения, может быть трудно управлять множеством изображений одинакового размера. В таком случае обычной практикой будет использование CSS для изменения размеров изображений.
Позиционирование изображений
Строчное позиционирование изображений
Элемент является по умолчанию строчно-блочным. Добавление изображения на страницу без каких-либо стилей будет позиционировать его на той же строке, что и содержимое вокруг изображения. Кроме того, изменится высота строки, в которой появляется изображение, чтобы соответствовать высоте изображения и это может создать большие вертикальные зазоры в строке.
Демонстрация строчного изображения
Оставлять изображения позиционированными по умолчанию приходится редко. Чаще изображения отображаются как блочные или обтекаемые по одной стороне элементы.
Блочное позиционирование изображений
Добавив свойство display к изображению и установив его значение как block мы заставим изображение быть блочным элементом. Это отображает изображение на отдельной строке, что позволяет окружающему содержимому располагаться выше и ниже изображения.
Демонстрация блочного изображения
Позиционирование изображений слева или справа
Возвращаясь обратно к уроку 5, «Позиционирование содержимого», напомним, что свойство float первоначально предназначалось для размещения изображений слева или справа в содержащем их элементе. Теперь мы используем его для этой изначальной цели.
Демонстрация обтекаемого изображения
Когда использовать изображения вместо фоновой картинки
Есть два основных способа добавления изображения на веб-страницу. Описанный здесь способ — это использование элемента в HTML. Другой способ заключается в применении свойства background или background-image в CSS и назначении фонового изображения для элемента. Оба варианта выполняют свою работу, но у каждого есть свои конкретные области применения.
Элемент в HTML является предпочтительным вариантом, когда изображение должно сохранять смысловое значение и имеет отношение к содержанию страницы.
Свойство background или background-image в CSS является предпочтительным вариантом, когда изображение используется как часть дизайна или интерфейса на странице. Как таковое, оно напрямую не связано с содержанием страницы.
Элемент является довольно популярным и когда был первоначально добавлен в спецификацию HTML, то навсегда изменил путь создания сайтов.
На практике
Теперь, когда мы знаем как добавить и позиционировать изображения на странице, давайте взглянем на наш сайт Styles Conference и посмотрим, куда мы можем вставить несколько изображений.
Начнём с добавления нескольких изображений на нашу главную страницу. В частности, мы добавим изображение в каждый раздел с тизером, продвигающих некоторые наши страницы.
Прежде, чем мы перепрыгнем к коду, давайте создадим новую папку с названием images в нашей папке assets. Затем, в папке images создадим другую папку с названием home специально для изображений нашей главной страницы. В папку home мы добавим три изображения: speakers.jpg, schedule.jpg и venue.jpg (для справки, эти изображения можно скачать из zip-файла).
. Переместим элемент
HTML для нашего первого тизера со спикерами будет выглядеть следующим образом:
Продолжим этот шаблон также для тизеров расписания и места проведения.
Теперь, когда мы добавили несколько изображений на нашу страницу, нам нужно немного очистить их стили и убедиться, что они правильно вписываются в макет нашей страницы.
Так как изображения по умолчанию являются строчно-блочными элементами, давайте изменим изображения в разделе с тизерами на блочные элементы. Также установим их максимальную ширину как 100%, чтобы гарантировать, что они не превышают ширину соответствующих им колонок. Изменение значения этой ширины важно, поскольку она позволяет нашим изображения подстраиваться под ширину колонок по мере необходимости.
Наконец, давайте немного скруглим углы изображений и применим к ним нижний margin 22 пикселя, обеспечивая небольшую свободу.
После того, как мы добавим эти новые стили к нашим существующим стилям для главной страницы (с помощью класса teaser в качестве отборочного селектора для элементов ), наш CSS будет выглядеть следующим образом:
Затем добавим изображения всех спикеров на странице Спикеры. Мы начнём с создания папки speakers в нашей папке images и поместим в неё изображения всех выступающих.
В файле speakers.html добавим элемент внутрь каждого элемента с информацией о спикере. Разместим каждый элемент внутри элемента
Значение атрибута src каждого изображения будет соответствовать папке speakers, которую мы создали и имени спикера; значением атрибута alt будет имя спикера.
Этот же шаблон добавления изображения следует применить ко всем другим спикерам.
Как мы делали с изображениями на нашей главной странице, так же мы хотим применить некоторые стили для изображений на странице Спикеры.
Начнём с применения свойства border-radius со значением 50%, превращая наши изображения в круги. Отсюда установим фиксированную высоту 130 пикселей для каждой картинки и зададим вертикальное выравнивание по верху строки, в которой они находятся.
После этого применим к изображениям вертикальные отступы. Используя отрицательный margin сверху в 66 пикселей мы вытянем немного изображения из элемента и выровняем по центру верхней границы элемента
После того, как мы добавим эти новые стили к нашим существующим стилям страницы Спикеры (с помощью класса speaker-info в качестве отборочного селектора для элементов ), наш CSS будет выглядеть следующим образом:
Поскольку мы используем агрессивный негативный margin для элемента внутри элемента
Ранее мы использовали свойство padding со значением 22px 0, таким образом указали 22 пикселя padding сверху и снизу и 0 пикселей padding слева и справа у элемента
Новый набор правил для класса speaker-info выглядит следующим образом:
Теперь главная страница и страница Спикеры выглядят весьма круто.
Рис. 9.02. Главная страница Styles Conference после добавления изображений в каждый раздел с тизером
Рис. 9.03. Страница Спикеры после добавления изображения для каждого спикера
Добавление аудио
АтрибутыДемонстрация добавления аудио
Альтернатива аудио и несколько источников
Добавление видео
Поскольку видео занимает место на странице, будет полезно определить его размеры, которые чаще всего делаются через свойства width и height в CSS. Это гарантирует, что видео не окажется слишком большим и останется в пределах макета страницы. Кроме того, задание размера как и с изображениями помогает браузеру отображать видео быстрее и позволяет выделить надлежащее место, необходимое для показа видео.
Настройка управления аудио и видео
Кроме того, если модифицированный плеер использует элемент в качестве управления, значение атрибута alt должно явно утверждать, что изображение предназначено для управления и требуется необходимое взаимодействие для работы.
Атрибут poster
Альтернатива видео
Дополнительным запасным вариантом, который может быть использован вместо обычного текста, является встроенное видео YouTube или Vimeo. Эти сайты видеохостинга позволяют загрузить наши видео, предоставляют стандартный видеоплеер и возможность внедрить видео на страницу с помощью встроенного фрейма.
Форматы аудио и видеофайлов в HTML5
Существует несколько инструментов, которые помогают преобразовать аудио или видеофайл в другие форматы и быстрый поиск даёт изобилие вариантов.
Добавление встроенных фреймов
Многие страницы используют элемент для внедрения медиа-контента на страницу с внешнего сайта, вроде Google Maps, YouTube и др.
Демонстрация добавления встроенного фрейма
Атрибут seamless
Атрибут seamless является новым атрибутом представленным в HTML5. Хотя поддержка браузеров для этого атрибута растёт, он не будет работать в старых браузерах. Рекомендуем проверить атрибут seamless перед его использованием.
На практике
Встроенные фреймы предлагают отличный способ добавления динамического содержимого на страницу. Позволим им выстрелить и обновим нашу страницу «Место проведения» некоторыми картами.
Непосредственно внутри этого элемента добавим элемент
Пока главный раздел нашего файла venue.html выглядит следующим образом:
Наш HTML должен выглядеть так:
Новый раздел в файле main.css выглядит следующим образом:
Подразумевая, что колонки, сделанные элементами
В целом, наш HTML для колонок выглядит следующим образом:
В каждый из элементов
, затем два элемента
включим адрес места проведения, а во втором элемента включим их сайт (со ссылкой) и номер телефона.
Внутри каждого абзаца используем элемент перевода строки
, чтобы разместить разрывы в адресе и между сайтом и номером телефона.
Для элемента с классом venue-theatre HTML выглядит следующим образом:
Этот же шаблон показанный здесь для театра следует также применять к гостинице (с использованием, конечно же, соответствующего адреса, веб-сайта и номера телефона).
HTML для элемента с классом venue-theatre теперь выглядит следующим образом:
Набор правил для класса venue-map выглядит так:
Теперь у нас есть страница с местом проведения, в комплекте с картами для разных мест нашей конференции.
Рис. 9.04. Наша страница «Место проведения» теперь включает встроенные фреймы
Демонстрация и исходный код
Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.
Семантическое определение figure и figcaption
Блочный элемент применяется для идентификации и охватывания независимого содержимого, часто в виде медиа-контента. Он может окружать изображения, аудиоклипы, видео, блоки кода, диаграммы, рисунки или другой самостоятельный медиа-контент. Внутри одновременно может содержаться более одного независимого содержимого, вроде нескольких изображений и видео. Если элемент перемещается из основной части страницы в другое место (например, вниз страницы), это не должно нарушать содержимое или удобочитаемость страницы.
Демонстрация
Демонстрация
Резюме
Наряду с текстом, медиа-контент является огромной частью Интернета. Применение изображений, аудио и видео только выросло за последние годы и это, вероятно, не замедлится. Теперь мы знаем как включить эти виды медиа-контента в наши проекты и как мы можем использовать их, чтобы обогатить содержание наших сайтов.
В этом уроке мы рассмотрели следующее:
Мы выходим на финишную прямую в изучении HTML и CSS, осталось только представить несколько компонент. Следующими по списку идут формы.
1.13. HTML5-видео
Раньше, если вы хотели добавить видео на веб-страницу, вам приходилось использовать элемент
| Атрибут | Описание, принимаемое значение |
|---|---|
| autoplay | Автоматическое воспроизведение видеоофайла сразу же после загрузки страницы. |
| controls | Указывает браузеру, что нужно отобразить базовые элементы управления воспроизведением (воспроизведение, пауза, громкость). |
| height | Задает высоту окна для отображения видеоданных, возможные значения: px или % |
| loop | Циклическое воспроизведение видеофайла. |
| muted | Выключает звук при воспроизведении видеофайла. |
| poster | URL файла изображения, которое будет отображаться во время загрузки видеофайла или до тех пор, пока пользователь не нажмет на кнопку PLAY. Если атрибут не задан, то будет отображаться первый кадр видеофайла. |
| preload | Атрибут, отвечающий за предварительную загрузку видеоконтента. Не является обязательным, некоторые браузеры игнорируют его. Возможные значения: auto — браузер загружает видеофайл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение. metadata — браузер загружает первую небольшую часть видеофайла, чтобы определить его основные характеристики. none — отсутствие автоматической загрузки видеофайла. |
| src | Содержит абсолютный или относительный URL-адрес видеофайла. |
| width | Задает ширину окна для отображения видеоданных, возможные значения: px или % |
2. Встраиваемый интерактивный контент
Элемент определяет контейнер для внешнего приложения или интерактивного содержимого (другими словами, плагина). Большинство браузеров поддерживало данный элемент на протяжении долгого времени. Тем не менее, данный тег не был включен в спецификацию HTML4, его добавили в спецификацию HTML5. С помощью на веб-страницы можно добавлять не только видеофайлы, но и векторные изображения в формате swf :
3. Видеокодеки
При просмотре видео проигрыватель должен его декодировать. Одни проигрыватели используют программное декодирование видеопотока, другие используют аппаратное декодирование.
Важно! Поскольку каждый браузер поддерживает определенный кодек, поэтому, чтобы обеспечить воспроизведение видео-контента во всех браузерах, видео-файл нужно размещать в нескольких форматах.
H.264 — высококачественный кодек от фирмы MPEG, делится на профили для поддержки как устройств с минимальными возможностями, так и устройств высокого разрешения.
Ogg Theora — открытый бесплатный стандарт для видео, качество и производительность несколько ниже стандарта H.264.
VP8 — открытый бесплатный кодек, сходный по качеству с H.264. Поддерживается в Firefox, Chrome и Opera.
4. Видеоконтейнеры
Любой видеофайл является файловым контейнером, в котором хранятся другие файлы. Аудио- и видеодорожки объединяются для воспроизведения видеоролика. Метаданные содержат информацию о данном видеоролике — изображение обложки, субтитры и пр. К популярным форматам видеоконтейнеров относятся следующие:
На данный момент браузеры поддерживают три основных видео формата:
| Формат | Видеокодек | Аудиокодек |
|---|---|---|
| .mp4 | H.264 | AAC |
| .ogg/.ogv | Theora | Vorbis |
| .webm | VP8 | Vorbis |
5. Альтернативные медиа-ресурсы
| Атрибут | Описание, принимаемое значение |
|---|---|
| media | Определяет тип медиа-устройства (т.е. для каких устройств оптимизирован файл). |
| src | Содержит абсолютный или относительный URL-адрес медиафайла. |
| type | Определяет MIME-тип медиафайла. |
6. Добавление субтитров и заголовков
7. Пример: размещаем видео на сайте
Размещаем код для вставки видео на сайт с помощью HTML5-разметки, используя атрибуты для задания видео требуемых параметров:
Если вы хотите выровнять видеоплеер на странице, нужно обернуть элемент в контейнер
8. Видеоконвертеры
Movavi — позволяет конвертировать видео и аудио в необходимый вам формат. Сохраняет медиафайлы для проигрывания на мобильных устройствах. «Умные» готовые профили позволяют добиваться максимального качества.
ONLINE-CONVERT — бесплатный онлайн-конвертер, позволяющий конвертировать любые медиа-файлы из одного формата в другой.
Firefogg — модуль расширения для Firefox, может создавать видеофайлы Theora и WebM. Работает непосредственно в браузере, но вся работа выполняется локально без обращения к веб-серверу.
CloudConvert — онлайн-конвертер файлов. Поддерживает практически любой формат аудио, видео, документов, электронных книг, архивов, изображений, электронных таблиц или презентаций.