Привет. Эта лекция будет
посвящена мультимедиа. Теги мультимедиа помогают добавить
видео и аудио на ваш сайт. Видео и аудио — два самых популярных и два самых ненавистных
элемента в Интернете. Дизайнеры их обожают,
потому что могут поделиться со всеми классным видео и, возможно,
музыкой собственного сочинения. Посетители сайта иногда ненавидят их,
потому что чувствуют, что не могут контролировать то, что видят. Сегодня мы поговорим об аудио-
и видеоэлементах HTML5. Мы бегло коснемся
назначения плагинов. А затем, наконец, поразмышляем
о проблемах, связанных с доступностью, которые всегда возникают
в связи с этими тегами мультимедиа. До HTML5 мультимедиа не имели
какого-то общего назначения во всех браузерах. Новый HTML5 создан так, чтобы устранить
необходимость в использовании плагинов или дополнительного ПО,
не установленного заранее на компьютер. Все должно работать автоматически. Если на сайте есть видео, у людей должна
быть возможность посмотреть его сразу, не скачивая Quicktime, Flash и пр. Сейчас это еще не полностью реализованный тег. Но все быстро движется в этом направлении. Начнем с элемента video. Тег video использует атрибут src, схожий с атрибутом тега img. Вы сообщаете браузеру, где находится файл. Кроме того, можно использовать
так называемые встроенные теги, где под тегом video может
быть несколько атрибутов src. Есть несколько популярных атрибутов. Первые два, height (высота)
и width (ширина), говорят сами за себя. Какого размера должно быть
ваше видео в окне браузера? Атрибут autoplay определяет, запускается ли
видео сразу после загрузки страницы или нет. Loop позволяет воспроизводить видео повторно. И последний атрибут, controls, наделяет
посетителя возможностью контролировать остановку
и воспроизведение видео. При использовании тега video
лучше добавить не только различные атрибуты, но и текст. Таким образом, если браузер по какой-то
причине не поддерживает тег или не может воспроизвести видео,
пользователь получает подсказку о том, что здесь должно быть видео. Элемент audio схож с video. И опять же мы используем
атрибут src для привязки к файлу. Как правило, используются
файлы формата .mp3 или .wav. Атрибуты также очень похожи. Autoplay, controls, loop, но также есть buffered, muted и volume. Это дополнительные атрибуты,
которые позволяют контролировать, что слышит пользователь,
и громкость воспроизведения. При использовании аудио
также можно настроить отрывки. Например, я хочу, чтобы видео
начиналось в определенное время. Первый пример — музыка будет играть с 5 по 25 секунду. Следующий — она играет с начала, но останавливается на 39 секунде. И так далее. Дорожка будет проигрываться с 1:38 до 1:45. Или вот, самое последнее:
начнет проигрываться с 42 секунды. Недостаточно будет просто показать вам код аудио и видео HTML. Решающее значение имеет то,
что вы видите и слышите. Поэтому давайте взглянем
на действительно работающий код. В src я сослалась на BoxCar.MOV, а ширину по умолчанию установила на 40. Перейду в меню Sublime
и открою страницу в браузере. Вот оно. Выглядит
не очень многообещающе. Вы могли не заметить, что видео было
загружено и полностью воспроизведено, если только у вас не очень хорошее
зрение и невероятно быстрый браузер. Давайте попробуем еще раз. На самом деле, браузер
лишь загрузил видео, ничего больше. Давайте добавим autoplay. Сохраняем. Вернусь на вкладку, перезагружу ее.
Теперь вы видите, что атрибут autoplay заставляет
видео автоматически воспроизводиться. Это стоит делать только в том случае,
если вы на 100% уверены, что пользователь хочет его увидеть. Не так давно был большой
скандал из-за соцсети, в которой все видео стали
воспроизводиться автоматически. При посещении сайта
проигрывались все видео. И это съело огромное количество трафика. Вместо autolplay давайте вставим controls. Как видите, это позволило добавить
маленькую панель управления под видео. Теперь видео можно запускать,
останавливать и перематывать. Всегда стоит думать о том, как повысить удобство сайта для пользователей. В тег можно добавить несколько атрибутов, просто наложить их друг на друга. Если мы сделаем это сейчас, вы сможете увидеть, как мой пятилетний
ребенок снова и снова носится по улице. Следует избегать loop и autoplay, или, во всяком случае, добавлять при этом controls. Договорились? И последнее, о чем я хотела рассказать.
Вы можете заметить, что атрибуты controls и loop
не принимают значений. Src чему-то равен, width чему-то равен. Если вы добавляете такой логический атрибут, вы как бы сообщаете, что controls=true. Loop=true. Именно так мы и дополнили наше видео. Теперь обратимся к аудио. Сделаем это немного больше. Здесь у меня дважды добавлена ссылка на одну и ту же песню. В первой версии вы можете
заметить маленькую аудиопанель. Это потому что я добавила controls. Если я нажму «воспроизвести»,
проиграет вся песня целиком. Однако для второго варианта я добавила, вот здесь, t=15:35. Я настроила все так, чтобы вы услышали песню
с самого интересного момента. Это лишь простые примеры того,
как можно использовать теги для отображения видео и аудио. Надеюсь, что в процессе написания
кода вы будете экспериментировать с элементами,
чтобы действительно понять, как работают видео и разные теги HTML5. Я постоянно говорю тем, кто пишет код в других версиях HTML
и не хочет переходить на HTML5. Есть много причин сделать этот простой шаг. И плагины являются отличным примером. Плагины требовались, поскольку
до HTML5 не было единого стандарта. Таким образом, поскольку
некоторые браузеры по-прежнему используют Flash для воспроизведения,
стоит все равно использовать тег, даже если он пока не поддерживается. Наконец, давайте поговорим о вопросах доступности. Когда вы используете видео или аудио —
любые неконтекстные элементы, нужно добавить текстовые описания, субтитры или что-то аналогичное. Также нужно предоставить ссылки на плагины. В противном случае вы увидите только сломанную иконку, по которой
трудно будет судить о содержании элемента. Наконец, самое важное, что вам нужно
вынести из этой лекции, помимо знания о том, как использовать такой код, — это то, что мультимедиа направлены
на улучшение содержимого. Они не должны отвлекать. Пользователи не должны тратить
время в попытках выяснить, как их выключить, чтобы наконец добраться
до содержимого страницы. Спасибо за внимание.