Как вставить видео в html с компьютера

Как вставить видео в HTML

4.4 Оценок: 13 (Ваша: )

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

Как загрузить видео со сторонних ресурсов

Итак, вам понравилось видео, и вы решили, что оно идеально будет смотреться в вашем блоге. Но неопытному в веб-мастеринге пользователю будет сложно самому разобраться, как вставить видео на сайт. На самом деле всё просто: любой известный хостинг предполагает возможность переноса ролика на другие ресурсы. Потребуется только найти код и вставить его при вёрстке.

Большая часть роликов на хостингах находится в открытом доступе, вы можете свободно ими делиться. При этом важно не нарушать законов об авторском праве. Чтобы избежать неприятных ситуаций, спрашивайте разрешение у владельца перед публикацией или возьмите за привычку делать подписи к роликам, указывая авторство.

Добавляя видео, вы сделаете свой сайт более интересным для посетителей

Ниже вы найдёте краткие памятки, как «вытащить» ссылку на размещение видео с трёх самых популярных площадок – YouTube, Одноклассники и ВКонтакте.

YouTube – всемирное хранилище видеороликов самых разных тем и жанров. Трейлеры к кинофильмам, музыкальные клипы, обзоры, уроки, летсплеи – на хостинге найдётся что угодно. Чтобы разместить видео с Ютуба на сайте, достаточно выполнить пару элементарных действий:

— найдите под плеером кнопку «Поделиться» и нажмите её;

— в появившемся окне выберите вариант «Встроить»;

— появится специальный код, который позволит вставить видео в HTML. Скопируйте его и вставьте при вёрстке нужной страницы.

Ширина и высота контейнера (атрибуты width и height) выставлены по умолчанию. Вы можете подогнать их под дизайн своего сайта. Для этого нужно ввести новые значения в код после вставки. Не забудьте прописать теги для облегчения поиска вашего видео!

Для известной российской соцсети действует тот же принцип. Чтобы получить код в стандартном плеере на Одноклассниках, необходимо:

— кликнуть по кнопке «Ссылка» в правом верхнем углу;

— в появившемся окошке перейти во вкладку «HTML-ссылка»;

— отрегулировать размер контейнера (сайт предложит несколько вариантов готовых пропорций, вы можете ввести значения вручную);

— включить/отключить опцию автопроигрывания ролика на сайте;

— скопировать окончательную ссылку и вставить в код страницы.

• ВКонтакте

Понравился ролик во ВКонтакте? Эта соцсеть также позволяет разместить видео на сайте, html код будет сгенерирован в два счёта:

— найдите команду «Поделиться» и кликните по ней;

— в открывшемся окне перейдите во вкладку «Экспортировать»;

— установите размер контейнера с видео;

— скопируйте код и вставьте в вёрстку.

Несмотря на простоту, у этого способа есть существенный минус. Как только автор удалит исходный ролик из своего аккаунта, видео, которое вы разместили на вашей странице, перестанет отображаться. Решить проблему можно, залив файл с ПК.

Как добавить видео на сайт со своего ПК

Чтобы быстро разместить видео на сайте без Ютуба и других хостингов, воспользуйтесь программой ВидеоМАСТЕР. Софт позволит справиться с задачей, выполнив три простых действия. Скачайте видео конвертер и следуйте инструкции.

Шаг №1. Добавьте файл в программу

Нажмите кнопку «Добавить», и программа предложит несколько способов импортировать материал. Можете загрузить файл с ПК, записать видео на веб-камеру, скачать видеоролик с YouTube или из VK, использовать видеодорожку с DVD-диска. Важно, что софт позволяет не ограничиваться одним роликом – добавляйте в список конвертирования столько дорожек, сколько хотите разместить на сайте.

Добавьте видео в список конвертирования

Шаг №2. Настройте параметры видео

Кликните по кнопке «Разместить на сайте». В появившемся окне выберите подходящий вам скин для плеера. Если вы хотите сделать контейнер с видео меньше/больше стандартного 640х390, отдайте предпочтение интерфейсу с пометкой «Поддерживает изменение размера».

Выберите плеер для сайта

Определите формат, размер кадра, битрейт, пропорции плеера. Назначьте папку для сохранения материалов. ВидеоМАСТЕР отправит туда финальный ролик (или несколько) вместе с необходимыми материалами.

Настройте параметры видео

Шаг №3. Разместите видео на странице

Нажмите «Далее» и дождитесь, пока программа завершит подготовку видео. Если вы работали с одним файлом, ВидеоМАСТЕР моментально сгенерирует код, который нужно скопировать и вставить в вёрстку web-страницы.

Дождитесь, пока программа сгенерирует html-код

Если роликов несколько, перейдите в папку, которую указывали ранее. Для каждого видео материалы будут собраны отдельно. В подпапках вы найдёте видеодорожку, файл txt, файл с плеером, html-страницу «Код для вставки видео». Всё это необходимо загрузить на сервер. После – открыть код, скопировать и вставить в нужное место в вёрстке уже вашей web-страницы.

Скопируйте код и вставьте в вёрстку вашей страницы

Заключение

ВидеоМАСТЕР позволит быстро разместить видео на личном сайте, при этом любой загруженный файл уже не пропадёт с вашей страницы. Помимо того, как добавить видео на сайт, софт может предложить широкий набор функций для удобной работы с видеороликами. Например, смену формата (на AVI, MP4 или любой другой). А также обрезка лишних элементов, добавление эффектов, надписей. Скачайте ВидеоМАСТЕР и создавайте для своего сайта качественный и интересный контент!

Популярные статьи

Лучшие видеохостинги

Как загрузить видео на Youtube

Что тако видеокодеки и аудиокодеки

Как отправить большое видео по почте

Лучшие бесплатные конвертеры видео на Windows

Конвертируйте видео в любой формат – быстро и удобно! ВидеоМАСТЕР уже более 5 лет помогает всем любителям видео

В идео и аудио в HTML. Урок 9

Урок наглядно покажет: как вставить видео на веб-страницу любой версии HTML. Рассмотрим, для каждого способа вставки видео на сайт, имеющиеся у него плюсы и минусы.

Вначале о том, как вставить видео на страницу с любой версией HTML (HTML5, XHTML). Этот пример универсален и работает на 99.9%: пользователь сможет посмотреть видео в любом более-менее не старом браузере, каким-бы устройством он не пользовался.

Для этого потребуется плеер, например: FlowPlayer, который без труда можно найти в сети. Этот плеер проигрывает видео в формате MP4 и FLV.

Код для вставки видео на страницу выглядит следующим образом (где «papka/name.…» — это путь к вашему видеофайлу, а «name» — его имя):

Поместите FlowPlayer в ту же папку, где находятся видеофайлы. Атрибуты тега Видео в данном примере: preload=»auto» — загружает видео вместе со страницей, если не использовать этот атрибут, то страница загрузится быстрее, а видео подгрузится при его включении пользователем; controls — показывает панель управления видео.

Замените пропорционально ширину и высоту видео ( width и height — в двух местах) на свои, не забывая про соотношение его сторон: 4:3 или 16:9.

Вы сразу же сможете проверить работоспособность кода на вашем компьютере. Но для просмотра видео на сайте может потребоваться создать файл httpd.conf, поместить его в папку с видеофайлами — он должен содержать три строчки:

AddType video/ogg.ogv AddType video/mp4.mp4 AddType video/webm.webm

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

В ставка видео в HTML5 без плеера

А так можно вставить видео на страницу с HTML5, здесь атрибут

Чтобы добиться воспроизведения ролика в различных браузерах, видео необходимо конвертировать, а в папку поместить 3 видеофайла в разных форматах. Это можно сделать онлайн, например, здесь: online-convert.com .

Минусом этого способа будет то, что на некоторых устаревших устройствах код будет работать некорректно. Если кроссбраузерность жизненно необходима, то лучше применять вариант №1 — вставку видео с использованием плеера.

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

Для того чтобы вставить аудио на страницу у нас в распоряжении опять 2 варианта: с mp3-плеером и без него — с помощью кода HTML5. У этого способа вставки аудио те же плюсы и минусы: он проще, но не поддерживается устаревшими браузерами (IE ниже v.9).

Способ 1. Код вставки аудио на страницу (где «papka/name.…» — путь к аудиофайлу, а «name» — его имя):

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

Для снижения нагрузки на ваш сервер, желательно хранить аудиофайлы на стороннем ресурсе, таком как Я.Диск (см. ссылку выше).

Способ 2. Скачайте mp3-плеер ( flv-mp3.com/ru ) и поместите его в папку с аудиофайлами. На этом сайте есть возможность «собрать» плеер самому, т.е. задать ему свои настройки:

При сборке аудио-плеера важны два параметра: адрес плеера — вы можете указать папку своего домена (что предпочтительнее), или подгружать его прямо с указанного сайта. Это отразится в коде, который вы сможете скопировать для вставки на веб-страницу, сразу после окончания сборки.

Второй параметр будет влиять на размеры и вид панели плеера, а так же надписи «Прослушать» — её вы измените на свою. Выглядеть панель будет как на следующем скриншоте, но вы сможете изменить цвет, форму и кнопки управления на более красивые:

Если нужно — укажите автозапуск, а полученный код разместите на нужной странице — его, кстати, всегда можно будет отредактировать: вручную или снова посетив страницу сборки плеера.

Как добавить видео на сайт

Все три способа актуальны при добавлении ролика через панель инструментов или с главной страницы модуля. В панели управления видео добавляется по ссылке или коду.

Ссылка

Указывается ссылка, которую можно скопировать из адресной строки с видеороликом. В данном случае используются технологии oEmbed. Поддерживаются сервисы Youtube.com, Rutube.ru, Vimeo.com, Dailymotion.com, Сoub.com.

• Скопируйте ссылку на видео. Например, если вам понравилось видео http://www.youtube.com/watch?v=blO3Yb8nZ18, то необходимо на данной странице видео нажать на кнопку «Поделиться» — вкладка «Поделиться». Будет выведена ссылка http://youtu.be/blO3Yb8nZ18 (ссылку http://www.youtube.com/watch?v=blO3Yb8nZ18 тоже можно использовать).
• Скопированную ссылку пропишите на вкладке «Добавить ссылку» — «Ссылка на видеоролик» (подробнее рассмотрим ниже).
• После прописывания ссылки подождите несколько секунд и пройдите авторизацию в Google, после этого данные будут получены.
• Выберите категорию видео, заполните дополнительные поля (если нужно), нажмите «Добавить видео». Теперь это видео доступно и на вашем сайте.

Код

Некоторые хостинги предлагают размещать видео на своих сайтах с помощью HTML-кодов плееров. В коде видеоролика можно указывать IFRAME-, EMBED-, SCRIPT-элементы. Однако в целях безопасности мы используем свою базу сервисов, которые можно использовать в данной вкладке.

Список доступных сервисов:

• youtube
• youtu
• rutube
• vkontakte
• \bvk\b
• player.vimeo
• video.mail
• video.yandex
• dailymotion
• pub.tvigle

Данная база пополняется. Предложить видеосервис, которого ещё нет у нас в базе, вы можете в теме http://forum.ucoz.ru/forum/54-41178-1.

Перейдите на страницу видео. Под плеером кликните «Код для блога» (или «HTML-код»). После этого вам будет выдан код. Например:

Полученный код пропишите в поле «Код для вставки видео» и заполните остальные поля.

Файл

Если у вас есть видеоролик, который вы хотите опубликовать на сайте, выбирайте этот вариант. Потребуется подключить аккаунт Youtube.

Чтобы пользователи могли загружать свои файлы через форму на сайте в панели управления («Видео» / «Настройки» / «Материалы») нужно включить опцию «Загрузка материалов на YouTube». Для добавления файла через панель управления включать эту опцию не требуется.

Все видео, которые вы будете загружать со своего компьютера, будут автоматически в данном сервисе (Youtube). Автоматически получаются данные:

• Код видеоролика
• Скриншот видеоролика
• Название видеоролика

Добавление видео через панель управления

В панели управления сайтом выберите модуль «Видео» из списка:

На открывшейся странице нажмите на кнопку «Добавить»:

Откроется окно выбора способа добавления видео (способы мы рассматривали выше):

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

• Категория. В зависимости от выбранного набора предустановленных категорий указывается категория для материала. Категория является обязательным для заполнения полем. Материал может относиться одновременно к нескольким категориям. Данная возможность активируется в настройках модуля опцией «Вхождение материала сразу в несколько категорий».
• Название материала. По умолчанию является текстом ссылки на добавляемое видео в каталоге и помещается в переменную $TITLE$. Является обязательным для заполнения полем.
• Описание материала. Отображается рядом со ссылкой на сайт. Для вывода описания в шаблоне используется переменная $BRIEF$. Является обязательным для заполнения полем.
• Канал. Каналы позволяют фильтровать видео. По умолчанию видео добавляется в канал пользователя. Данный способ добавления видео позволяет выбрать созданный ранее канал, который не является пользовательским.
• Скриншоты. Изображения, которые выводятся в списке видеозаписей, а также на странице видео.

• Год создания видео.
• Актеры. Список актеров через запятую. Выводится с помощью переменной $ACTERS$.
• Режиссер. Публикуется с помощью переменной $PRODUCER$.
• Автор. Произвольное имя и/или фамилия автора материала ($AUTHOR_NAME$).
• Email автора. Может быть показан на сайте с помощью переменных $AUTHOR_EMAIL$ и $AUTHOR_EMAIL_JS$. Во втором случае JavaScript препятствует копированию email-адреса роботами и скриптами, что снижает риск возникновения спам-писем по указанному адресу после добавления видео.
• Сайт автора. Ссылка на сайт автора материала. Будет опубликована на странице видео с помощью переменной $AUTHOR_SITE$.
• Длительность материала. Определяется автоматически, но может быть задана вручную. Публикуется на сайте с помощью переменной $DURATION$.
• Качество видеоматериала. Можно указать любое значение, но обычно используются общепринятые. Выводится с помощью переменной $VQUALITY$.
• Теги материала. Слова или словосочетания, которыми можно охарактеризовать сайт. Теги указываются через запятую и участвуют в поиске материалов на сайте. Указав значение тега в поиске, можно найти все материалы, содержащие данный тег. Переменная $TAGS$.
• Язык.
• Дополнительное поле 1. N. Подключить дополнительные поля можно в настройках модуля. Изменить названия — с помощью инструмента «Замена надписей».

• HTML-заголовок страницы. Используется в переменной $USER_TITLE$. Так могут быть выведены разные названия для видео на странице сайта и на вкладке браузера.
• Meta description. Явно заданное meta-описание видео. Выводится с помощью .
• Использовать ЧПУ (человеко-понятный-урл). Часть ссылки на страницу видео.

• Комментирование. Включает/отключает возможность оставлять комментарии к видео.
• Материал недоступен для просмотра (премодерация). Включает/отключает возможность просмотра материала пользователями. При включении данной опции материал после добавления неактивен (скрыт).

Поля со значениями фильтров появляются после создания фильтров. В нашем примере выше создан фильтр (Год) с множественным выбором.

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

Добавление видео через панель инструментов

Панель инструментов содержит раздел, который позволяет быстро переходить к добавлению видеоматериалов на сайт. Нажмите на иконку «+» и выберите модуль, в который хотите добавить материал:

Откроется страница добавления видео:

Выберите способ добавления видео (способы мы рассматривали ранее). Для внесения данных о видео нажмите на ссылку «Дополнительно»:

Пользователи могут выбирать, нужно ли публиковать видео в их пользовательском канале:

Если нажать на логин пользователя, появится окно с настройками канала:

Можно изменить название и описание канала, а также прикрепить скриншот к каналу. Страница канала позволяет оставлять комментарии. Для этого нужно активировать настройку «Позволить оставлять комментарии». Чтобы узнать больше о каналах, читайте инструкцию.

Нажмите на кнопку «Добавить видео», и новый материал будет добавлен на сайт.

Чтобы изменить состав полей при добавлении видео, зайдите в настройки модуля «Видео» и в разделе «Материалы» добейтесь желаемого результата:

Добавление видео с главной страницы модуля

В шаблоне страниц каталога может быть размещена ссылка, ведущая на страницу добавления видео. Ссылка имеет следующий вид:

Чтобы ссылка появилась в шаблоне, добавьте в него следующий код:

При переходе по этой ссылке откроется страница добавления видео.

Как добавить видео на сайт 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

     body < background:#FFFAF0; color:#A52A2A; width:100%; margin:0; text-align:center; >h1 
Способ 1: добавление видео с веб-сервиса YouTube
 
Способ 2: добавление видео с помощью плеера
 
Способ 3: добавление видео при помощи тегов html5
  

body < background:#FFFAF0; color:#A52A2A; width:100%; margin:0; text-align:center; >h1

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

Способ 2: добавление видео с помощью плеера

Способ 3: добавление видео при помощи тегов html5

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

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

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

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

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

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

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

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

Способ 2: добавление видео с помощью плеера