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

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

Жанры

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. Пожиратель
Фантастика:
попаданцы
аниме
сказочная фантастика
фэнтези
5.00
рейтинг книги
Печать Пожирателя

Привет из Загса. Милый, ты не потерял кольцо?

Лисавчук Елена
Любовные романы:
современные любовные романы
5.00
рейтинг книги
Привет из Загса. Милый, ты не потерял кольцо?

Мастер 2

Чащин Валерий
2. Мастер
Фантастика:
фэнтези
городское фэнтези
попаданцы
технофэнтези
4.50
рейтинг книги
Мастер 2

Нечто чудесное

Макнот Джудит
2. Романтическая серия
Любовные романы:
исторические любовные романы
9.43
рейтинг книги
Нечто чудесное

Клан

Русич Антон
2. Долгий путь домой
Фантастика:
боевая фантастика
космическая фантастика
5.60
рейтинг книги
Клан

Имя нам Легион. Том 3

Дорничев Дмитрий
3. Меж двух миров
Фантастика:
боевая фантастика
рпг
аниме
5.00
рейтинг книги
Имя нам Легион. Том 3

Запасная дочь

Зика Натаэль
Фантастика:
фэнтези
6.40
рейтинг книги
Запасная дочь

Убивать чтобы жить 7

Бор Жорж
7. УЧЖ
Фантастика:
героическая фантастика
космическая фантастика
рпг
5.00
рейтинг книги
Убивать чтобы жить 7

У врага за пазухой

Коваленко Марья Сергеевна
5. Оголенные чувства
Любовные романы:
остросюжетные любовные романы
эро литература
5.00
рейтинг книги
У врага за пазухой

Кодекс Охотника. Книга XXI

Винокуров Юрий
21. Кодекс Охотника
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Кодекс Охотника. Книга XXI

Генерал Скала и ученица

Суббота Светлана
2. Генерал Скала и Лидия
Любовные романы:
любовно-фантастические романы
6.30
рейтинг книги
Генерал Скала и ученица

Оцифрованный. Том 1

Дорничев Дмитрий
1. Линкор Михаил
Фантастика:
боевая фантастика
попаданцы
аниме
5.00
рейтинг книги
Оцифрованный. Том 1

Его маленькая большая женщина

Резник Юлия
Любовные романы:
современные любовные романы
эро литература
8.78
рейтинг книги
Его маленькая большая женщина

Хуррит

Рави Ивар
Фантастика:
героическая фантастика
попаданцы
альтернативная история
5.00
рейтинг книги
Хуррит