Как добавить видео на сайт html, если вы полный чайник

Приветствую всех постоянных читателей моего блога, а также тех, кто случайно забрел на просторы сего веб-сайта. Думаю, вы уже в большей или меньшей степени умеете верстать как минимум не сложные сайты и заполнять их текстовым и графическим контентом. Но что делать, если такой информации недостаточно и, например, основное направление вашего сайта – это видеоуроки?

Тогда ничего не поделаешь, придется осваивать «дзен» работы с видеофайлами при помощи современных механизмов веб-языков. Именно поэтому тема данной публикации: «Как добавить видео на сайт html».

В статье я познакомлю вас с основными форматами видеоинформации, расскажу об элементах управления таким видом контента, дам описание трем способам вставки видео на страницу, а также по традиции приведу примеры кода программ. Перейдем к делу!

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

Само по себе видео представляется множеством отдельных изображений. Нам привычнее всего их называть кадрами. Однако если хранить каждый кадр, например, фильма, то общий размер документа будет огромен. Именно поэтому все видеофайлы сжимаются и предоставляются нам в разных форматах.

Наиболее распространенные форматы вам, вероятнее всего, известны. Это avi, asf, mov, mp4 (MPEG4), ogg и другие.

Начнем с AVI (Audio-Video Interleaved). Этот формат был разработан корпорацией Microsoft и представляет собой контейнер, в который можно вложить видео, сжатое любым стандартом. Храниться может как один поток (например, только аудио или только видео), так и несколько.

Правда существует ограничение: звуковых дорожек может быть много, а вот видеодорожка только одна. Думаю, с разбором avi проблем не возникнет, так как у каждого на компьютере есть фильм или клип с расширением .avi.

ASF разработан все той же корпорацией Microsoft и работает с потоковыми документами типа видео и аудио. Преимущество ASF состоит в том, что он не требует от вас установки определенных кодеков. Таким образом, он указывает структуру потока переносимых данных, но не ограничивает в выборе метода кодирования видеоинформации. Может иметь расширения: .asf, .wma и .wmv.

Контейнер MOV был разработан второй большой мировой корпорацией Apple специально для их приложения QuickTime. Хоть формат и рассчитан на операционную систему Mac OS X, он отлично воспроизводится и в Windows.

Контейнер чрезвычайно удобен для редактирования лежащих в нем файлов, а также может в себе хранить не только несколько дорожек аудио- и видеоинформации, а еще и субтитры, панорамы и анимации. Среди расширений можно встретить .QT или .MOV.

Mp4 – очень известный формат хранения видеофайлов. На самом деле это сокращение от названия стандарта сжатия – MPEG4. Это фильм или клип, который по своим возможностям не уступает предыдущему формату MOV.

Используется для передачи документов в социальных сетях, электронной почте и других сервисах интернета. Своих маленьких размеров файлы с таким расширением достигают за счет продуманного алгоритма сжатия, а также использование сжимающих стандартов отдельно для аудио- и видеодорожек.

И наконец ogg. Данный формат является универсальным, бесплатным и доступным для всех желающих. Этот мультимедийный контейнер был разработан некоммерческой компанией Xiph.Org Foundation. Формат функционирует с различными кодеками и может хранить в себе любые виды мультимедиа. Расширение таких файлов выглядит .ogg.

Учимся добавлять на веб-ресурс видео

Когда возникает желание предоставить возможность пользователям сайта смотреть видеоуроки или клипы с ютуба, то сразу же перед разработчиком возникает вопрос: «А каким именно образом мне стоит загрузить видеоконтент?»

На сегодняшний день существует множество разных лазеек, вариантов и даже костылей. Я хочу рассказать о трех самых простых и удобных вариантах вставки видео.

Если вы хотите усвоить данный материал, то советую вам не лениться, а собрать всю свою волю в кулак и проработать примеры самостоятельно. Хочу напомнить, если у вас нет профессиональной среды разработки или хотя бы Notepad ++, то вооружитесь программой «Блокнот».

Итак, я научу вас вставлять видеодокументы тремя способами:

• используя ссылку с YouTube;
• загружая клипы с локального компьютера;
• пользуясь стандартными механизмами html5.

Но для начала нужно подготовить каркас будущей страницы. Для этого через блокнот создаем документ с расширением .html (как правильно создавать веб-страницы через «Блокнот» я писал в первых уроках) и вставляем туда ниже представленный код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Вставка видео из разных источников</title>
    <style>
		body {
		background:#FFFAF0; 
		color:#A52A2A;
		width:100%;
		margin:0;
		text-align:center;
		}
		h1{ 
		font-style: oblique;
		text-decoration: underline;
		}
	</style>
	<link rel="stylesheet" href="style.css">
  </head>
  <body>
	<h1>Способ 1: добавление видео с веб-сервиса YouTube</h1>
	<h1>Способ 2: добавление видео с помощью плеера</h1>
	<h1>Способ 3: добавление видео при помощи тегов html5</h1>
  </body>
</html>

Сохраните заготовку программы. При запуске файла в окне браузера откроется веб-страница с тремя стилизованными заголовками.

О YouTube, поделись ссылочкой

Через сервис YouTube при помощи ссылки можно загрузить как уже имеющиеся видео, так и свое собственное. Если же вы добавляете на свой веб-сайт персональное видео и хотите, чтоб оно передавалось через ссылку с ютуба, то для начала по инструкции загрузите видео ресурс на сервис.

Далее действия одинаковые:

1. Переходите на вкладку с выбранным клипом или фильмом;
2. Под ним нажимаете кнопку «Поделиться»;
3. Выбираете способ «HTML-код»;
4. Копируем сгенерированный текст.

Разработчики сервиса предоставляют вам код html с уже встроенной ссылкой и тегом iframe.

<iframe> — это контейнер, создающий плавающий фрейм с находящейся в нем информацией, которую можно загружать.

Стоит отметить важный момент. Новые браузеры работают с html5 и поэтому игнорируют данный элемент. Это также было одной из причин, почему я решил рассказать о нескольких способах вставки видеодорожек.

Вернемся к нашей программе. Скопированный текст вставляем разу после первого заголовка. Эту часть кода я прикрепил ниже:

<h1>Способ 1: добавление видео с веб-сервиса YouTube</h1>

<iframe width="560" height="315" src="https://www.youtube.com/embed/7D5bPLxU8U8?list=PL8w5HIWLMRa3s3bBMVDvBozFif7HsRj05" frameborder="0" allowfullscreen></iframe>

Теперь если вы обновите вкладку с примером (можно при помощи клавиши F5), то увидите под первым заголовком вставленное видео.

Загрузка клипов с локального компьютера

Для того чтобы загрузить видео с вашего компьютера, для удобства нужно разместить его возле создаваемой html-страницы. Далее использовать один из плееров. Для примера я использовал специализированный плеер под названием Flowplayer. Он выложен в интернет в свободном доступе и скачать его не проблема.

Впервые за все наши написанные примеры мы затронем код языка javascript. Так как данный инструмент значительно расширяет возможности веб-языков и делает сайтостроение более гибким, он идеально подходит для данного случая.

Для начала откройте документ с кодом примера и сразу после закрывающегося тега </style> вставьте строку, подключающую плеер к нашей странице. Текст примера скопируйте ниже:

</style>

<script type="text/javascript" src="flowplay/flowplayer-3.2.2.min.js"></script>

</head>

Далее после второго заголовка необходимо вставить текст, состоящий из html и js языков:

1
2
3
4
5
6
7
8
9
10
11
12

<h1>Способ 2: добавление видео с помощью плеера</h1>
<div align="center">
 
<script type="text/javascript">
  flowplayer("player",  "http://путь, по которому вы сохранили файл/flowplay/flowplayer-3.2.2.swf",
  {
    clip: {
        autoPlay: false, 
    }
});
</script>
</div>

Вам нужно изменить 2 строки данного кода. В a href= «1.mp4» укажите название своего видеодокумента. Если он лежит не рядом с создаваемой страницей, то до названия через слеш нужно добавить имя каталога. Например, my/1.mov. И вторая строка в скриптовом коде. Пропишите свой путь к файлу.

Воспользуемся современными методами

Новая платформа html5 предоставляет современные теги для вставки и отображения видео. Мы воспользуемся тегом <video> и его атрибутом controls, который к загруженному файлу добавляет панель управления. После третьего заголовка вставьте код:

<video src="1.mp4" controls></video>

Если видеодорожка не отобразилась, то либо вы пользуетесь старой версией браузера (нужно использовать <iframe>), либо неверно указали путь к документу (src="1.mp4").

Элемент <embed>

Помимо привычных инструментов для вставки мультимедиа существует и такой тег, как <embed>. Он помогает браузерам отобразить те файлы мультимедиа, которые изначально первый не понимает. Для таких видео- или аудиофайлов приходится использовать специальные дополнения или плагины. Пример кода с данным элементом выглядит вот так:

<embed src="papka/cat.swf" width="580" height="295" type="тип объекта" pluginspage="анкор для скачки плагина или дополнения">

На этом, пожалуй, все. Желаю удачи со вставкой видеофайлов на ваши веб-ресурсы. А тем временем подписывайтесь на мой блог и не забывайте делиться ссылкой с друзьями.

Пока-пока!

С уважением, Роман Чуешов