Разное

Как вставить аудио в html: Атрибут controls | htmlbook.ru

10.12.2022

— HTML — Дока

  1. Кратко
  2. Пример
  3. Как понять
  4. Как пишется
  5. Атрибуты
  6. Подсказки
  7. Ещё пример

Кратко

Секция статьи «Кратко»

Встраивает аудиофайл на страницу 🎧

Пример

Секция статьи «Пример»

Попробуем добавить на нашу страницу приветствие Алисы и текст, который появится, если браузер не поддерживает встроенное аудио на странице:

<figure>  <figcaption>Привет, я Алиса</figcaption>  <audio controls src="hi-alice.mp3">    Ваш браузер не поддерживает встроенное аудио. Попробуйте скачать его    <a href="hi-alice.mp3" download>по ссылке</a>.  </audio></figure>
          <figure>
  <figcaption>Привет, я Алиса</figcaption>
  <audio controls src="hi-alice.mp3">
    Ваш браузер не поддерживает встроенное аудио. Попробуйте скачать его
    <a href="hi-alice.mp3" download>по ссылке</a>.
  </audio>
</figure>

Как понять

Секция статьи «Как понять»

Тег <audio> добавляет на страницу аудиоплеер, который может воспроизвести звуковой файл. Можно добавить несколько форматов одного файла, чтобы браузер воспроизвёл тот формат, который он поддерживает — для этого нужно добавить вложенные теги <source>.

Как пишется

Секция статьи «Как пишется»

Тег <audio> всегда закрывается парным тегом </audio>.

Внутри контейнера <audio> пишется текст, который появится, если браузер не поддерживает встроенное аудио.

Адрес звукового файла задаётся с помощью атрибута src или тега <source>, который помещается внутри <audio>. Тег <source> позволяет добавить несколько форматов одного и того же файла на случай, если какой-то из них не будет поддерживаться браузером:

<audio controls>  <source src="audio.mp3" type="audio/mpeg">  <source src="audio.ogg" type="audio/ogg">  <p>    Ваш браузер не поддерживает встроенное аудио. Попробуйте    <a href="audio.
mp3" download>скачать</a> файл. </p></audio> <audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> <p> Ваш браузер не поддерживает встроенное аудио. Попробуйте <a href="audio.mp3" download>скачать</a> файл. </p> </audio>

Атрибуты

Секция статьи «Атрибуты»

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

  • autoplay — аудио начнёт играть в момент загрузки страницы, не дожидаясь, когда файл скачается полностью. Но лучше так не делать, потому что никто не любит, когда что-то начинает играть без предупреждения, а браузеры типа Chrome вообще выключают такие звуки;
  • controls — добавляет стандартные элементы управления аудиоплеером: кнопку воспроизведения и паузы, полосу прокрутки, уровень громкости и другие элементы, в зависимости от браузера;
  • loop — зацикливает воспроизведение аудио, так что оно снова начинает играть каждый раз после завершения;
  • muted — звук будет на нуле, пока пользователь его не увеличит;
  • preload — подсказывает браузеру, нужно ли загружать аудио или информацию о нём сразу со страницей. Без этого атрибута предварительная загрузка файла будет зависеть от настроек конкретного браузера. У этого атрибута несколько значений:
    • none — аудиофайл не загружается предварительно;
    • metadata — загружается только информация о файле, например, размер и продолжительность. Рекомендуем использовать именно этот параметр, чтобы не загружать аудио, пока пользователь не захочет его прослушать;
    • auto — аудиофайл загружается со страницей, чтобы пользователь мог сразу начать его слушать. Если не указывать никакое значение preload, то атрибут будет работать как auto. Учти, что если стоит атрибут autoplay, то preload не работает.
  • src — URL-адрес аудиофайла. Его ещё можно задать через тег <source>.

Подсказки

Секция статьи «Подсказки»

💡 Если не указать атрибут controls, то браузер не будет показывать стандартные элементы управления аудиоплеером. Создать свои элементы управления можно с помощью JavaScript.

💡 Значение свойства display у тега <audio> по умолчанию inline, а значит внизу может появиться отступ, который зависит от высоты строки. Чтобы убрать этот отступ, напиши для плеера display: block.

💡 Используйте CSS-свойства, чтобы настроить общий внешний вид и расположение аудиоплеера. Например, border и border-radius, padding, margin и другие параметры. Отдельные элементы внутри плеера изменить не получится. К тому же, в разных браузерах они выглядят по-разному.

💡 С 2017 года практически все браузеры запретили автопроигрывание аудио.

Ещё пример

Секция статьи «Ещё пример»

Мы также добавили несколько форматов одного аудиофайла. Если браузер не поддерживает формат Opus, он попробует воспроизвести OGG. Если и с ним не получится, то воспроизведёт файл в MP3.

Атрибут type поможет браузеру быстрее определить формат файла:

<audio controls>  <source src="audio.opus" type="audio/ogg; codecs=opus">  <source src="audio.ogg" type="audio/ogg; codecs=vorbis">  <source src="audio.mp3" type="audio/mpeg">  Ваш браузер не поддерживает встроенные аудио. Попробуйте  <a href="audio.mp3" download>скачать</a> файл.</audio>
          <audio controls>
  <source src="audio.opus" type="audio/ogg; codecs=opus">
  <source src="audio.ogg" type="audio/ogg; codecs=vorbis">
  <source src="audio.mp3" type="audio/mpeg">
  Ваш браузер не поддерживает встроенные аудио. Попробуйте
  <a href="audio.mp3" download>скачать</a> файл.
</audio>
Открыть демо в новой вкладке

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

<dl>, <dd>, <dt>

alt +

<video>

alt +

Вставка аудио и видеоролика | bookhtml.

ru

Для вставки на Web-страницу аудиоролика язык HTML 5 предусматривает парный тег <AUDIO>. Интернет-адрес файла, в котором хранится этот

аудиоролик, указывают с помощью атрибута SRC этого тега:

<AUDIO SRC=»sound.wav»></AUDIO>

Встретив тег <AUDIO>, Web-обозреватель может сразу загрузить и воспроизвести аудиофайл, только загрузить его без воспроизведения или вообще ничего не делать. (В последнем случае мы можем запустить воспроизведение из Web-сценария; о Web-сценариях разговор пойдет в части III.) Также он может вывести на Web-страницу элементы управления, с помощью которых посетитель запускает воспроизведение аудиофайла, приостанавливает его, прокручивает вперед или назад и регулирует громкость. Все это настраивается с помощью различных атрибутов тега <AUDIO>, которые мы скоро рассмотрим.

Тег <AUDIO> создает блочный элемент Web-страницы. Так что мы не сможем вставить аудиоролик на Web-страницу в качестве части абзаца. Зато, чтобы поместить его в отдельный абзац, нам не придется совершать никаких дополнительных действий (в отличие от изображения).

По умолчанию Web-обозреватель не будет воспроизводить аудиоролик. Чтобы он это сделал, в теге <AUDIO> нужно указать особый атрибут AUTOPLAY. Это действительно особый атрибут: он не имеет значения — достаточно одного его присутствия в теге, чтобы он начал действовать (атрибут тега без значения):

<P>Сейчас вы услышите звук!</P>
<AUDIO SRC=»sound.ogg» AUTOPLAY></AUDIO>

По умолчанию аудиоролик никак не отображается на Web-странице (что, впрочем, понятно — аудио нужно не смотреть, а слушать). Но если в теге <AUDIO> поставить атрибут без значения CONTROLS, Web-обозреватель выведет в том месте Web-страницы, где проставлен тег <AUDIO>, элементы управления воспроизведением аудиоролика. Они включают кнопку запуска и приостановки воспроизведения, шкалу воспроизведения и регулятор громкости:

<P>Нажмите кнопку воспроизведения, чтобы услышать звук.</P>
<AUDIO SRC=»sound.ogg» CONTROLS></AUDIO>

Атрибут без значения AUTOBUFFER имеет смысл указывать в теге <AUDIO> только в том случае, если там отсутствует атрибут AUTOPLAY. Если он указан, Web-обозреватель сразу после загрузки Web-страницы начнет загружать файл аудиоролика — это позволит исключить задержку файла перед началом его воспроизведения.

Чтобы проверить полученные знания в действии, нам понадобится аудиоролик поддерживаемого Web-обозревателем формата. Автор нашел у себя небольшой аудиоролик формата WAV-PCM и дал ему имя sound.wav. Вы можете использовать любой другой аудиоролик, но, разумеется, в HTML-коде листинга 4.2 придется указать имя файла, в котором он хранится.

Откроем Web-страницу index.htm и впишем в раздел тегов тег <AUDIO>. Создадим описывающую этот тег Web-страницу, HTML-код которой приведен в листинге 4.2.

Сохраним Web-страницу в файле с именем t_audio.htm. Поместим выбранный аудиофайл (у автора — sound.wav) в папку, где находятся все файлы нашего Web-сайта (и t_audio.htm в том числе). И сразу же откроем только что созданную Web-страницу в Web-обозревателе (рис. 4.2).

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

Для вставки на Web-страницу видеоролика предназначен парный тег <VIDEO>. Интернетадрес видеофайла указывается с помощью знакомого нам атрибута SRC этого тега:

<VIDEO SRC=»film.ogg»></VIDEO>

Встретив этот тег, Web-обозреватель выведет в том месте Web-страницы, где он проставлен, панель просмотра содержимого

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

Как и тег <AUDIO>, тег <VIDEO> создает блочный элемент Web-страницы и поддерживает атрибуты AUTOPLAY, CONTROLS и AUTOBUFFER:

<VIDEO SRC=»film.ogg» AUTOPLAY CONTROLS></VIDEO>

Если воспроизведение видеоролика еще не запущено, в панели просмотра будет выведен первый его кадр или вообще ничего (конкретное поведение зависит от Web-обозревателя). Но мы можем указать графическое изображение, которое будет туда выведено в качестве заставки. Для этого служит

атрибут POSTER тега <VIDEO>; его значение указывает интернет-адрес нужного графического файла:

<VIDEO SRC=»film.ogg» CONTROLS POSTER=»filmposter. jpg»></VIDEO>

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

Ну что, попрактикуемся? Сначала найдем видеофайл подходящего формата. Автор отыскал небольшой видеоролик формата OGG и дал ему имя film.ogg. Вы можете выбрать любой другой видеоролик, но, разумеется, в приводимом далее HTML-коде придется указать имя его файла.

НА ЗАМЕТКУ

Если вы не найдете видеоролика подходящего формата, то можете сами создать его, перекодировав видеоролик, сохраненный в другом формате. Для этого подойдет утилита SUPER ©, которую можно найти по интернет-адресу http://www.erightsoft.com/ SUPER.html. Она поддерживает очень много мультимедийных форматов, в том числе и OGG.

Откроем Web-страницу index.htm и впишем в раздел тегов тег <VIDEO>. Создадим описывающую этот тег Web-страницу, HTML-код которой приведен в листинге 4. 3.

Сохраним Web-страницу в файле с именем t_video.htm. Поместим выбранный видеофайл (у автора — film.ogg) в папку, где находятся все файлы нашего Web-сайта (и t_video.htm в том числе). И откроем готовую Web-страницу t_video.htm в Web-обозревателе (рис. 4.3).

Ниже кода примера мы увидим результат его выполнения — панель просмотра и элементы для управления воспроизведением. Нажмем кнопку воспроизведения и посмотрим «кино». Отметим, что после начала воспроизведения элементы управления пропадут; чтобы получить к ним доступ, следует навести на панель просмотра курсор мыши. Как только воспроизведение видеоролика закончится, эти элементы управления снова появятся на экране.

Дополнительные возможности тегов <AUDIO> и <VIDEO>

Но постойте! Раньше мы узнали, что набор поддерживаемых мультимедийных форматов у разных Web-обозревателей различается. И может случиться так, что аудио- или видеоролик, который мы поместили на Web-страницу, окажется какому-то Web-обозревателю не «по зубам». Как быть?

Специально для таких случаев HTML 5 предусматривает возможность указать в одном теге <AUDIO> или <VIDEO> сразу несколько мультимедийных файлов. Web-обозреватель сам выберет из них тот, формат которого он поддерживает.

Если мы собираемся указать сразу несколько мультимедийных файлов в одном теге <AUDIO> или <VIDEO>, то должны сделать две вещи.

1. Убрать из тега <AUDIO> или <VIDEO> указание на мультимедийный файл, т. е. атрибут SRC и его значение.

2. Поместить внутри тега <AUDIO> или <VIDEO> набор тегов <SOURCE>, каждый из которых будет определять интернет-адрес одного мультимедийного файла.

Одинарный тег <SOURCE> указывает как интернет-адрес мультимедийного файла, так и его тип MIME. Для этого предназначены атрибуты SRC и TYPE данного тега соответственно:

<VIDEO>
<SOURCE SRC=»film.ogg» TYPE=»video/ogg»>
<SOURCE SRC=»film. mov» TYPE=»video/quicktime»>
</VIDEO>

Данный тег <VIDEO> определяет сразу два видеофайла, хранящих один и тот же фильм: один — формата OGG, другой — формата QuickTime. Web-обозреватель, поддерживающий формат OGG, загрузит и воспроизведет первый файл, а Web-обозреватель, поддерживающий QuickTime, — второй файл.

Отметим, что тип MIME видеофайла (и, соответственно, атрибут TYPE тега <SOURCE>) можно опустить. Но тогда Web-обозревателю придется загрузить начало файла, чтобы выяснить, поддерживает ли он формат этого файла. А это лишняя и совершенно ненужная нагрузка на сеть. Так что тип MIME лучше указывать всегда.

А если Web-обозреватель вообще не поддерживает теги <AUDIO> и <VIDEO>? В таком случае он их проигнорирует и ничего на Web-страницу не выведет. Однако мы можем указать текст замены, в котором описать возникшую проблему и предложить какой-либо путь ее решения (например, сменить Web-обозреватель). Такой текст замены ставят внутри тега <AUDIO> или <VIDEO> после всех тегов <SOURCE> (если они есть), например, как в листинге 4.4.

Отметим, что мы не указали в тексте замены теги, создающие абзац. Теги <AUDIO> и <VIDEO> сами по себе — блочные элементы, так что в этом нет нужды.

Вот и все об интернет-мультимедиа и средствах HTML 5 для его поддержки.

Плагины HTML

❮ Назад Далее ❯


Плагины — это компьютерные программы, расширяющие стандартный функционал браузера.


Плагины

Плагины предназначены для различных целей:

  • Для запуска апплетов Java
  • Для запуска элементов управления Microsoft ActiveX
  • Для показа флэш-роликов
  • Для отображения карт
  • Для проверки на вирусы
  • Для проверки идентификатора банка

Внимание!

Большинство браузеров больше не поддерживают Java-апплеты и подключаемые модули.

Элементы управления ActiveX больше не поддерживаются ни в одном браузере.

В современных браузерах также отключена поддержка Shockwave Flash.


Элемент

Элемент поддерживается всеми браузерами.

Элемент определяет встроенный объект в документе HTML.

Он был разработан для встраивания подключаемых модулей (таких как Java-апплеты, программы для чтения PDF-файлов и Flash-плееры) в веб-страницы, но также может использоваться для включения HTML в HTML:

Пример

Попробуйте сами »

Или изображения, если хотите:

Пример

< object data="audi.jpeg">

Попробуйте сами »



Элемент

Элемент 9Элемент 0041 поддерживается во всех основных браузерах.

Элемент также определяет встроенный объект в документе HTML.

Веб-браузеры поддерживают элемент для много времени. Однако он не был частью HTML. спецификация до HTML5.

Пример

Попробуйте сами »

Обратите внимание, что элемент не имеет закрывающего тега. Оно не может содержать альтернативный текст.

Элемент также можно использовать для включения HTML в HTML:

Пример

Попробуйте сами »

❮ Предыдущая Следующий ❯


ВЫБОР ЦВЕТА



Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3. CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Аудио и видео в HTML5

❮ Пред. Следующий ❯

Раньше собственные веб-технологии, такие как HTML, не позволяли встраивать видео и аудио в Интернет. Технологии на основе плагинов стали популярными для обработки такого контента, но у них было много проблем, в том числе плохая работа с функциями HTML/CSS, проблемы с безопасностью и доступностью. Позже спецификация HTML5 представила такие возможности с элементами

Элемент

Как добавить аудио на веб-страницу

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

В коде атрибут src ссылается на URL-адрес аудиофайла, а атрибут control добавляет панель управления (кнопка запуска, полоса прокрутки, регулятор громкости).

  

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

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

Пример добавления различных форматов аудиофайлов:

 

 <голова>
   Название документа
 
 <тело>
   <управление звуком>
     
     
   
   

Нажмите кнопку воспроизведения

Попробуй сам "

Самые популярные аудио форматы:

MP3 – самый популярный аудио формат, который использует сжатие с потерями и позволяет уменьшить размер файла. Несмотря на популярность среди пользователей, телекомпании и радиостанции используют более современные кодеки ISO-MPEG, вроде AAC или MPEG-H.

AAC (Advanced Audio Codec) — закрытый кодек, аналог MP3, но по сравнению с последним обеспечивает более высокое качество при той же или большей степени сжатия.

Ogg Vorbis — свободный формат с открытым кодом, поддерживается в Firefox, Opera и Chrome. Обеспечивает хорошее качество звука, но недостаточно поддерживается проигрывателями устройств.

В предыдущей версии HTML видео были встроены в сайт с помощью сторонних плагинов, таких как QuickTime, RealPlayer или Flash. В HTML5 появился новый тег

В коде это выглядит так:

  

Атрибут src указывает URL-адрес файла, а атрибут control используется для отображения элементов управления.

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

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

Пример добавления различных форматов видеофайлов:

 

  <голова>
    Название документа
    <стиль>
      видео {
        ширина: 300 пикселей;
        высота: 220 пикселей;
        граница: 1px сплошная #666;
      }
    
  
  <тело>
    <управление видео>
      
      
    
    

Некоторая информация о видео

Попробуй сам "

На сегодняшний день существует 3 основных видеоформата: MP4/MPEG-4, OGG и WebM+. Для сжатия видеоданных и их воспроизведения мы используем кодеки.

Для видеофайла формата MPEG-4 используется видеокодек Н.264 и аудиокодек ААС. Если вы хотите использовать кодеки, вы должны получить лицензию.

Для видеофайла Ogg используйте видеокодек Theora и аудиокодек Vorbis с открытым кодом.

Для видеофайлов WebM + , используйте видеокодек VP8 и аудиокодек Vorbis. В этом случае лицензия не требуется.

Большинство серверов не обслуживают носители Ogg или mp4 с правильными типами MIME. Для этого может потребоваться добавить соответствующую конфигурацию.

 AddType аудио/ogg .oga
AddType аудио/wav .wav
Видео AddType/ogg .ogv .ogg
AddType video/mp4 .mp4 

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

Пример добавления субтитров и заголовков к аудио- и видеофайлам:

 

  <голова>
    Название документа
    <стиль>
      видео {
        ширина: 300 пикселей;
        высота: 200 пикселей;
        граница: 1px сплошная #666;
      }
    
  
  <тело>
    <управление видео отключено src="/build/videos/arcnet.															

							
							
						
			
	
			

Добавить комментарий

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