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

Дата публикации: 23 ноября 2018

Цель урока: Как вставить видео и аудио в 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>

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

  • Семантические теги обычно несут смысловую нагрузку и не имеют никакого внешнего оформления в html. Но их можно и нужно оформлять стилями CSS. Такие теги важны для удобства читаемости кода и влияют на выдачу поисковиков.
  • Рассмотрим примеры семантических тегов и их использования:
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Заголовок</title>
</head>
<body>
  <header>
     header элемент - здесь следует какая-то информация в заголовке сайта. Обычно это лого компании и иногда дополнительная навигация по сайту.
    <nav>nav (сокращенное от navigation) элемент - обычно представляет горизонтальное меню для навигации по отдельным частям сайта.</nav>
  </header>
  <h1>Главный заголовок страницы</h1>
  <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>

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

Поделитесь уроком с коллегами и друзьями:[SvenSoftSocialShareButtons]

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

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

*
*


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