Чтение онлайн

на главную - закладки

Жанры

HTML5 для веб-дизайнеров
Шрифт:

Можно помочь браузерам и указать MIME-типы для каждого исходного файла:

<audio controls>

<source src="witchitalineman.ogg" type="audio/ogg">

<source src="witchitalineman.mp3" type="audio/mpeg">

</audio>

Элемент

source
– самостоятельный (или «пустой») элемент, так что если вы используете синтаксис XHTML, не
забудьте включить закрывающий слэш в конца каждого тега
<source />
.

Запасной вариант

Возможность указывать несколько элементов

source
очень удобна. Но есть браузеры, которые пока не поддерживают элемент
audio
совсем. Угадаете, на который браузер я намекаю?

Internet Explorer и его родню нужно кормить аудиофайлами с ложечки, по старинке, через Flash. Модель содержимого элемента

audio
позволяет это сделать. Все, что находится между открывающим и закрывающим тегами
<audio>
– и что при этом не является элементом
source
– будет показываться браузерам, которые не понимают элемента
audio
:

<audio controls>

<source src="witchitalineman.ogg» type="audio/ogg">

<source src="witchitalineman.mp3» type="audio/mpeg">

<object type="application/x-shockwave-flash"
data="player.swf?soundFile=witchitalineman.mp3">

<param name="movie"
value="player.swf?soundFile=witchitalineman.mp3">

</object>

</audio>

В этом примере элемент

object
будет доступен только тем браузерам, которые не поддерживают элемент
audio
.

Можно пойти еще дальше. Элемент

object
, включающийся при «запасном варианте», тоже предоставляет вам возможность включить содержимое. Это значит, что, если больше ничего не срабатывает, можно дать старый проверенный вариант – гиперссылку:

<audio controls>

<source src="witchitalineman.ogg" type="audio/ogg">

<source src="witchitalineman.mp3" type="audio/mpeg">

<object type="application/x-shockwave-flash"
data="player.swf?soundFile=witchitalineman.mp3">

<param name="movie"
value="player.swf?soundFile=witchitalineman.mp3">

<a href="#">Скачать песню</a>

</object>

</audio>

В этом примере четыре

уровня постепенной деградации.

1. Браузер поддерживает элемент

audio
и формат Ogg Vorbis.

2. Браузер поддерживает элемент

audio
и формат MP3.

3. Браузер не поддерживает элемент

audio
, но в нем установлен Flash-плагин.

4. Браузер не поддерживает элемент

audio
, и в нем не установлен Flash-плагин.

Доступ на все уровни

Модель содержимого элемента

audio
очень удобна для предоставления «запасного варианта» содержимого. Запасное содержимое – не то же самое, что содержимое для технологий специальных возможностей.

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

<audio controls>

<source src="witchitalineman.ogg" type="audio/ogg">

<source src="witchitalineman.mp3" type="audio/mpeg">

I am a lineman for the county…

</audio>

Транскрипция в этом примере будет видна только тем браузерам, которые поддерживают элемент

audio
. Размечать незвуковое содержимое таким образом никак не поможет глухому пользователю с хорошим браузером. Кроме того, так называемое содержимое для технологий специальных возможностей часто полезно для всех – так что зачем его прятать?

<audio controls>

<source src="witchitalineman.ogg" type="audio/ogg">

<source src="witchitalineman.mp3" type="audio/mpeg">

</audio>

I am a lineman for the county…

Video

Если родное для браузера воспроизведение аудио – это воодушевляюще, то перспектива родного отображения видео в браузере заставляет веб-разработчиков пускать слюнки от нетерпения. По мере того как пропускная способность интернет-каналов возросла, видеосодержимое начало становиться все более и более популярным. Сейчас главная технология для показа видео в вебе – Flash-плагин. Но HTML5 может все это изменить.

Элемент video работает примерно так же, как элемент

audio
. У него есть необязательные атрибуты
autoplay
,
loop
и 
preload
. Вы можете указать расположение видеофайла либо через атрибут
src
элемента
video
, либо с помощью элементов source, вложенных внутри открывающих и закрывающих тегов
<video>
. Вы можете разрешить браузеру отобразить пользовательский интерфейс с помощью атрибута
controls
или написать свои собственные управляющие элементы.

Поделиться:
Популярные книги

Штуцер и тесак

Дроздов Анатолий Федорович
1. Штуцер и тесак
Фантастика:
боевая фантастика
альтернативная история
8.78
рейтинг книги
Штуцер и тесак

Ох уж этот Мин Джин Хо 2

Кронос Александр
2. Мин Джин Хо
Фантастика:
попаданцы
5.00
рейтинг книги
Ох уж этот Мин Джин Хо 2

Хозяйка дома на холме

Скор Элен
1. Хозяйка своей судьбы
Любовные романы:
любовно-фантастические романы
5.00
рейтинг книги
Хозяйка дома на холме

Системный Нуб 4

Тактарин Ринат
4. Ловец душ
Фантастика:
боевая фантастика
рпг
5.00
рейтинг книги
Системный Нуб 4

Приручитель женщин-монстров. Том 7

Дорничев Дмитрий
7. Покемоны? Какие покемоны?
Фантастика:
юмористическое фэнтези
аниме
5.00
рейтинг книги
Приручитель женщин-монстров. Том 7

Назад в СССР: 1986 Книга 5

Гаусс Максим
5. Спасти ЧАЭС
Фантастика:
попаданцы
альтернативная история
5.75
рейтинг книги
Назад в СССР: 1986 Книга 5

Жандарм 2

Семин Никита
2. Жандарм
Фантастика:
попаданцы
альтернативная история
аниме
5.00
рейтинг книги
Жандарм 2

Гром над Академией. Часть 1

Машуков Тимур
2. Гром над миром
Фантастика:
фэнтези
боевая фантастика
5.25
рейтинг книги
Гром над Академией. Часть 1

Энфис 5

Кронос Александр
5. Эрра
Фантастика:
героическая фантастика
рпг
аниме
5.00
рейтинг книги
Энфис 5

Не грози Дубровскому! Том V

Панарин Антон
5. РОС: Не грози Дубровскому!
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Не грози Дубровскому! Том V

Двойня для босса. Стерильные чувства

Лесневская Вероника
Любовные романы:
современные любовные романы
6.90
рейтинг книги
Двойня для босса. Стерильные чувства

Мастер 3

Чащин Валерий
3. Мастер
Фантастика:
героическая фантастика
попаданцы
аниме
5.00
рейтинг книги
Мастер 3

Возвышение Меркурия. Книга 3

Кронос Александр
3. Меркурий
Фантастика:
попаданцы
аниме
5.00
рейтинг книги
Возвышение Меркурия. Книга 3

Прогрессор поневоле

Распопов Дмитрий Викторович
2. Фараон
Фантастика:
попаданцы
альтернативная история
5.00
рейтинг книги
Прогрессор поневоле