Вы находитесь на странице: 1из 3

Лабораторное занятие №18

Размещение видео на сайте


Раздел 1. Установка и настройка аппаратных и программных средств доступа в сеть
Интернет
Тема 1.7 Принципы функционирования, организация и структура веб-сайтов

Цель работы: научить студентов размещать видео на сайте

1. Теоретические сведения:

Для того, чтобы вставить видео на сайт, используется тег video.


<video src="path/to/video/file.mp4"></video>
У данного тега есть атрибут src, в который мы должны прописать путь до нашего
видеоролика.
Если вы сейчас откроете страницу в браузере, то увидите картинку(постер), однако,
больше ничего не будет. Вы никак не сможете взаимодействовать с видео.(Google
Chrome).
Чтобы мы смогли увидеть элементы управления, такие, как шкала времени,
воспроизведение/пауза, управление громкостью и полноэкранный режим, существует
атрибут controls.
<video src="video.mp4" controls></video>
Если вам нужно, чтобы видео воспроизводилось сразу при загрузке страницы,
используйте атрибут autoplay.
<video src="video.mp4" controls autoplay></video>
Атрибут loop используется для того, чтобы зациклить видео, т.е. для того, чтобы видео
сразу же запускалось снова после того, как оно закончилось.
<video src="video.mp4" controls autoplay loop></video>
Есть еще такой интересный атрибут как preload. Как понятно из названия, он отвечает за
предзагрузку видео. У него 3 значения:
 none - означает, что никакой предзагрузки не будет. Не будет вообще никакой
информации, даже такой, как длительность, уровень громкости и т.д.
 metadata - это значение, наоборот, покажет нам ту информацию, которую не
покажет значение none
 auto - подгружает видео сразу после загрузки страницы, чтобы человек мог его
сразу запустить и не ждать, пока оно загрузится. Что-то вроде полоски
на YouTube, но тут она не отображается
Понятно, что если у вас стоят сразу 2 атрибута - preload и autoplay, то весь смысл
атрибутаpreload пропадает.
<video src="video.mp4" controls preload="auto"></video>
Конечно же, у данного тега есть такие атрибуты как width и height, которые отвечают за
ширину и высоту видео.
<video src="video.mp4" controls autoplay widht="500" height="500"></video>
При помощи атрибута poster вы можете выставить свою картинку, которая будет
показываться до того, как вы воспроизведете видео.
<video src="video.mp4" controls poster="poster.png"></video>
Для того, чтобы выключить звук у видео, существует атрибут muted.
<video src="video.mp4" controls autoplay muted></video>
Также, в html5 video есть возможность указать промежуток времени, с которого
начнется просмотр и когда он закончится. Для этого достаточно указать #t= после имени
видеофайла и указать время начала и конца через запятую.
<video src="video.mp4#t=3,5" controls></video>
В примере выше мы указали, что видео должно начаться с 3 секунды и закончиться на 5.
Если вы хотите указать только время, с которого должен начаться просмотр, то можно
указать только одно значение
<video src="video.mp4#t=3" controls autoplay></video>
В примере выше видео будет начинаться с 3 секунды и идти до конца.
Если же вы, наоборот, хотите указать, чтобы видео начиналось с самого начала и шло до
какого-то определенного значения, то просто оставьте первый параметр пустым,
поставьте запятую и укажите второй параметр - время конца видео.
<video src="video.mp4#t=,5" controls></video>
В примере выше видео начнется с самого начала и будет идти до 5-ой секунды.
Возможность встраивать видео в html появилась недавно и понятно, что старые
браузеры не поддерживают данной возможности. Чтобы это исправить, мы можем
написать им какой-то текст между тегами <video></video>
<video src="video.mp4" controls>
  К сожалению, ваш браузер не поддерживает HTML5 Video.
</video>
Или вы можете встроить сюда какой-то другой плеер, например, на flash или javascript,
и тогда видео смогут просмотреть даже пользователи старых браузеров.
Каждый современный браузер поддерживает свой формат видео, а старые браузеры
имеют поддержку еще хуже. Чтобы поддерживать несколько форматов видео, существует
тег source.
<video controls autoplay>
  <source src="video.mp4"></source>
  <source src="video.ogv"></source>
</video>
При парсинге страницы браузер выберет тот формат, который он поддерживает, и
подключит его. Файл подключается только один.
У тега source есть атрибут type, в котором мы указываем MIME тип и кодеки.
<video controls autoplay>
  <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
  <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'></source>
</video>
Указывать тип файла не обязательно, но желательно. Все дело в том, что чтобы
определить, что это за файл, браузеру придется скачать его начало. Чтобы не напрягать
лишний раз сеть, лучше всегда указывать атрибут type.

2. Порядок выполнения практической работы


1. Повторение теоретического материала.
2. Получение задания у преподавателя.
3. Выполнение задания по плану.
4. Оформление отчета о работе (вывод)
5. Подготовить ответы на контрольные вопросы.
6. Защита практической работы.

3. Алгоритм выполнения задания


1. Осмыслить полученное задание;
2. Выполнить задание
3. Сделать вывод, подготовиться к защите практической части.

4. Задание
1. Изучить теоретический материал
2. Выполнить вариант задания
3. Записать данные выполнения в отчет
Задание на практическую работу:
Создайте папку и переименуйте её своей фамилией.
В папке создайте 2 документа в программе Блокнот, на основе которого можно сделать
Веб-страницу. (сделайте заголовок, тело).
В свою папку скопируйте две картинки (большую для фона и маленькую) и одну
анимацию, переименуйте их соответственно paint1.gif, paint2.gif, anim.gif. (расширения
должны быть соответствующими вашим изображениям).
На основе первого документа сделайте страницу, содержащую все скопированные
вами изображения. Код для разметки Веб-страницы будет следующим:
<html>
<head>
<title> ИЗОБРАЖЕНИЕ1 </title>
</head >
<body background=paint1.jpg>
<img scr=paint2.gif>
<img scr=anim.gif>
</body>
</html>
Сохраните этот документ под именем document1.
Второй документ должен содержать ссылку на этот документ, при нажатии на
которую появится список. Код тела этой веб-страницы должен иметь вид:
<body>
<A HREF=” document1.htm> </A>
</body>
Самостоятельно постройте две Веб-страницы. Первая должна содержать 5-6
предложений, касающихся темы изображений, 3 картинки, 2 анимации и небольшой
пояснительный текст. Вторая – гиперссылку на первый документ.
После оформления страницы сайта изображениями, самостоятельно разместите видео
файл.

5. Вопросы:
1. Опишите правила размещения видео на странице сайта?
2. Как правильно записать название видеофайла для размещения его на странице?

6. Сделать вывод по практической работе.


Итак, вы сделали видеоролик, например, видеопоздравление, теперь
необходимо разместить его в Интернете и отправить ссылку на просмотр вашим друзьям.
В Интернете много сервисов, представляющих услуги размещения и хранения видео, на
которые вы можете бесплатно загрузить свои видеоролики.  Сайты для размещения видео.
Наиболее известный проект по обмену видеофайлами - YouTube (youtube.com), который
предоставляет возможность бесплатного размещения видео в сети с 2005 года.  В 2006
году компания Google приобрела сервис YouTube и с тех пор значительно его улучшила.
Сервис отличается быстротой и стабильностью, удобе, функционален и очень популярен.
Для загрузки вашего видео нужно зарегистрироваться, но если у вас есть учетная запись в
Google, то можно связать ее с учетной записью на YouTube и использовать для входа на
сервис. На YouTube можно загружать видео объемом до 2 Гб (сейчас - до 10 Гб), до десяти
роликов одновременно.  Пока идет загрузка (иногда довольно длительное время), вы
можете ввести название видео, добавить описание, ключевые слова, выбрать категорию, в
которую он будет помещен, определить, будет ли видео доступно для общего или
частного просмотра. Кроме того можно добавить субтитры и интерактивные
комментарии.