Заголовок

HTML Урок 8. Вставка видео на сайт

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

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

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

Атрибут	Значение	Описание
autoplay	autoplay	Указывает, что аудио должен начать играть, как только будет готов
controls	controls	Указывает, что элементы управления воспроизведением должны отображаться
loop	loop	Указывает, что аудио должно начаться снова, когда оно будет закончено
preload	auto metadata none	Определяет, должно ли аудио быть загруженным при загрузке страницы
src	url	Указывает адрес аудио для проигрывания

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

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

src="имя_файла.wav" height="150" width="180">

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

width="320" height="240" controls="controls" poster="logo.png"> src="movie.mp4" type="video/mp4"> 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	пиксели	Указывает ширину видео плеера

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

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

Фавикон Favicon

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

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

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

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

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

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

header элемент — здесь следует какая-то информация в заголовке сайта. Обычно это лого компании и иногда дополнительная навигация по сайту.

Главный заголовок страницы

Секция 1

Статья 1

Статья 2

Статья 3

Секция 2

Статья 4

Статья 5

Статья 6

Обычный div, блочный элемент

Задание: Оформите фрагменты готового реферата или курсовой работы в веб-странице, используя семантические теги. Главы работы — это теги section , подглавы — теги article . Не нужно вставлять большие фрагменты текста, это могут быть несколько абзацев на каждый подпункт главы. Все семантические теги должны быть использованы.

Источник

Освоение HTML5 тега audio

С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах. Но HTML5 в корне изменит способ воспроизведения звуков в Интернет. В этой статье я хочу подробно рассказать Вам о том, как использовать тег на ваших сайтах.

Используем для вставки звукового файлу на страницу

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

Воспроизведение звука в цикле

Хотите зациклить звук? Атрибут loop поможет Вам это сделать. Но опять же, не стоит злоупотреблять автозапуском и воспроизведением в цикле, если не хотите, чтобы пользователь преждевременно покинул сайт.

Отображение элементов управления

Вместо того, чтобы играть звуки автоматически, что, безусловно, плохая практика, вы должны позволить отображать в браузере некоторые элементы управления, такие как громкость и кнопки воспроизведение (пауза). Это сделать легко, просто добавив атрибут controls .

Различные форматы файлов

поддерживается большинством современных браузеров, но проблема в том, что разные браузеры поддерживают разные форматы файлов. Safari, например, может проигрывать MP3, а Firefox не может, и играет OGG-файлы вместо этого. Решение этой проблемы заключается в использовании обоих форматов, чтобы каждый посетитель мог услышать звук, независимо от того, какой браузер он использует.

Указываем MIME-тип файлов

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

Для старых браузеров

А что, если посетитель использует IE6 или какой-то другой доисторический браузер, который не поддерживает тег

? Все легко: ниже приведён код, который будет отображать сообщение для браузеров, которые не поддерживают тег .  

Буферизация файлов

• none — если вы не хотите использовать буфер файлов;
• auto — если вы хотите, чтобы браузер беферизировал файл целиком;
• metadata — для загрузки лишь служебной информации (продолжительность звучания и др.).

Управление воспроизведением через JavaScript

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

  
Воспроизведение Пауза Громкость + Громкость - 
 

Источник