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

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

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

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

  • mp3
  • wav
  • ogg

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

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

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

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

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

  1. <a href="имя_файла.mp3">Щелкни </a>
  2. <bgsound src="04.wav" loop="5">

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

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

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

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

  • MP4
  • WebM
  • Ogg

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

<video width="320" height="240" controls="controls" poster="logo.png">
	<source src="movie.mp4" type="video/mp4">
	<source src="movie.ogg" type="video/ogg">
Ваш браузер не поддерживает video.
</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">
Другой вариант вставки видео (без плеера):
<a href="имя_файла.avi">Щелкни и смотри</a>
<!-- Пример: -->
<a href="ocean.qt"> Видеоклип 1 Мб</a>

* для форматов 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>
Поделитесь уроком с коллегами и друзьями:

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

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

*
*


Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить