Как на сайт поставить картинку на: Как добавить картинку на веб-страницу? | Рецепты

Элемент работает точно так же, как элемент , с небольшими отличиями, как указано ниже. Типичный пример может выглядеть так:

 <управление звуком>
  
  
  <р>
    Ваш браузер не поддерживает этот аудиофайл. Вот
    вместо этого ссылка на аудио.
  


 

Это выдает в браузере примерно следующее:

Примечание: Вы можете запустить демо-версию аудио вживую на GitHub (также см. исходный код аудиоплеера). для воспроизведения аудио. Другие отличия от HTML-видео заключаются в следующем:

• Элемент не поддерживает ширину / высоту атрибуты — опять же, визуальной составляющей нет, поэтому ни ширину, ни высоту присваивать нечему.
• Также не поддерживает атрибут poster — опять же, нет визуальной составляющей.

Помимо этого, <аудио> поддерживает все те же функции, что и <видео> — дополнительную информацию о них см. в разделах выше.

Теперь мы обсудим немного более сложную концепцию, о которой действительно полезно знать. Многие люди не могут или не хотят слушать аудио/видео контент, который они находят в Интернете, по крайней мере, в определенное время. Например:

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

Было бы неплохо предоставить этим людям расшифровку слов, сказанных на аудио/видео? Ну, благодаря HTML-видео, вы можете. Для этого мы используем формат файла WebVTT и элемент .

Примечание: «Транскрибировать» означает «записывать произносимые слова в виде текста». Полученный текст представляет собой «расшифровку».

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

субтитры

Переводы иностранных материалов для людей, которые не понимают слов, произнесенных в аудио.

субтитры

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

описаний по времени

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

Типичный файл WebVTT будет выглядеть примерно так:

 ВЕБВТТ
1
00:00:22.230 --> 00:00:24.606
Это первый подзаголовок.
2
00:00:30.739 --> 00:00:34.074
Это второе.
…
 

Чтобы это отображалось вместе с воспроизведением мультимедиа HTML, вам необходимо:

1. Сохраните его как файл .vtt в подходящем месте.
2. Ссылка на файл .vtt с элементом . <трек> должен быть помещен в пределах <аудио> или <видео> , но ведь <источник> элементов. Используйте атрибут вида , чтобы указать, являются ли сигналы субтитрами , подписями или описаниями . Кроме того, используйте srclang , чтобы сообщить браузеру, на каком языке вы написали субтитры. Наконец, добавьте метку , чтобы помочь читателям определить язык, который они ищут.

Вот пример:

 <управление видео>
  
  
  

 

Это приведет к отображению видео с субтитрами, например:

Для получения более подробной информации, в том числе о том, как добавлять метки, см. раздел Добавление титров и субтитров к HTML-видео. Вы можете найти пример, сопровождающий эту статью, на GitHub, написанный Яном Девлином (см. также исходный код). В этом примере используется JavaScript, чтобы пользователи могли выбирать между различными субтитрами. Обратите внимание, чтобы включить субтитры, вам нужно нажать кнопку «CC» и выбрать вариант — English, Deutsch или Español.

Примечание: Текстовые дорожки также помогут вам с SEO, так как поисковые системы особенно любят текст. Текстовые дорожки даже позволяют поисковым системам напрямую ссылаться на место в середине видео.

Активное обучение: встраивание собственного аудио и видео

Для этого активного обучения мы (в идеале) хотели бы, чтобы вы вышли в мир и записали собственное видео и аудио — большинство современных телефонов позволяют записывать аудио и видео очень легко и, при условии, что вы можете перенести его на свой компьютер, вы можете использовать его. Возможно, вам придется выполнить некоторое преобразование, чтобы получить WebM и MP4 в случае видео и MP3 и Ogg в случае аудио, но существует достаточно программ, позволяющих вам сделать это без особых проблем. такие как Miro Video Converter и Audacity. Мы хотели бы, чтобы вы попробовать!

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

Мы хотели бы, чтобы вы:

1. Сохраняйте аудио- и видеофайлы в новом каталоге на вашем компьютере.
2. Создайте в том же каталоге новый файл HTML с именем index.html .
3. Добавить на страницу <аудио> и <видео> элементов; заставить их отображать элементы управления браузера по умолчанию.
4. Дайте им обоим элементы, чтобы браузеры находили аудиоформат, который они лучше всего поддерживают, и загружали его. Они должны включать атрибуты типа .
5. Присвойте элементу постер, который будет отображаться перед началом воспроизведения видео. Получайте удовольствие, создавая свой собственный графический плакат.

В качестве дополнительного бонуса вы можете попробовать изучить текстовые дорожки и выяснить, как добавить титры к вашему видео.

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

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