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

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

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

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

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

Тег <AUDIO> создает блочный элемент Web-страницы.

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

<P>Сейчас вы услышите звук!</P>
<AUDIO SRC=»sound.ogg» AUTOPLAY></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-обозревателя). Но мы можем указать графическое изображение, которое будет туда выведено в качестве заставки. Для этого служит

<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.

Сохраним 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»>

Данный тег <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, опции плеера

Цель урока: Как вставить видео и аудио в html, форматы файлов

Содержание:

• Вставка аудио
• Вставка видео
• Фавикон Favicon
• HTML 5: семантические теги

Вставка аудио

Форматы аудио-файлов:

• mp3
• wav
• ogg

Для вставки аудио-плеера используется следующий код:

<audio controls="controls">
	<source src="song.ogg" type="audio/ogg">
	<source src="song.mp3" type="audio/mpeg">
</audio>

В браузере Google Chrome плеер будет выглядеть:

Другие возможности вставки аудио на сайт

1. <а href="имя_файла. mp3">Щелкни </а>

2. <bgsound src="04.wav" loop="5">

   *только для форматов: wav, mp3, aiff, wma

3. <embed src="имя_файла.wav">

Вставка видео

Формат видео-файлов:

• MP4
• WebM
• Ogg

<video controls="controls" poster="logo.png">
	<source src="movie.mp4" type="video/mp4">
	<source src="movie.ogg" type="video/ogg">
Ваш браузер не поддерживает video.
</video>

Результат в браузере:

Атрибут	Значение	Описание
audio	muted	Определяет по умолчанию состояние звука. В настоящий момент только «muted» разрешено
autoplay	autoplay	Если указан, видео начнет играть сразу как только оно будет готово
controls	controls	Если указан, кнопки управления будут показаны, такие как кнопка воспроизведения
height	пиксели	Указывает высоту видео плеера
loop	loop	Если указан, видео начнет проигрываться снова, как только закончится
poster	url	Указывает URL изображения, представляющего видео
preload	auto metadata none	Если указан, видео будет загружено при загрузке страницы, и готово к запуску. Игнорируется, если «autoplay» указан
src	url	Адрес URL видео для проигрывания
width	пиксели	Указывает ширину видео плеера

Пример:

<video src="04.avi" loop="loop" audio="muted">

Другой вариант вставки видео (без плеера):

<а href="имя_файла.avi">Щелкни и смотри</а>
<!-- Пример: -->
<а href="ocean.qt"> Видеоклип 1 Мб</а>

* для форматов mpeg, avi

Фавикон Favicon

Фавиконка отображается в адресной строке браузера перед URL страницы, также Фавикон можно заметить во вкладке браузера страницы. Поисковые системы передают Favicon вместе с результатами поиска.

• файлы с расширением .ico
• размер 16×16 пикселей

Сервис для преобразования в ico-формат: http://image.online-convert.com/

<html>
<head>
<link rel="icon" href="favicon. ico" type="image/x-icon">
</head>

HTML 5: семантические теги

• Семантические теги обычно несут смысловую нагрузку и не имеют никакого внешнего оформления в html. Но их можно и нужно оформлять стилями CSS. Такие теги важны для удобства читаемости кода и влияют на выдачу поисковиков.
• Рассмотрим примеры семантических тегов и их использования:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Заголовок</title>
</head>
<body>
  <header>
     header элемент - здесь следует какая-то информация в заголовке сайта. Обычно это лого компании и иногда дополнительная навигация по сайту.
    <nav>nav (сокращенное от navigation) элемент - обычно представляет горизонтальное меню для навигации по отдельным частям сайта.</nav>
  </header>
  <h2>Главный заголовок страницы</h2>
  <section>
    Секция 1
    <article>Статья 1</article>
    <article>Статья 2</article>
    <article>Статья 3</article>
  </section>
  <section>
    Секция 2
    <article>Статья 4</article>
    <article>Статья 5</article>
    <article>Статья 6</article>
    <div>Обычный div, блочный элемент</div>
  </section>
  <aside>
    ASIDE - какая-то информация, имеющая отношение к теме страницы. 
  </aside>
 
  <footer>
    labs-org.ru, Copyright 2020
  </footer>
</body>
</html>

HTML Audio (с примерами)

В этом уроке мы узнаем о теге аудио в HTML с помощью примеров.

Тег HTML используется для встраивания медиаплеера, поддерживающего воспроизведение звука, в HTML-страницу. Мы используем тег HTML вместе с тегом , чтобы добавить аудиоплеер. Например,

 <управление звуком>
  
 

Вывод браузера

В приведенном выше коде:

• audio. mp3 — путь к аудио, которое мы хотим отобразить
• audio/mp3 — тип ресурса, который мы хотим отобразить.

Файл audio.mp3 в приведенном выше примере находится в том же каталоге, что и файл HTML.

HTML

с несколькими тегами

У нас может быть более одного видео внутри тега . Например,

 <управление звуком>
  
  
 

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

---

Атрибуты тега HTML