Катастрофически тебя не хватает мне...

17:07 Не понимаю

Как?! Как можно было оставить 9-ти месячного ребенка снаружи, для того чтобы сходить в магазин?! Это какой же матерью нужно быть??? :fire:

Перейти к записи

@темы: Дети, Негатив, Новости

URL

Комментировать

19:16 button - жмякаем на кнопочки.

Значение	Описание
submit	По умолчанию. Кнопка отправки
button	Кнопка нажатия
reset	Очищающая кнопка (очищает поля формы)

Значение	Описание
application/x-www-form-urlencoded	Все символы кодируются перед отправкой (это по умолчанию)
multipart/form-data	Символы не кодируются. Это значение является обязательным при использовании форм, которые имеют загрузку файлов
text/plain	Пробелы преобразуются в символы "+", но специальные символы не кодируются

Значение	Описание
_blank	Отправляет форму в документ в новом окне/вкладке
_self	Отправляет форму в документ в том же фрейме (это по умолчанию)
_parent	Отправляет форму в документ во фрейм родителя
_top	Отправляет форму в документ в полном окне
имя фрейма	Отправляет форму в документ в именованном фрейме

Перейти к записи

@темы: HTML5

URL

Комментировать

15:27 input - тип еще тот...

читать дальшеinput элемент представляет типизированных полей данных, как правило, с формой управления, чтобы позволить пользователю редактировать данные.

type атрибута контролирует тип данных (и связанных с ним управление) элемента. Это - перечислимый атрибут.. В следующей таблице перечислены ключевые слова и состояний для атрибута - ключевые слова в левом столбце отображаются на состояния в ячейке во втором столбце на той же самой строке как ключевое слово.

Ключевое слово	Государство	Тип данных	Тип управления
`hidden`	Скрытый	Произвольная строка	n/a
`text`	Текст	Текст без разрывов строки	Текстовое поле
`search`	Поиск	Текст без разрывов строки	Поисковое поле
`tel`	Телефон	Текст без разрывов строки	Текстовое поле
`url`	URL	Абсолютный IRI	Текстовое поле
`email`	Электронная почта	Адрес электронной почты или список адресов электронной почты	Текстовое поле
`password`	Пароль	Текст без разрывов строки (уязвимая информация)	Текстовое поле, которое затеняет ввод данных
`datetime`	Дата и Время	Дата и время (год, месяц, день, час, минута, во-вторых, часть секунды) с набором часового пояса к UTC	Дата и контроль времени
`date`	Дата	Дата (год, месяц, день) без часового пояса	Управление датой
`month`	Месяц	Дата, состоящая из года и месяца без часового пояса	Управление месяца
`week`	Неделя	Дата, состоящая из летнего неделей числа и недельного числа без часового пояса	Недельное управление
`time`	Время	Время (час, минута, секунды, доли секунды) без часового пояса	Контроль времени
`datetime-local`	Локальная Дата и Время	Дата и время (год, месяц, день, час, минута, во-вторых, часть секунды) без часового пояса	Дата и контроль времени
`number`	Число	Численное значение	Текстовое поле или управление прядильщика
`range`	Диапазон	Численное значение, с дополнительным семантическим, что точное значение не важно	Управление ползунком или подобный
`color`	Цвет	sRGB красит с 8-разрядными красными, зелеными, и синими компонентами	Цвет хорошо
`checkbox`	Флажок	Ряд нуля или большего количества значений от предопределенного списка	Флажок
`radio`	Переключатель	Перечисляемое значение	Переключатель
`file`	Загрузка файла	Нуль или больше файлов каждый с типом MIME и дополнительно именем файла	Метка и кнопка
`submit`	Представьте Кнопку	Перечисляемое значение, с дополнительным семантическим, что это должно быть последнее выбранное значение и новички, формирует представление	Кнопка
`image`	Кнопка с изображением	Координата, относительно размера определенного изображения, с дополнительным семантическим, что это должно быть последнее выбранное значение и новички, формирует представление	Или активизируемое по щелчку изображение, или кнопка
`reset`	Кнопка сброса	n/a	Кнопка
`button`	Кнопка	n/a	Кнопка

value атрибут контента дает значение по умолчанию input элемент.

checked содержание атрибута логический атрибут , который дает по умолчанию выделение input элемента.

form атрибут используется, чтобы явно связаться input элемент с его формой. name атрибут представляет имя элемента. disabled атрибут используется, чтобы сделать управление неинтерактивным и препятствовать тому, чтобы его значение было изменено. autofocus - фокусировка на выбранном элементе формы.

Перейти к записи

@темы: HTML5

URL

Комментарии (7)

15:13 label - вешаем ярлычки

Перейти к записи

@темы: HTML5

URL

Комментировать

15:08 fieldset - группами по-одному...

Перейти к записи

@темы: HTML5

URL

Комментарии (1)

18:34 Form - то, с чем мы сталкиваемся каждый день

читать дальшеФорма - компонент Веб-страницы, у которой есть средства управления формой, такие как текстовые поля, кнопки, флажки, средства управления диапазоном, или палитры цветов. Пользователь может взаимодействовать с такой формой, обеспечивая данные, которые могут тогда быть отправлены серверу для дальнейшей обработки (например, возвращающий результаты поиска или вычисления). Никакие клиентские сценарии не необходимы во многих случаях, хотя API доступен так, чтобы сценарии могли увеличить пользовательский опыт или использовать формы в целях кроме подчиняющихся данных к серверу.

Запись формы состоит из нескольких шагов, которые могут быть выполнены в любом порядке: запись пользовательского интерфейса, реализация серверной обработки, и конфигурирование пользовательского интерфейса, чтобы связаться с сервером.

Любая форма создается с тега form , внутри которого помещают средства управления формой. Большинство средств управления представляют из себя теги input, который по умолчанию выглядит как короткое текстовое поле. Для обозначения средств управления используется тег label. Текстовое описание и сами элементы идут внетри этого тега. Каждую часть формы считают абзацем и обычно разделяют тегом Р. Вот пример того, как можно спросить имя у пользователя:

 <p><label>Customer name: <input></label></p>

Чтобы позволить пользователю выбирать размер пиццы, мы можем использовать ряд переключателей. Переключатели также используют тег input, на сей раз с атрибутом type в значением radio. Чтобы заставить переключатели работать группой, им дают общее название, используя атрибут name. Чтобы объединить в группу пакет управления, такой как группа переключателей размера пиццы, можно использовать тег fieldset. Заголовок такой группе можно задать тегом legend .

 <p><label>Customer name: <input></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>

Чтобы выбрать начинку, мы можем использовать флажки. Они используют input элемент с type атрибута со значением checkbox :

 <p><label>Customer name: <input></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>

Пиццерии, для которых эта форма пишется всегда делает ошибки, поэтому нужен способ связаться с клиентом. Для этой цели, мы можем использовать элементы управления формы специально для телефонов ( input с элементами type атрибут установлен tel ), а также адреса электронной почты ( input с элементами type атрибут установлен email ):

 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>E-mail address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>

Мы можем использовать input элемент с type набора атрибутов time обратиться за время доставки. Многие из этих форм управления имеют атрибуты для управления именно то, что значения могут быть указаны, в этом случае, три атрибута Особый интерес представляют min , max , и step . Эти установки минимального времени, максимальное время, а интервал между допустимыми значениями (в секундах). Эта пиццерия только обеспечивает между 11 утра и 9 вечера, и не сулит ничего лучше, чем с шагом 15 минут, которые мы можем отметить таким образом:

 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>E-mail address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>

Продолжение в комментариях

Перейти к записи

@темы: HTML5

URL

Комментарии (2)

18:17 tr, td - и т.д.

ID	Measurement	Average	Maximum
	Cats
93	Legs	3.5	4
10	Tails	1	1
	English speakers
32	Legs	2.67	4
35	Tails	0.33	1

Перейти к записи

@темы: HTML5

URL

Комментировать

18:07 tbody, thead и прочее, что мы не знали..

Перейти к записи

@темы: HTML5

URL

Комментировать

17:49 colgroup и col - группами по одному

Перейти к записи

@темы: HTML5

URL

Комментировать

17:46 caption - заголовок для таблицы

	1	2	3	4	5	6
1	2	3	4	5	6	7
2	3	4	5	6	7	8
3	4	5	6	7	8	9
4	5	6	7	8	9	10
5	6	7	8	9	10	11
6	7	8	9	10	11	12

Перейти к записи

@темы: HTML5

URL

Комментировать

17:40 table - для таблиц, долой с разметки!

читать дальшеtable элемент представляет данные с более чем одном измерении, в виде таблицы .

У таблиц есть строки, столбцы, и ячейки, данные их потомками. Строки и столбцы формируют сетку; ячейки таблицы должны полностью покрыть ту сетку без перекрытия.

Таблицы не должны использоваться в качестве макета сайта. Исторически, у многих веб-авторов есть таблицы в HTML как способ управлять их макетом страницы, мешающим извлечь табличные данные из таких документов. В частности пользователи инструментов доступности, как средства чтения с экрана, вероятно, сочтут очень трудным переместиться по страницам с таблицами, используемыми для расположения. Если таблица будет использоваться для верстки он должен быть помечен с помощью атрибута role="presentation" для браузера пользователя достойно представлять таблицы вспомогательных технологий и правильно передать намерение автора к инструментам, которые хотят извлечь табличные данные из документа.

Есть множество альтернатив использованию HTML-таблиц для расположения, прежде всего используя расположение CSS и табличную модель CSS.

border атрибут может быть указан в table элементов, чтобы явно указать, что table элементов не используется для целей компоновки. Если указано, значение атрибута должно быть либо пустая строка или значение " 1 ". Атрибут используется некоторыми агентами пользователей как признак того, что границы должны быть сделаны вокруг ячеек таблицы.

Вот пример из таблицы, для разметки головоломки Судоку. Обратите внимание на отсутствие заголовков, которые не нужны в такой таблице.

<section>
 <style scoped>
  table { border-collapse: collapse; border: solid thick; }
  colgroup, tbody { border: solid medium; }
  td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; padding: 0; }
 </style>
 <h1>Today's Sudoku</h1>
 <table>
  <colgroup><col><col><col>
  <colgroup><col><col><col>
  <colgroup><col><col><col>
  <tbody>
   <tr> <td> 1 <td>   <td> 3 <td> 6 <td>   <td> 4 <td> 7 <td>   <td> 9
   <tr> <td>   <td> 2 <td>   <td>   <td> 9 <td>   <td>   <td> 1 <td>
   <tr> <td> 7 <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td> 6
  <tbody>
   <tr> <td> 2 <td>   <td> 4 <td>   <td> 3 <td>   <td> 9 <td>   <td> 8
   <tr> <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td>
   <tr> <td> 5 <td>   <td>   <td> 9 <td>   <td> 7 <td>   <td>   <td> 1
  <tbody>
   <tr> <td> 6 <td>   <td>   <td>   <td> 5 <td>   <td>   <td>   <td> 2
   <tr> <td>   <td>   <td>   <td>   <td> 7 <td>   <td>   <td>   <td>
   <tr> <td> 9 <td>   <td>   <td> 8 <td>   <td> 2 <td>   <td>   <td> 5
 </table>
</section>

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

Для таблиц с большими объемами числового контента, используйте моноширинные шрифты это может помочь пользователям видеть образцы, особенно в ситуациях, где агент пользователя не представляет границы. (К сожалению, по историческим причинам, не рендеринг граничит с таблицами, общее значение по умолчанию.)

Перейти к записи

@темы: HTML5

URL

Комментировать

17:20 area - ореол обитания ссылок

State	Keywords
Circle state	`circle`
Default state	`default`
Polygon state	`poly`
Rectangle state	`rect`

Перейти к записи

@темы: HTML5

URL

Комментировать

17:02 map - и вы не заблудитесь

Перейти к записи

@темы: HTML5

URL

Комментировать

16:03 canvas - рисуем от руки

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

Когда авторы используют canvas элемент, они должны также обеспечить контент, который, когда представлено пользователю, передает по существу ту же самую функцию или цель как растровый холст. Этот контент может быть помещен как контент canvas элемент. Содержание canvas элемент, если таковые вообще имеются, является контентом нейтрализации элемента.

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

В неинтерактивных, статических, визуальных носителях, если canvas элемент был ранее подрисован (например, если страница просматривалась в интерактивном визуальном носителе и теперь печатается, или если некоторый сценарий, который работал во время процесса макета страницы, подрисовал элемент), тогда canvas элемент представляет встроенный контент с текущим изображением и размером. Иначе, элемент представляет свой контент нейтрализации вместо этого.

canvas у элемента есть два атрибута, чтобы управлять размером координатного пространства: width и height. У этих атрибутов, когда определено, должны быть значения, которые являются допустимыми неотрицательными целыми числами. width значения по умолчанию атрибута к 300, и height значения по умолчанию атрибута к 150.

Как же этот холст выглядит? В действительности, никак. У тега нет собственного контента и рамки.

Невидимый холст

Код выглядит так.

< canvas width="300" height="225">

Давайте добавим пунктирную рамку, чтобы увидеть, с чем мы имеем дело.

Холст с рамкой

Перейти к записи

@темы: HTML5

URL

Комментировать

15:50 Коды ошибок аудио/видео контента

Перейти к записи

@темы: HTML5

URL

Комментировать

15:48 track - star-трек =)

читать дальшеrack элемент позволяет авторам определять явные внешние синхронизированные текстовые дорожки для элементов носителей. Это ничего не представляет самостоятельно.

kind атрибут - перечислимый атрибут. Следующая таблица приводит ключевые слова, определенные для этого атрибута. Ключевое слово, данное в первой ячейке каждой строки, отображается на состояние, данное во второй ячейке.

Ключевое слово	Государство	Краткое описание
`subtitles`	Подзаголовки	Запись или преобразование диалога, подходящего для того, когда звук доступен, но не понятый (например, потому что пользователь не понимает язык звуковой дорожки ресурса носителей). Выведенный на экран по видео.
`captions`	Заголовки	Запись или преобразование диалога, звуковых эффектов, соответствующих музыкальных сигналов, и другой соответствующей аудиоинформации, подходящей для того, когда звуковая дорожка недоступна (например, потому что это отключено звук или потому что пользователь является глухим). Выведенный на экран по видео; маркированный как соответствующий для слабослышащего.
`descriptions`	Описания	Текстовые описания видео компонента ресурса носителей, предназначенного для аудио синтеза, когда визуальный компонент недоступен (например, потому что пользователь взаимодействует с приложением без экрана при управлении, или потому что пользователь является слепым). Синтезируемый как отдельный аудиотрек.
`chapters`	Главы	Заголовки главы, предназначенные, чтобы использоваться для того, чтобы переместиться по ресурсу носителей. Выведенный на экран как интерактивный список в интерфейсе агента пользователя.
`metadata`	Метаданные	Дорожки предназначены для использования из сценария. Не выведенный на экран агентом пользователя.

Атрибут может быть опущен. Значение по умолчанию отсутствующего значения - состояние подзаголовков.

src атрибут дает адрес текстовых данных дорожки. Значение должно быть допустимым непустым URL, потенциально окруженным пробелами. Этот атрибут должен присутствовать.

srclang атрибут дает язык текстовых данных дорожки. Значение должно быть допустимым BCP 47 тегов языка. Этот атрибут должен присутствовать если элемент kind атрибут находится в состоянии подзаголовков.

label атрибут дает читаемый пользователем заголовок для дорожки. Этот заголовок используется агентами пользователя при перечислении подзаголовка, заголовка, и аудио дорожек описания в их пользовательском интерфейсе.

Значение label атрибут, если атрибут присутствует, не должен быть пустой строкой.
Это видео есть субтитры на нескольких языках:

<videо src="brave.webm">
 <track kind=subtitles src=brave.en.vtt srclang=en label="English">
 <track kind=captions src=brave.en.vtt srclang=en label="English for the Hard of Hearing">
 <track kind=subtitles src=brave.fr.vtt srclang=fr label="Français">
 <track kind=subtitles src=brave.de.vtt srclang=de label="Deutsch">
</videо>

Перейти к записи

@темы: HTML5

URL

Комментировать

15:40 Без заголовка

Почему все на свои Дни рождения ждут себе подарков и приятностей... и только на День Рождения Иисуса все ждут от него подарков и чудес!?

Перейти к записи

@темы: Интересности, Наблюдения

URL

Комментировать

15:39 source - для не самостоятельных

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

src атрибут указывает адрес медиа-ресурс . Значение должно быть действительным непустой URL потенциально окруженные пробелами . Этот атрибут должен присутствовать. Динамическое изменение source элемента и его атрибут, если элемент уже вставлена в video или audio элемент будет иметь никакого эффекта.

type атрибут дает тип ресурса носителя, чтобы помочь браузеру пользователя определить, может ли это играть этот ресурс носителя прежде, чем попытаться загрузить его. Если определено, его значение должно быть допустимым типом MIME. codecs параметр, который определяют определенные типы MIME, мог бы быть необходимым, чтобы определить точно, как ресурс закодирован.

<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

media атрибут дает предполагаемый тип носителя медиа-ресурс , чтобы помочь браузеру пользователя определить, если это медиа-ресурс полезен для пользователя перед получением его. Его значение должно быть допустимым запросом СМИ.

По умолчанию, если media атрибут опущен, это " all ", что означает, что по умолчанию медиа-ресурс предназначен для всех СМИ.

Перейти к записи

@темы: HTML5

URL

Комментировать

15:33 audio - с песнями и плясками

Перейти к записи

@темы: HTML5

URL

Комментировать

15:31 video - местами работаем, местами нет...

читать дальшеA video элемент используется для того, чтобы играть видео или фильмы, и аудиофайлы с заголовками.

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

В частности, это содержание не предназначено для решения проблемы доступности. Чтобы сделать видео доступным для слепых, глухих и людей с другими физическими или когнитивными расстройствами, авторы должны предоставить альтернативные потоки средств массовой информации и / или вставлять доступность средств (например, заголовок или дорожек субтитров, аудиодорожек описание, или вход Язык накладками) в медиа потоки.

src , preload , autoplay , mediagroup , loop , muted и controls атрибуты, общие для всех медиа-элементов.

poster атрибут дает адрес файла изображения, который может показать агент пользователя, в то время как никакие видеоданные не доступны. Атрибут, если есть должен содержать допустимый непустой URL, потенциально окруженный пробелами.

<sсriрt>
 function failed(e) {
   // video playback failed - show a message saying why
   switch (e.target.error.code) {
     case e.target.error.MEDIA_ERR_ABORTED:
       alert('You aborted the video playback.';);
       break;
     case e.target.error.MEDIA_ERR_NETWORK:
       alert('A network error caused the video download to fail part-way.';);
       break;
     case e.target.error.MEDIA_ERR_DECODE:
       alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.';);
       break;
     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
       alert('The video could not be loaded, either because the server or network failed or because the format is not supported.';);
       break;
     default:
       alert('An unknown error occurred.';);
       break;
   }
 }
</sсriрt>
<p><videо src="tgif.vid" autoplay controls onerror="failed(event)"></videо></p>
<p><a href="tgif.vid">Download the video file</a>.</p>

Поддержка < video > все еще развивается и это вежливый способ сказать, что он пока не работает, по крайней мере, работает не везде.

Существует много форматов контейнеров видео, вот некоторые самые популярные.

MPEG-4, обычно с расширением mp4 или m4v. MPEG-4 основан на старом контейнере Apple QuickTime (файлы с расширением mov). Трейлеры к фильмам на сайте Apple по-прежнему используют старый контейнер, но фильмы в iTunes поставляются в формате контейнера MPEG-4.

Flash-видео, обычно с расширением flv. Для Flash-видео используется Adobe Flash, что не удивительно. До Flash 9.0.60.184 (по-другому Flash Player 9 Update 3) поддерживался только контейнер в формате Flash. Поздние версии также поддерживают контейнер MPEG-4.

Ogg, обычно с расширением ogv. Ogg является открытым стандартом с открытым исходным кодом для пользователей, свободный от каких-либо патентов. Браузеры Firefox 3.5, Chrome 4 и Opera 10.5 имеют встроенную поддержку без специальных плагинов — контейнера Ogg, Ogg-видео (называемое «Theora») и Ogg-аудио (называемое «Vorbis»). Ogg поддерживается всеми основными дистрибутивами Linux, также можно использовать его на Mac и Windows установив соответственно компоненты QuickTime или фильтры DirectShow. Плеер VLC превосходно проигрывает Ogg-файлы на любой платформе.

WebM это новый формат контейнера, технически похожий на другой формат называемый Matroska. WebM был анонсирован в мае 2010 года и предназначен для использования исключительно с видеокодеком VP8 и аудиокодеком Vorbis. Встроенная поддержка без специальных плагинов имеется в браузерах Chromuim, Google Chrome, Mozilla Firefox и Opera. Компания Adobe объявила, что будущая версия Flash также будет поддерживать WebM-видео.

Audio Video Interleave, как правило, с расширением avi. Формат контейнера AVI был изобретен Майкрософт в то время, когда считалось удивительным, что компьютеры вообще могут проигрывать видео. Особенности последних форматов файлов вроде метаданных официально не поддерживаются. Также этот формат официально не поддерживает большинство используемых современных аудио и видеокодеков. Он является форматом по умолчанию для популярных кодировщиков вроде MEncoder.

Нет единой комбинации контейнеров и кодеков, которая работает во всех HTML5-браузерах. И эта ситуация вряд ли изменится в ближайшем будущем.

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

Для обеспечения максимальной совместимости рабочий процесс с вашим видео будет следующим.
1 Сделать одну версию с помощью WebM (VP8 + Vorbis).
2 Сделать еще одну версию, которая использует видео в базовом H.264 и аудио AAC с профилем «низкая сложность» в контейнере MP4.
3 Сделать еще одну версию, которая использует видео Theora и аудио Vorbis в контейнере Ogg.
4 В одном элементе поставить ссылку на все три видеофайла и предусмотреть откат к плееру на Flash.

Кросбраузерный пример:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Видео</title>
 </head>
 <body>
  <videо id="movie" width="400" height="320" preload controls>
   <source src="video/snowman.mp4" />
   <source src="video/snowman.webm" type='video/webm; codecs="vp8, vorbis"' />
   <source src="video/snowman.ogv" type='video/ogg; codecs="theora, vorbis"' />
   <object id="flowplayer" type="application/x-shockwave-flash" 
      width="400" height="320">
    <param name="movie" value="video/flowplayer-3.2.5.swf" /> 
    <param name="flashvars" value='config={"clip":"video/snowman.mp4"}' />
    <p>Загрузить видео в <a href="video/snowman.mp4">MP4</a>, 
         <a href="video/snowman.ogv">OGG</a> или 
         <a href="video/snowman.webm">WebM</a></p>
   </object>
  </videо>
  <sсriрt>
   var v = document.getElementById("movie");
   v.onclick = function() {
    if (v.paused) {
     v.play();
    } else {
     v.pause();
    }
   };
  </sсriрt>
 </body>
</html>

См. комментарии для более полной информации

Перейти к записи

@темы: HTML5

URL

Комментарии (4)